[New Primitive] `Combobox`

[benoitgrelard]

Mentioned in #1270 and #1334

[Roeefl]

@charrondev Hey man, how are you? any chance to get a status update on how's it going with the ComboBox feature and some ETA for alpha/beta ? Thanks so much!

[Roeefl]

Also if you need any support you're quite welcome to ask for an extra hand with some small tasks or anything 😸

[charrondev]

A little update. I'm coming back to this but my plan has changed a fair bit. I've made a couple of a short attempts and learned a bit. This is what I've figured out so far.

Initially I was attempting to make a separate component implementation altogether, but was finding a lot of logic needed to be shared with the Select. I abandoned this attempt as their was too much logic being duplicated. This was informative for me in figuring out a fair bit of the existing logic.

My second attempt tried to add additional functionality to the Select. This attempt ended up being a failure due to an incompatibility between focusing mechanism the two implementations.

Notably:

• The existing select implementation has a lot of logic in event handlers and effects to keep actual DOM focus on currently selected item and move it between 3 locations
  1. The trigger
  2. The content
  3. The selected item inside the content.
• A true combobox implementation requires you to keep focus within the input (trigger) at all times. Instead of moving focus onto selected items, focus is indicated using the aria-activedescendant property.

With all of this learned I will be making a third attempt, this time of a separate ComboBox component, although I will try to re-use the content/position logic from Select.

[diegohaz]

If this is useful to anyone, here's an implementation of Radix's Select component that includes a search input (combobox). You can achieve this by combining Radix with Ariakit (just the part necessary to render the combobox):

Radix Select with Combobox

[matt-miro]

Heya @charrondev - really appreciate the time and effort you're putting into this. We were wondering if you could share any timelines about the combobox and how we could potentially help to drive it forwards. We're hoping to introduce a combobox into one of our features, and we'd love to use one of Radix their primitives as opposed to composing one ourselves

[charrondev]

I'd made some mention of an attempt at this but I lost steam to do it in my personal time, and the work project that we'll need it for keeps getting pushed back (currently my have multiple existing implementations that we'd like to replace including a really janky custom one, react-select, and @react/combobox).

If someone else wants to take a crack at it your welcome to.

[Powerplex]

Hello :) So we needed a Dropdown AND a Combobox for our design system that manages both single and multiple selection.

At the same time, our whole design system is based on Radix and we want to keep the props cohesive across all our components.

What we did was implementing a compound pattern architecture for our combobox that sticks as much as possible with the "Radix way", but relying on Downshift for all the internals (expect the Popover part which comes from Radix's Popover).

We were asked that our Combobox covers:

• single AND multiple selection
• leading icon (optional)
• clear button (optional)
• disclosure button (optional)
• items (listbox) can be rendered inside a Popover OR inline/standalone (for example to build a combobox inside a dialog where you don't need the Combobox.Popover part of the compound)
• multiple selection display "chips" of selected items next to the typing area of the input (with full keyboard nav support).
• each chip can be individually dismissed to unselect an item
• multiple selection mode expands by default when it has too many chips inside, but can also be restricted to fit on a single line (for example if your combobox is inside a sticky navbar)
• the markup of any item inside the combobox can be customized (must remain non-interactive elements inside items for a11y)
• can be controlled/uncontrolled (input value, open state AND selected item(s))
• items can be grouped, each group has its own label
• optional ItemIndicator to display in each item when selected
• loading state (spinner), for example when loading new items using an autoSuggest API
• disabled and readOnly states
• success/error/alert states
• auto filtering (not case sensitive by default), but you can opt-out and implement your own filtering logic.
• can be combined with our own FormField component to wrap as a fieldset and attach optional parts: label, helper message, error message, characters counter, etc.
• allow custom input values that do not match any item in the list (optional)

This is just for v1, so YES this component is incredibly difficult to get right and cover all needs AND follow the a11y requirements (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). We are still missing many key features such as autoSelect (highlight the first item matching what the user types), allow more customisation of individual selected item chips, etc

Our implementation is too opinionated to end-up being a proposal for Radix, but feel free to have a look: https://github.com/adevinta/spark/tree/main/packages/components/combobox

Demo: https://sparkui.vercel.app/?path=/docs/components-combobox--docs

Maybe an audit of the a11y provided by Downshift hooks could be done (I think it is very good) and using Downshift inside a Radix implementation (adding Downshift as a Radix dependency) could help make things easier to implement in Radix for a V1/Draft (it did for us).

[sersavan]

I've assembled a multi-select component using the native shadcn's components. It's fully in line with design and integrates seamlessly into shadcn's ecosystem. Please, try it out and share your thoughts. https://shadcn-multi-select-component.vercel.app/

[therealsuji]

I've assembled a multi-select component using the native shadcn's components. It's fully in line with design and integrates seamlessly into shadcn's ecosystem. Please, try it out and share your thoughts. https://shadcn-multi-select-component.vercel.app/

Any way you could link a gist for this

[sersavan]

I've assembled a multi-select component using the native shadcn's components. It's fully in line with design and integrates seamlessly into shadcn's ecosystem. Please, try it out and share your thoughts. https://shadcn-multi-select-component.vercel.app/

Any way you could link a gist for this

https://github.com/sersavan/shadcn-multi-select-component

[joaopedrodcf]

Hello :) So we needed a Dropdown AND a Combobox for our design system that manages both single and multiple selection.

At the same time, our whole design system is based on Radix and we want to keep the props cohesive across all our components.

What we did was implementing a compound pattern architecture for our combobox that sticks as much as possible with the "Radix way", but relying on Downshift for all the internals (expect the Popover part which comes from Radix's Popover).

We were asked that our Combobox covers:

• single AND multiple selection
• leading icon (optional)
• clear button (optional)
• disclosure button (optional)
• items (listbox) can be rendered inside a Popover OR inline/standalone (for example to build a combobox inside a dialog where you don't need the Combobox.Popover part of the compound)
• multiple selection display "chips" of selected items next to the typing area of the input (with full keyboard nav support).
• each chip can be individually dismissed to unselect an item
• multiple selection mode expands by default when it has too many chips inside, but can also be restricted to fit on a single line (for example if your combobox is inside a sticky navbar)
• the markup of any item inside the combobox can be customized (must remain non-interactive elements inside items for a11y)
• can be controlled/uncontrolled (input value, open state AND selected item(s))
• items can be grouped, each group has its own label
• optional ItemIndicator to display in each item when selected
• loading state (spinner), for example when loading new items using an autoSuggest API
• disabled and readOnly states
• success/error/alert states
• auto filtering (not case sensitive by default), but you can opt-out and implement your own filtering logic.
• can be combined with our own FormField component to wrap as a fieldset and attach optional parts: label, helper message, error message, characters counter, etc.
• allow custom input values that do not match any item in the list (optional)

This is just for v1, so YES this component is incredibly difficult to get right and cover all needs AND follow the a11y requirements (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). We are still missing many key features such as autoSelect (highlight the first item matching what the user types), allow more customisation of individual selected item chips, etc

Our implementation is too opinionated to end-up being a proposal for Radix, but feel free to have a look: https://github.com/adevinta/spark/tree/main/packages/components/combobox

Demo: https://sparkui.vercel.app/?path=/docs/experimental-combobox--docs#default

Maybe an audit of the a11y provided by Downshift hooks could be done (I think it is very good) and using Downshift inside a Radix implementation (adding Downshift as a Radix dependency) could help make things easier to implement in Radix for a V1/Draft (it did for us).

This is really fantastic great job with that @Powerplex 🙏

[dkkb]

If this is useful to anyone, here's an implementation of Radix's Select component that includes a search input (combobox). You can achieve this by combining Radix with Ariakit (just the part necessary to render the combobox):

Radix Select with Combobox

ariakit works!

[gabrielucido]

I've assembled a multi-select component using the native shadcn's components. It's fully in line with design and integrates seamlessly into shadcn's ecosystem. Please, try it out and share your thoughts. https://shadcn-multi-select-component.vercel.app/

Thanks man!

[tripolskypetr]

I am really waiting for that component cause I want to implement Multiselect in https://github.com/mrzachnugent/react-native-reusables

[aretrace]

Combobox, combobox, Build it nice and neat, With options that we click or type, To make our choice complete.

Dropdown smooth, and inputs clear, Accessible for all, Keyboard, mouse, and screen readers, We heed the dev’s great call.

Combobox, combobox, Appear in code today, With props, states, and docs so bright, To guide us on our way!

🤞