Storage prefix: next-example-tokens
Form controls demo
Each widget below is styled entirely with nx-* vocabulary classes that resolve to design tokens. Inputs use .nx-input for padding, corners, border, and focus states. Toggle any token in the Design Token Panel to see every widget update live.
Text input
.nx-input background · border-muted border · focus:border-accent focus ring · rounded corners
Disabled state: .nx-input:disabled → background: --nx-color-muted
Email input
Same .nx-input class; browser provides email-specific keyboard on mobile.
Select
Native chevron retained; same .nx-input token set as text input.
Textarea
min-height: 6rem is a component-local visual floor below token granularity.
Submit button
.nx-button.is-primary fill → --nx-color-primary. Hover switches to accent.