Form controls demo

Each widget below is styled entirely with Tailwind utilities that resolve to design tokens. Inputs use px-hsp-sm py-vsp-sm for padding, radius for corners, color-muted for borders, color-accent on focus, color-danger on error. Toggle any token in the Design Token Panel to see every widget update live.

Text input

bg-surface background · border-muted border · focus:border-accent focus ring · rounded-md corners

Full name

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

Email input

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

Email address

Select

Native chevron retained (no appearance-none); same token set as text input.

Role

Textarea

min-h-[6rem] arbitrary value — visual floor ensures usable initial height.

Bio

Checkbox group

Native checkbox with accent-color set to --zfbtw-color-accent. No Tailwind utility maps to accent-color in §131.1, so the value is applied via inline style.

InterestsDesign systemsDesign tokensTailwind CSS

Radio group

Same accent-color inline-style pattern as checkboxes.

Preferred themeDarkLightSystem default

Range slider

w-full width · accent-color fills the track and thumb with color-accent.

Opacity0 – 100

Submit button

bg-primary fill · text-bg label · hover:bg-accent hover · px-hsp-sm py-vsp-sm padding · rounded-md corners.