Forms

Multi-select.

Search, choose and remove several options in one field.

LIVE PREVIEWTry it. It works.

Project disciplines

Choose a few. Remove chips with the buttons or Backspace.

1 disciplines selected

Read-only preview

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/multi-select.json

Registry setup · Open the playground

Usage

<MultiSelect label="Disciplines"
  options={[{value:"design",label:"Design"},{value:"engineering",label:"Engineering"}]}
  value={disciplines} onValueChange={setDisciplines} />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Base UI manages chip focus, Backspace removal, search and keyboard selection. Values are stable string IDs; labels can change independently. Supports controlled value/onValueChange, defaultValue, hint/error, name, disabled and required. Options can be disabled.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.