# Multi-select

A combobox that takes several. Each choice is set down in the well as a tag, the card of options stays out while you choose the next, and the foot of the card counts what is chosen and lets it all go. It starts as a native select with the multiple attribute, so it posts with the form and works without a script.

Kit part · With the Kit · https://tactileui.dev/parts/multi-select

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

It is the combobox, not a second one: the same element underneath, so the same select, the same card, the same match marking and the same placing, with multiple forced on. What it adds is the foot of the card, a ruled line with the count printed on it and a flat key that lets everything go, and the rules the combobox keys on its own element name, repeated for this one. The option lamps are green, one to each choice, as the combobox draws them for several.

## Variants

- Without the script · the select
- Nothing chosen
- Several chosen · the foot counts
- Shut · tags only
- No match

## States

- Rest
- Focus
- Open
- Error
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| values · value · select | property | What is chosen, the first of it, and the select itself (listen for change on it). |
| setOptions(list) | method | Replace the options for a list that comes from a server; what is chosen and still there is kept. |
| ↓ · ↑ · Enter | key | Move through the options; choose or let go of the active one. The card stays out. |
| Backspace · ← · Delete | key | Take the last tag away; move to the tags; remove the tag in focus. |
| Escape · Tab | key | Close the card; leave without choosing anything. |
| multiSelectCount(n) | function | The foot’s words: “None chosen”, “3 chosen”. |

## Usage notes

Open the well and choose Frankfurt: it becomes a tag and the card stays out, ready for the next. Type “si” to narrow the list. Backspace in the empty text takes the last tag away, and the key at the foot of the card clears them all. Deploy shows what the form would post.

## Accessibility

- The WAI-ARIA combobox with a multi-selectable listbox.
- Each tag is a key named “Remove Dublin”. Every change is said politely: “Added Dublin. 3 chosen.”, “Removed Dublin. 2 chosen.” and “All choices cleared”.
- The select’s own label names the text, and the hint and error described on the select are described on the text. Without a script it is the native multiple select.

## Related parts

- [Combobox](https://tactileui.dev/parts/combobox): A field that filters a long list as you type. It starts as a plain select, so it posts with the form and works without a script; then the options card slides out of a slot under the well, the letters that match print heavier and the chosen option’s lamp is lit. Several choices sit in the well as tags.
- [Tag input](https://tactileui.dev/parts/tag-input): A text input that turns what you type into printed tags. Enter or a comma sets one down in the well; each tag is a key that takes itself away, and every change is spoken.
- [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
- [Listbox](https://tactileui.dev/parts/listbox): An always-open list let into the plate as a recess. The rows are printed on its floor and a chosen row is a cap let down into it with its lamp lit. One row may be chosen, or several; typing a few letters finds the next row that starts with them. It starts as a native select with a size, so it posts with the form and works without a script.