Forms consist of modular components with consistent styling patterns. Each element within a form, like labels, fields, toggles, and messages, is styled using reusable classes and combo modifiers to adapt to different contexts (inverse, accents, etc.).
Form Components
Input elements
Checkbox elements:
Radio elements:
To ensure proper contrast and accessibility, surface modifiers are applied as combo classes to individual form elements and following naming convention element on-surface
Surface options: on-inverse, on-accent-primary, on-accent-secondary, on-accent-tertiary
Example: checkbox_toggle on-inverse