Forms
Class Naming
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
Elements
Input elements
- input_label
- input - wrapper of the label and input field
Checkbox elements:
- checkbox_toggle
- checkbox_label
Radio elements:
- radio_toggle
- radio_label
Surface Modifiers
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