Form
Form CSS classes provide consistent spacing and alignment, reduce repetitive code, and simplify maintenance—making forms easier to style and more polished across your app.
ℹ️ What is a Field?A field is a structured wrapper component used to group a label and a control (such as an input, combo-box, or textarea) into a single cohesive unit. It helps maintain consistent layout, spacing, and accessibility across your forms. In HTML terms, it reflects the common pairing of a
labeland a control element, but it abstracts that pairing into a reusable and customizable component.
1. Field: Block
A block field displays the label above the control, stacking them vertically. This is the most common layout for forms, especially in responsive or mobile-friendly designs. A block field provides better alignment for multiple fields in a column layout.
2. Field: Inline
An inline field places the label beside the control, horizontally aligned. Saves vertical space — great for short forms or compact UIs. Looks cleaner in dense layouts (e.g., toolbars, settings panels).
3. Field Group: Block
A field group is a wrapper for fields that applies organization and consistent spacing to create a clean, logical sections and improve overall layout. This example shows how block fields look within a field group.
4. Field Group: Inline
A field group is a wrapper for fields that applies organization and consistent spacing to create a clean, logical sections and improve overall layout. This example shows how inline fields look within a field group.
5. Field Group: Justified Start
To achieve vertical alignment between labels and controls, use the field-group-justified-start class. This layout creates an inline grid where labels take up the same column width, ensuring consistent alignment and a more harmonious form. Labels are aligned to the start (left in LTR), contributing to a clean and readable design.
⚠️ For this layout, place labels and controls as direct children of the field group without wrapping them in fields.
6. Field Group: Justified End
To achieve vertical alignment between labels and controls, use the field-group-justified-end class. This layout creates an inline grid where labels take up the same column width, ensuring consistent alignment and a more harmonious form. Labels are aligned to the end (right in LTR), contributing to a clean and readable design.
⚠️ For this layout, place labels and controls as direct children of the field group—without wrapping them in fields.
7. Custom Layout
A custom grid layout allows for flexible arrangement of form controls, such as placing two controls in the first row and a full-width control in the second row. For custom grids you should always apply the .field-group class on the container, as this class defines the spacing between columns and rows. Then, for defining your custom layout, we suggest using grid-template such as in the next example.