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

Element ClassPurpose
input_fieldFor basic text fields
input_field is-selectFor select fields
input_field is-text-areaFor multiline input
checkboxCustom-styled checkbox
radioCustom-styled radio
buttonFor submitting the form
form_success-messageVisible after submission
form_error-messageShows validation errors

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