Form controls demo

Each widget below is styled with plain CSS classes that resolve to design tokens. Inputs use spacing-sm for padding, radius for corners, color-muted for borders, color-accent on focus. Toggle any token in the Design Token Panel to see every widget update live.

Text input

bg: color-surface · border: color-muted · focus: color-accent · radius

Full name

Full name (disabled)Disabled state: :disabled → bg: color-muted

Email input

Same class set as text input; browser provides email-specific keyboard on mobile.

Email address

Select

Native chevron retained; same token set as text input.

Role

Textarea

min-height: 6rem — visual floor ensures usable initial height.

Bio

Checkbox group

Native checkbox with accent-color set to --zfb-color-accent via .zfb-form-checkbox.

InterestsDesign systemsDesign tokensCSS custom properties

Radio group

Same accent-color pattern as checkboxes via .zfb-form-radio.

Preferred themeDarkLightSystem default

Range slider

accent-color fills track and thumb via .zfb-form-range → color-accent.

Opacity0 – 100

Submit button

bg: color-primary · text: bg · hover: color-accent · p: spacing-sm · radius