MultiSelect

MultiSelect

<MultiSelect label="Tags" defaultSelectedKeys={['design']}>
  <MultiSelectOption id="design">Design</MultiSelectOption>
  <MultiSelectOption id="engineering">Engineering</MultiSelectOption>
  <MultiSelectOption id="research">Research</MultiSelectOption>
</MultiSelect>

Install: @helixui/core

import { MultiSelect, MultiSelectOption } from '@helixui/core'

status: beta · since: 0.1.0

Tags: combobox, tags, chips, multi

Anatomy

[ chip × ][ chip × ][ chip × ]  type… ▾
                                  └─ popover listbox ─┐
                                     • option 1       │
                                     • option 2       │
                                     ▼ load more

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, hugs height + chip rows
• stackable — false
• fullBleed — false

Visual

A combobox-style input with selected values rendered as inline removable tags. Typing filters the popover listbox below; selecting an option adds another chip.

Props

Name	Type	Default	Description
label	ReactNode	—	Visible label.
description	ReactNode	—	Helper text.
errorMessage	string | (v: ValidationResult) => string	—	Error text.
placeholder	string	Add…	Combobox input placeholder.
selectedKeys	Selection	—	Controlled selected ids.
defaultSelectedKeys	Iterable<string | number>	—	Uncontrolled initial selection.
onSelectionChange	(keys: Selection) => void	—	Selection change handler.

Slots

• children — MultiSelectOption components

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.subtle, color.bg.action.brand.default, color.text.primary, color.text.secondary, color.text.muted, color.text.action.brand, color.text.on.brand, color.text.action.danger, color.border.default, color.border.focus, radius.md, radius.sm, radius.full, space.1, space.2, space.3, font.family.sans, font.size.sm, font.size.xs, font.weight.medium, shadow.md

Accessibility

Notes

• Composes react-aria-components ComboBox + TagGroup. ComboBox handles input typing & list selection; TagGroup handles selected-tag removal with Backspace and Delete.
• Provide aria-label on the container if no label is shown.

Composes with

Component	Relation	Note
Select	alternative	Use Select for single-value.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

pick multiple tags

“multi-select for tags”

<MultiSelect value={tags} onChange={setTags}>
  <MultiSelectOption value="design">Design</MultiSelectOption>
  <MultiSelectOption value="ai">AI</MultiSelectOption>
</MultiSelect>

Related

• Select