SEARCHABLE SINGLE CHOICE
Rich option context
Descriptions and Solar icons help people distinguish similar options before they commit a value.
Clearable + disabled option
FORM
ComboBox
ComboBox combines a searchable popover, static options, optional clearing, and a typed single-selection Signal.
PLAYGROUND
Search a role catalog
Type to narrow the static option list, choose a role, and clear it when the workflow needs an explicit empty state.
SEARCHABLE SINGLE CHOICE
Rich option context
Descriptions and Solar icons help people distinguish similar options before they commit a value.
Clearable + disabled option
signal selectedRole value:"editor"
ComboBox bind:selectedRole label:"Workspace role" placeholder:"Choose a role" labelFloating:true searchPlaceholder:"Search roles" clearable:true variant:"outlined" scheme:"primary" size:"lg" name:"workspace-role"
comboOption value:"admin" label:"Administrator" description:"Manage settings, members, and billing." icon:"settings"
comboOption value:"editor" label:"Editor" description:"Create, update, and publish workspace content." icon:"edit"
comboOption value:"viewer" label:"Viewer" description:"Read workspace content without making changes." icon:"search"
comboOption value:"guest" label:"Guest" description:"Review shared links with limited access." disabled:true icon:"dismiss"SURFACES AND SIZES
Tune the control to its context
The searchable behavior stays constant while the field surface and touch density adapt to the surrounding form.
ComboBox value:"design" label:"Soft field" placeholder:"Choose a team" variant:"soft" scheme:"secondary" size:"sm"
comboOption value:"design" label:"Design" description:"Tokens and visual systems." icon:"edit"
comboOption value:"platform" label:"Platform" description:"Shared runtime foundations." icon:"settings"STATES
Empty, unavailable, and guided
Use feedback text to explain the catalog, disabled to preserve a visible choice, and custom loading copy for remote-looking flows.
BEHAVIOR
One authored catalog, every target
Dowe owns the trigger, search row, option state, and popover placement instead of delegating the contract to a platform-specific menu.
BINDING
String only
bind reads and writes the selected option value through a string Signal path.
OPTIONS
Direct children
Each comboOption needs a unique value and label, with optional description, icon, image, or disabled state.
TARGETS
Adaptive popover
Web, SwiftUI, and Compose preserve search, selection, disabled options, clear, and empty states.
API
Props
ComboBox also accepts the applicable common spacing, sizing, typography, visibility, accessibility, and shadow props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||