Form Element

Utilities

We recommend sticking to margin-bottom utilities, and using a single direction throughout the form for consistency.

Form grid

More complex forms can be built using the grid components. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Complex Form Grid

More complex layouts can also be created with the grid system.

Horizontal form

Create horizontal forms with the grid by adding as=Row to form groups and using Col to specify the width of your labels and controls. Be sure to add the column prop to your FormLabels as well so they’re vertically centered with their associated form controls.

At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.

Inline forms

Set column width in Row just like - <Row lg='auto'> to create responsive horizontal layouts.

Form with icon

Place an icon inside add-on on either side of an input. You may also place one on right side of an input.