FORM

ComboBox

ComboBox combines a searchable anchored popover, static options, optional clearing, and a typed single-selection Signal. Its sm, md, and lg sizes scale both control height and displayed text on every target.

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 sm, md, and lg map to 32, 40, and 48 logical units. labelFloating adds 8 on every target.

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.

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, Compose, and the Android launcher preserve search, selection, disabled options, clear, empty, and loading 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