FORM

Select

Select lets users make one clear choice from a portable list of static options.

PLAYGROUND

Choose a workspace role

bind keeps the selected string in a Signal while each renders a validated catalog of Option children.

The current selection remains a string Signal that other view controls can bind to.

dowe
signal selectedRole value:"editor"

Select:
  bind:selectedRole
  label:"Workspace role"
  placeholder:"Choose a role"
  labelFloating:true
  Option:
    value:"admin"
    label:"Administrator"
    description:"Manage workspace members, settings, and billing."
  Option:
    value:"editor"
    label:"Editor"
    description:"Create, update, and publish workspace content."
  Option:
    value:"viewer"
    label:"Viewer"
    description:"Read workspace content without making changes."

LABELS

Fixed or floating

A fixed label stays above the trigger. A floating label rests inside an empty control, activates when the list opens, and stays active after a choice is made. Its active origin matches the selected text and is not moved by the trailing arrow.

Role
dowe
Select label:"Role" placeholder:"Choose a role"
  Option value:"admin" label:"Administrator"

Select:
  label:"Role"
  placeholder:"Choose a role"
  labelFloating:true
  Option value:"admin" label:"Administrator"

SIZES

The same trigger height everywhere

Small, medium, and large triggers are 32, 40, and 48 logical units, and their selected text scales through body sm, md, and lg. A floating label adds exactly 8 units.

VARIANTS

Four control surfaces

Variant changes the trigger treatment while the option list, arrow, labels, and single-choice behavior stay consistent.

Solid
Soft
Outlined
Ghost

SCHEMES

Every semantic family

Outlined controls keep a neutral resting border while scheme controls their foreground, focus, and selected-option accent.

Primary
Secondary
Tertiary
Muted
Success
Info
Warning
Danger

BEHAVIOR

One authored list, every target

Dowe owns the trigger and option popover instead of delegating selection to platform-native menus, pickers, or spinners.

SINGLE CHOICE

String binding

A selected Option writes its normalized string value to bind. Duplicate values are invalid.

STRUCTURE

Direct children

Option is valid only as a direct Select child, with a non-empty label and optional description.

TARGETS

Adaptive popover

Web positions the list by available space; iOS and Android keep it content-sized and scroll long catalogs.

VALIDATION

Require a deliberate choice

validate and Option are both direct Select children. Closing an empty list or making a selection marks the control as touched.

Approval role
Select the role that can approve releases.
dowe
Select bind:requiredRole label:"Approval role" helpText:"Select the role that can approve releases."
  validate rule:"required" message:"Choose an approval role."
  Option value:"admin" label:"Administrator"
  Option value:"editor" label:"Editor"

API

Props

Select also accepts the applicable common spacing, sizing, font, visibility, accessibility, and shadow props.

Prop
Type
Default

No data

There are no records to display