The current selection remains a string Signal that other view controls can bind to.
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.
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.
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.
SCHEMES
Every semantic family
Outlined controls keep a neutral resting border while scheme controls their foreground, focus, and selected-option accent.
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.
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 dataThere are no records to display | ||