Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA multi-select combobox that shows the picks as removable chips inside the field, with a selection limit and a live count, built on the Base UI Combobox.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when a person picks several values from a known list and should see them at a glance: skills on a profile, assignees, filters. Use MultiSelect for a checkbox list in a popover and ComboboxCreatable when people need to add values that are not in the list.
| Prop | Type | Default | Description |
|---|---|---|---|
items | { value: string; label: string; disabled?: boolean }[] | - | The options. |
value / defaultValue | string[] | [] | Selected item values, controlled or initial. |
onValueChange | (value: string[]) => void | - | Runs on every change. |
max | number | - | Largest selection; other options become disabled. |
placeholder | string | Add… | Shown while nothing is selected and the input is empty. |
emptyText | string | No results. | Shown when the filter matches nothing. |
invalid | boolean | false | Sets aria-invalid and the destructive border. |
name | string | - | Submits one entry per selected value. |
disabled | boolean | false | Disables the field. |
The input is a combobox with a listbox popup. Chips are focusable with the arrow keys from the input and removed with Backspace, Delete or their Remove button, whose name is Remove <label>. When max is set the popup shows N of M selected to screen readers and options past the limit are aria-disabled. Give the input an aria-label or a visible label.