Storage prefix: zfb-example-tokens

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

Disabled state: :disabledbg: color-muted

Email input

Same class 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 — visual floor ensures usable initial height.

Checkbox group

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

Interests

Radio group

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

Preferred theme

Range slider

accent-color fills track and thumb via .zfb-form-rangecolor-accent.

0 – 100

Submit button

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