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