Inputs

Form controls and data-entry primitives — every control resolves its size class from its own container via CSS @container (compact, regular, expanded). Resize a demo frame to watch one adapt.

Button

The principal action — ink fill, quiet secondaries, subtle for toolbars.

Button
Color slots
SlotTokenDescription
Primary Backgroundvar(--cta-bg)Primary CTA fill
Primary Textvar(--cta-fg)High contrast label text
Secondary Backgroundvar(--input-background)Panel fill
Secondary Textvar(--text-primary)High readability label
Bordervar(--border-subtle)Subtle perimeter outline
Typography elements
ElementRoleSizeWeightLine height
labelvar(--text-role-label)0.875rem6001.2
Spacing rules
AxisWhatCompactRegularExpanded
PaddingHorizontal and vertical inner paddingvar(--space-2) var(--space-3)var(--space-3) var(--space-4)var(--space-3) var(--space-6)
Icon gapSpace between icon and labelvar(--space-2)var(--space-2)var(--space-3)
Min heightTappable target heightvar(--space-7)var(--space-8)var(--space-8)
Corner radiusBorder radius tokenvar(--radius-2)var(--radius-3)var(--radius-4)
States
StateBackgroundBorderText
restvar(--cta-bg)—var(--cta-fg)
hovervar(--interaction-hover)—var(--text-primary)
activevar(--interaction-pressed)—var(--text-primary)
focusvar(--cta-bg)var(--border-focus)var(--cta-fg)
disabledvar(--interaction-disabled)—var(--text-muted)
Button props
PropTypeDefaultDescription
variantprimary | secondary | subtle | destructiveprimaryColor variant.
forceSizeClasscompact | regular | expanded—Pin a size class (overrides runtime).
disabledbooleanfalseDisables the button.
loadingbooleanfalseShows a busy state.

Checkbox

One independent yes.

Checkbox
Checkbox props
PropTypeDefaultDescription
aria-labelstring—Accessible label.
checkedbooleanfalseControlled checked state.

Combo box

Type to narrow, pick to commit.

Combo Box
ComboBox props
PropTypeDefaultDescription
options{ id, label }[]—Selectable options.
valuestring—Controlled value.

Date picker

One calendar, one ISO value.

Date Picker
DatePicker props
PropTypeDefaultDescription
valuestring—Controlled ISO date.
onChange(iso: string) => void—Date change callback.

Drop zone

Files arrive on the dashed edge — the one dashed style in the system.

Drop Zone
Drag files hereBrowse
DropZone props
PropTypeDefaultDescription
onDrop(files: File[]) => void—Fires on file drop.
acceptstring—Accepted MIME types.

Input

The single-line field.

Input
Color slots
SlotTokenDescription
Backgroundvar(--input-background)Field background well
Bordervar(--border-default)Field boundary ring
Textvar(--text-primary)Primary typed text
Placeholdervar(--text-muted)Recessed placeholder text
Typography elements
ElementRoleSizeWeightLine height
valuevar(--text-role-body)0.875rem4001.4
placeholdervar(--text-role-body)0.875rem4001.4
Spacing rules
AxisWhatCompactRegularExpanded
PaddingField inner paddingvar(--space-2)var(--space-3)var(--space-3) var(--space-4)
Adornment gapSpace to prefix/suffix iconvar(--space-2)var(--space-2)var(--space-3)
Min heightField heightvar(--space-7)var(--space-8)var(--space-8)
Corner radiusField radiusvar(--radius-2)var(--radius-3)var(--radius-4)
States
StateBackgroundBorderText
restvar(--input-background)var(--border-default)var(--text-primary)
hovervar(--input-background)var(--border-default)var(--text-primary)
focusvar(--page-background)var(--border-focus)var(--text-primary)
errorvar(--input-background)var(--danger)var(--text-primary)
disabledvar(--interaction-disabled)var(--border-subtle)var(--text-muted)
Input props
PropTypeDefaultDescription
forceSizeClasscompact | regular | expanded—Pin a size class (overrides runtime).
loadingbooleanfalseLabels a busy state.
placeholderstring—Placeholder text.

KPI

Key performance indicators for the Inputs category are planned.

KPI metrics for the Inputs category are planned.

Pin entry

Digits one by one.

Pin Entry
PinEntry props
PropTypeDefaultDescription
lengthnumber4Number of digits.
onComplete(pin: string) => void—Fires when all digits entered.

Radio

One yes among many.

Radio
Radio props
PropTypeDefaultDescription
namestring—Radio group name.
aria-labelstring—Accessible label.

Rating

Stars as a value.

Rating
Rating props
PropTypeDefaultDescription
valuenumber0Current rating.
maxnumber5Maximum stars.

Search field

An input that searches.

Search Field
SearchField props
PropTypeDefaultDescription
placeholderstring—Placeholder text.
onSearch(q: string) => void—Search callback.

Segmented control

Small, visible choices — view switches and filters.

Segmented Control
SegmentedControl props
PropTypeDefaultDescription
options{ value, label }[]—Segment options.
valuestring—Controlled active value.

Select

One choice from a list.

Select
Select props
PropTypeDefaultDescription
childrenReactNode—Option elements.
valuestring—Controlled value.

Slider

A value along a track.

Slider
Slider props
PropTypeDefaultDescription
minnumber0Minimum value.
maxnumber100Maximum value.
defaultValuenumber—Uncontrolled initial value.

Stepper

Where you are in a flow.

Stepper
Upload
Map
Sign
Stepper props
PropTypeDefaultDescription
steps{ id, label }[]—Step labels.
currentnumber0Active step index.

Textarea

The multi-line field.

Textarea
Textarea props
PropTypeDefaultDescription
placeholderstring—Placeholder text.
rowsnumber3Visible row count.

Toggle

A setting that stays set.

Toggle
Toggle props
PropTypeDefaultDescription
aria-labelstring—Accessible label.
checkedbooleanfalseControlled checked state.