MultiSelect

Searchable multi-value dropdown with keyboard navigation. Renders selected values as chips.

Controlled

Monitor regions

import { useState } from 'react'
import { MultiSelect } from '@canarist/ui'

const options = [
  { value: 'us-east', label: 'US East' },
  { value: 'eu-central', label: 'EU Central' },
]

function Example() {
  const [selected, setSelected] = useState(['us-east'])
  return (
    <MultiSelect
      label="Monitor regions"
      options={options}
      value={selected}
      onChange={setSelected}
      placeholder="Select regions…"
    />
  )
}

Reference

Prop	Type	Default	Description
options	{ value: string; label: string }[]	—	Available options.
value	string[]	—	Array of selected values.
onChange	(values: string[]) => void	—	Called with the updated selection.
label	string	—	Label shown above the dropdown.
placeholder	string	'Select...'	Placeholder text when nothing is selected.
searchable	boolean	true	Show a search input inside the dropdown.
disabled	boolean	—	Disable the component.
error	string	—	Error message shown below the dropdown.