MultiSelect

Import it per subpath and pass the options plus the selected array: import { MultiSelect } from '@zyncat/ui/multi-select', then <MultiSelect options={CHANNELS} value={channels} onChange={setChannels} ariaLabel="Channels" searchable />. options takes a flat SelectOption[] or SelectGroup[] for labelled sections, value is the array of selected option values, and onChange fires with the next array plus the option that was toggled. Drop value and pass defaultValue instead to run it uncontrolled.

No - a multiple selection dropdown that shut on every pick would make you reopen it for each choice, so toggling a row leaves the menu open and onChange fires each time with the full next array. It closes on Escape, on Tab, or on a press outside the menu, and Escape returns focus to the trigger.

The first selected option's label followed by a +N pill counting the rest, so three selections read "Design +2". One selection shows just that label, and its icon if the option carries one; none shows placeholder, which defaults to "Select options".

Both are built in. Every row draws a checkbox tick that tracks its aria-selected state, and searchable pins a type-to-filter field above the list which matches each option against its label and its description. searchPlaceholder sets that field's text; without searchable, typing into the open menu jumps to an option by prefix instead.

The native <select multiple> needs Ctrl or Cmd-click to add to a selection, renders as a scrolling box rather than a dropdown, and barely takes styling. This is a custom listbox instead: one click toggles a row, the menu stays put, and the size, highlight and rail props restyle it on top of the same design tokens as the rest of the library. It is MIT, needs no jQuery plugin and no Tailwind config, and ships zero runtime dependencies.

Yes - trigger takes your own element, or a function receiving { open, selected } where selected is the full SelectOption[] in option order, so a trigger that reads "3 channels" instead of the first +N label is one line. The element is cloned with the combobox wiring - role, aria-expanded, aria-controls, aria-activedescendant, the arrow keys and the anchor the menu measures - so it must be one focusable element that forwards its props and its ref. placeholder and leadingIcon stop applying; the menu keeps its size, its filter field and its checkbox rows, and toggling a row still leaves it open.

Yes. The trigger is a role="combobox" button wired with aria-haspopup, aria-expanded, aria-controls and aria-activedescendant, the list is a role="listbox" with aria-multiselectable, and each row is a role="option" carrying aria-selected. Arrow keys move the active option, Home and End jump to the ends, Enter toggles it - so does Space, unless searchable has put the caret in the filter field - Escape closes and returns focus to the trigger, and disabled options are skipped by keyboard nav and typeahead alike.