Multi Select

A combobox-style multi-select with removable tag chips and search. Options are filtered as the user types; selected values appear as dismissable chips in the trigger.

Next.js

TypeScript

Selected: next, typescript

import { MultiSelect } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add multi-select

Import

import.tsx

import { MultiSelect } from "@aetherstack/patterns"

Usage

multi-select.tsx

import * as React from "react"
import { MultiSelect } from "@aetherstack/patterns"

const OPTIONS = [
  { value: "next", label: "Next.js" },
  { value: "react", label: "React" },
  { value: "typescript", label: "TypeScript" },
]

export function MyMultiSelect() {
  const [value, setValue] = React.useState<string[]>([])
  return (
    <MultiSelect
      options={OPTIONS}
      value={value}
      onValueChange={setValue}
      placeholder="Select frameworks…"
      maxSelected={3}
    />
  )
}

Props

Prop	Type	Default	Description
options*	{ value: string; label: string }[]	—	List of selectable options.
value*	string[]	—	Controlled array of selected option values.
onValueChange*	(value: string[]) => void	—	Callback fired when the selection changes.
placeholder	string	"Select…"	Hint text shown when nothing is selected.
maxSelected	number	—	Maximum number of items that can be selected simultaneously.
disabled	boolean	false	Disables the control.
className	string	—	Additional classes on the trigger wrapper.

* Required

Accessibility

→Trigger uses role="combobox" with aria-expanded and aria-haspopup="listbox".
→Each option in the dropdown has role="option" and aria-selected reflecting its state.
→Chip remove buttons carry aria-label="Remove {label}" for screen readers.
→Arrow keys navigate the option list; Enter toggles selection.