Components/Inputs/MultiSelect

MultiSelect

Inputs

Multiple-value select with tag badges and keyboard navigation.

Popover-based picker where multiple values can be staged with checkboxes before committing with Apply. Includes search filtering and a clear-all control.

Usage

import { MultiSelect } from "nosible-ux"

const regions = [
  { value: "us", label: "United States" },
  { value: "eu", label: "European Union" },
  { value: "apac", label: "Asia-Pacific" },
]

export default function Example() {
  return <MultiSelect options={regions} value={[]} placeholder="Select regions" />
}

Examples

Controlled selection

Accessibility

Trigger has aria-haspopup="listbox". Each option renders as a labeled checkbox. Apply closes the popover and commits selection.

Props

Name	Type	Default	Description
`className`	`string \| undefined`	—	Additional className applied to the trigger button.
`onApply`	`((value: string[]) => void) \| undefined`	—	Called when the Apply button is clicked — receives the confirmed selection.
`onChange`	`((next: string[]) => void) \| undefined`	—	Called on every toggle — receives the new selection array.
`onSearchChange`	`((next: string) => void) \| undefined`	—	Called when the search query changes.
`open`	`boolean \| undefined`	—	Demo-only: force the panel open and render it inline (no portal).
`options`	`MultiSelectOption[]`	—	The full list of options to display.
`placeholder`	`string \| undefined`	—	Placeholder shown in the trigger when nothing is selected. Default: `"Select…"`.
`search`	`string \| undefined`	—	Controlled search query. When provided, takes over the internal input state.
`size`	`"sm" \| "md" \| "lg" \| undefined`	—	Trigger height tier. Default: `"md"`.
`value`	`string[]`	—	Currently selected values (controlled).

← All Components Getting Started →