Multi Select

Pick several options; selections render as removable tokens.

Default

writing

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Add tags</PopoverTrigger>
  <PopoverContent className="p-0">
    <Command>
      <CommandInput placeholder="Search tags…" />
      <CommandList>
        <CommandGroup>
          {tags.map((tag) => (
            <CommandItem key={tag} onSelect={() => toggle(tag)}>
              {tag}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  </PopoverContent>
</Popover>

Keyboard navigation is built in through Command (cmdk): open the popover, type to filter, move the highlight with ↑/↓, toggle a tag with Enter, and dismiss with Esc.

Markdown for agents: /design/multi-select.md · spec: /design.md