Skip to content
Twentyfirst UIHalo

Combobox

Forms · Combobox, TagInput

Searchable select for long lists, single or multiple, with optional create. TagInput is the free-text sibling for tags.

Combobox props: label, options (strings or {value, label, hint, icon, avatar}), value/defaultValue, onChange, multiple, creatable, placeholder, hint, error, required.
TagInput props: label, value/defaultValue (string[]), onChange, placeholder, hint.

  • Keyboard: ↑ ↓ to move, Enter to pick, Esc to close, Backspace removes the last token.
  • Up to five fixed options without search: use RadioGroup or a native Select instead.
  • Selected items in multiple show as tokens inside the field; keep their labels short.
  • Show a hint on people (team, email) so two people with the same name can be told apart.
Ava VogelClara Haddad
Type a new name to create it
urgentq3

Props

Combobox

PropTypeNotes
label?string
options(string | Option)[]Required
value?string | string[] | null
defaultValue?string | string[]
onChange?(v: string | string[] | null) => void
multiple?boolean
creatable?boolean
placeholder?string
hint?string
error?string
required?boolean
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

TagInput

PropTypeNotes
label?string
value?string[]
defaultValue?string[]
onChange?(v: string[]) => void
placeholder?string
hint?string
error?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.