Form Blocks
Overview
In most cases we recommend the following div and class structure.
.Form Block
.Form List
.Form List Item
.Field Label
.Field
Spacing
Use the following combo classes to adjust vertical spacing between elements.
Target Class
Combo Class
Value
.Form List Item
is--sm
Row-Gap: 0.75 rem
.Form List Item
is--md
Row-Gap: 1rem
.Form List Item
is--lg
Row-Gap: 1.25 rem
Text Fields
Usage
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Structure & Naming
.Form List Item
.Field Label
.Text Field
Text Areas
Usage
Text areas allow users to enter long text into a UI. They typically appear in forms and dialogs.
Structure & Naming
.Form List Item
.Field Label
.Text Area
Radio Inputs
Usage
Radio inputs allow users to select a single option.
Structure & Naming
.Form List Item
.Radio Wrap
.Radio Input
.Radio Label
Checkbox Inputs
Usage
Radio inputs allow users to select a single option.
Structure & Naming
.Form List Item
.Checkbox Wrap
.Checkbox Input
.Checkbox Label
Select Fields
Usage
Select Fields allow users to select a single option from a dropdown.
Structure & Naming
.Form List Item
.Select Field Wrap
.Select Field
.Select Field Icon
.Select Field Icon Item
Next
Components
Webflow Docs