Form controls demo
Each widget below is styled entirely with frozen astro-* vocabulary classes that resolve to --astro-* design tokens. Inputs use --astro-hsp-sm / --astro-vsp-sm for padding, --astro-radius for corners, --astro-color-muted for borders, --astro-color-accent on focus. Toggle any token in the Design Token Panel (topbar button) to see every widget update live.
Text input
astro-input: bg-surface background · border-muted border · focus:border-accent focus ring · radius corners
Disabled state: astro-input:disabled → --astro-color-muted background
Email input
Same utility set as text input; browser provides email-specific keyboard on mobile.
Select
Native chevron retained; same token set as text input.
Textarea
min-height: 6rem is below-token granularity — component-local exception.
Checkbox group
Native checkbox with accent-color set to --astro-color-accent via inline style. No vocabulary class maps to accent-color.
Interests
Radio group
Same accent-color inline-style pattern as checkboxes.
Preferred theme
Range slider
Full-width range; accent-color fills track and thumb with --astro-color-accent.
0 – 100
Submit button
astro-button.is-primary: primary fill · --astro-bg label · hover switches to accent fill · --astro-hsp-sm / --astro-vsp-sm padding · --astro-radius corners.