Include button in SelectItem, ComboboxItem

[mule-stand]

Hello! Can I include button directly in SelectItem, ComboboxItem (like "Delete Item", etc)? And if dont, how I can do it? And how i can show this button only when item is active (like data-[active-item])?

Like this

[diegohaz]

That's a tough one since the current ARIA spec doesn't provide a way to represent this type of UI. There's a proposed aria-actions attribute that could potentially address this in the future: w3c/aria#1440

I plan to write an example of this, but I need to do more research first. My top idea at the moment is to render those action elements outside of the combobox/select list, and then position them next to their respective items using CSS/Floating UI.

You can render these elements conditionally by checking if the combobox/select activeId state corresponds to the current item:

function MyComboboxItem(props) {
  const id = React.useId();
  const combobox = Ariakit.useComboboxContext()!;
  const isActiveItem = combobox.useState((state) => state.activeId === id);

[mule-stand]

useId is just an example of the concept? Do I need to specify an id for each SelectItem? Or how? Because I understand there are some identifiers generated under the hood?

[diegohaz]

Ariakit automatically generates IDs under the hood, but if you want to use them in your code, it's best to generate them yourself using React's useId.