Selection

A single binary control representing list-membership ("include this item") or feature-flag state ("agree to terms"). Use Checkbox when the semantic is "select / deselect"; use Switch when the semantic is "enable / disable a feature." Pair with `field` for the label.

Readiness

complete

Preview

live

Props

5

Examples

2

Code

implementation mapped

type: checkbox
props:
  checked: ${state.remember_me}
  on_change: ${actions.toggle_remember_me}
  label: Remember me

type: checkbox
props:
  checked: false
  indeterminate: true
  label: All items

CheckboxGroup presents a related set of independent choices. It keeps spacing, disabled state, and value updates consistent while allowing any number of options to be selected.

Readiness

complete

Preview

live

Props

5

Examples

1

Code

implementation mapped

type: checkbox-group
props:
  value:
  - slack
  - email
  direction: horizontal
  options:
  - value: slack
    label: Slack
  - value: email
    label: Email
  - value: webhook
    label: Webhook

Choose a colour. Swatches are native buttons (so Enter/Space and focus come from the platform); the selected swatch shows a check overlay. A hex field accepts any value and commits on Enter or blur, with a live preview chip. When no `palette` prop is given a neutral default palette is shown. State is local and disposal-safe.

Readiness

complete

Preview

live

Props

3

Examples

2

Code

implementation mapped

type: color-picker
props:
  palette:
  - '#f5d96e'
  - '#22c55e'
  - '#38bdf8'
  - '#a78bfa'
  - '#f472b6'
  - '#ef4444'
  - '#f59e0b'
  - '#14b8a6'
  - '#94a3b8'
  - '#0a0a0d'

type: color-picker
props:
  value: '#22c55e'
  palette:
  - '#f5d96e'
  - '#22c55e'
  - '#38bdf8'
  - '#ef4444'

A single-value picker for option sets too large (or too open) for a plain Select. The user types; the list filters case-insensitively on both option label and value; Enter commits either the focused suggestion or the raw free text. The popup closes on Escape, on outside click, or after a commit. State is local and disposal-safe — no timers, no leaked closures.

Readiness

complete

Preview

live

Props

4

Examples

2

Code

implementation mapped

type: combobox
props:
  placeholder: Search languages…
  options:
  - value: rust
    label: Rust
  - value: typescript
    label: TypeScript
  - value: python
    label: Python
  - value: go
    label: Go
  - value: elixir
    label: Elixir

type: combobox
props:
  placeholder: Unavailable
  disabled: true
  options:
  - value: a
    label: Alpha
  - value: b
    label: Beta

A compact binary toggle representing a filter. Click toggles the active state; the chip's visual reflects whether the filter is on. Multiple FilterChips together represent OR-style filters (typically) — the application controls the join semantic.

Readiness

complete

Preview

live

Props

4

Examples

1

Code

implementation mapped

type: stack
props:
  gap: sm
  direction: row
children:
- type: filter-chip
  props:
    active: ${state.show_active}
    on_toggle: ${actions.toggle_active}
    label: Active
- type: filter-chip
  props:
    active: ${state.show_idle}
    on_toggle: ${actions.toggle_idle}
    label: Idle
- type: filter-chip
  props:
    active: ${state.show_archived}
    on_toggle: ${actions.toggle_archived}
    label: Archived

Pick one icon from the library. A search box filters the key set; the grid is a roving-focus listbox where arrow keys move the highlight and Enter/Space commits. Selection is reflected with a token-driven highlight. When no `icons` prop is supplied a small curated default set is shown. State is local and disposal-safe.

Readiness

complete

Preview

live

Props

3

Examples

2

Code

implementation mapped

type: icon-picker
props:
  icons:
  - home
  - settings
  - user
  - star
  - activity
  - zap
  - eye
  - filter
  - clock
  - code
  - chat
  - list
  - grid
  - globe

type: icon-picker
props:
  disabled: true
  icons:
  - home
  - settings
  - star

LabeledSwitch is the settings-row version of Switch. It pairs a boolean control with a title and optional description so users understand the state before toggling it.

Readiness

complete

Preview

live

Props

5

Examples

1

Code

implementation mapped

type: labeled-switch
props:
  checked: true
  label: Retry failed runs
  description: Automatically retry transient failures before alerting an operator.

Pick several values from a fixed option set. The trigger shows the selection as chips (each with an inline remove affordance) or a placeholder when empty, plus a count. The popup is a multi-selectable listbox: Space/Enter toggles the focused option, arrows move focus, Escape closes. Every toggle emits the full new selection. State is local and disposal-safe (backdrop-based outside-click, like Select).

Readiness

complete

Preview

live

Props

4

Examples

2

Code

implementation mapped

type: multi-select
props:
  placeholder: Choose scopes…
  values:
  - read
  - write
  options:
  - value: read
    label: Read
  - value: write
    label: Write
  - value: admin
    label: Admin
  - value: billing
    label: Billing

type: multi-select
props:
  placeholder: Nothing selected yet
  options:
  - value: a
    label: Alpha
  - value: b
    label: Beta
  - value: c
    label: Gamma

NativeSelect uses the browser and operating system's own option picker while matching the platform input chrome. It is the conservative choice when native keyboard, mobile, or assistive-technology behavior matters more than custom dropdown styling.

Readiness

complete

Preview

live

Props

5

Examples

1

Code

implementation mapped

type: native-select
props:
  value: editor
  placeholder: Choose role...
  options:
  - value: owner
    label: Owner
  - value: editor
    label: Editor
  - value: viewer
    label: Viewer

A single mutually-exclusive choice within a RadioGroup. Use when the user must pick exactly one option from a small visible set. For >5 options, prefer Select (or SearchableSelect) — radios scale poorly vertically.

Readiness

complete

Preview

live

Props

6

Examples

1

Code

implementation mapped

type: stack
props:
  gap: sm
children:
- type: radio
  props:
    name: plan
    value: free
    checked: ${state.plan == 'free'}
    on_change: ${actions.set_plan}
    label: Free
- type: radio
  props:
    name: plan
    value: pro
    checked: ${state.plan == 'pro'}
    on_change: ${actions.set_plan}
    label: Pro
- type: radio
  props:
    name: plan
    value: team
    checked: ${state.plan == 'team'}
    on_change: ${actions.set_plan}
    label: Team

RadioCardGroup presents a small set of exclusive choices where each option needs a title and supporting description. It gives the visual weight of cards while retaining radiogroup semantics.

Readiness

complete

Preview

live

Props

4

Examples

1

Code

implementation mapped

type: radio-card-group
props:
  value: balanced
  options:
  - value: compact
    title: Compact
    description: More rows visible in operational panels.
  - value: balanced
    title: Balanced
    description: Default spacing for mixed reading and action.
  - value: relaxed
    title: Relaxed
    description: More whitespace for presentation-heavy surfaces.

RadioGroup presents a short set of mutually exclusive choices. It keeps all options visible so users can compare them without opening a menu.

Readiness

complete

Preview

live

Props

6

Examples

1

Code

implementation mapped

type: radio-group
props:
  value: comfortable
  direction: horizontal
  name: Density
  options:
  - value: compact
    label: Compact
  - value: comfortable
    label: Comfortable
  - value: spacious
    label: Spacious

A select whose dropdown contains a `<SearchInput>`, so the user type-to-filters a long option list instead of scrolling it. Supports optional grouping, a loading state (async option fetch), and a disabled state. Reach for it when a plain `<Select>` would force the user to scan dozens+ of options. It lives portal-side today (`portal/src/components/searchable_select.rs`) with this catalog entry as the stable contract.

Readiness

complete

Preview

live

Props

5

Examples

2

Code

implementation mapped

type: stack
props:
  direction: column
  gap: sm
children:
- type: input
  props:
    placeholder: Search…
    value: py
- type: text
  slots:
    default: Actions
- type: text
  slots:
    default: '  python · javascript · ruby'
- type: text
  slots:
    default: Data
- type: text
  slots:
    default: '  sql · vector'

type: stack
props:
  direction: row
  gap: sm
children:
- type: spinner
- type: text
  slots:
    default: Loading options…

A custom-styled single-value dropdown. Option list is rendered with consistent focus / hover / selected treatment; the trigger surface matches Input visuals so a Select sits naturally inside a Field. Use NativeSelect when OS-native keyboard / screen-reader parity matters more.

Readiness

complete

Preview

live

Props

5

Examples

1

Code

implementation mapped

type: field
props:
  label: Status
  field_id: status
slots:
  default:
  - type: select
    props:
      value: ${state.status}
      on_change: ${actions.set_status}
      placeholder: Choose status...

A binary toggle for feature-flag state ("Notifications: on/off"). Use Switch when the action is "turn on / turn off." Use Checkbox when the action is "select / deselect" (list-membership semantic). Pair with LabeledSwitch for the labelled variant.

Readiness

complete

Preview

live

Props

4

Examples

2

Code

implementation mapped

type: switch
props:
  checked: ${state.notifications_enabled}
  on_change: ${actions.toggle_notifications}

type: stack
props:
  gap: md
  direction: row
  align: center
children:
- type: switch
  props:
    size: small
    checked: true
- type: switch
  props:
    size: medium
    checked: true
- type: switch
  props:
    size: large
    checked: true