Flowkit (Beta)Components

Forms

Class Naming

Forms consist of modular components with consistent styling patterns. Each element (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
InputFor basic text fields
Input SelectFor select fields
Input 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 Block - 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 Element Surface

ElementSurface
InputOn Inverse
Radio (Main class is Radio Toggle)On Accent Primary
Checkbox (Main class is Checkbox Toggle)On Accent Secondary
On Accent Tertiary

Example: Checkbox Toggle Checkbox On inverse