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

dowe
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.

Soft field
Line field
Large outlined field
dowe
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.

No matching project
Try a project key or team name.
Billing domain
This catalog is unavailable for your workspace.
Small
Medium
Large

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 data

There are no records to display