Layout
Arrange form fields with a self-contained grid built for forms.
FormRow and FormCol give you column-based horizontal
forms, ColFormLabel aligns a label alongside its control, and
FormGroup / FormLabel / FormText handle
the common stacked field.
Import
import {
FormRow,
FormCol,
ColFormLabel,
FormGroup,
FormLabel,
FormText,
} from '@metatoy/bootstrap-styled';Horizontal forms
Put a ColFormLabel and a FormCol in a FormRow to place a label beside its
control. Give the label and column matching sm spans (e.g. sm={2} +
sm={10}) so they add up to 12, and set align="center" on the row to line the
baseline up.
Label & control sizing
ColFormLabel takes a size (sm / lg) that matches its paired
FormControl so the label’s vertical padding aligns with the taller or shorter
control.
Column gutters
FormRow sets the horizontal gutter with gx (0–5, default 3) and the vertical
gutter between wrapped rows with gy. A bare FormCol with no span is an
equal-width column.
Stacked groups
For a standard vertical field, wrap a FormLabel, control, and optional
FormText help text in a FormGroup — it supplies the mb-3-style spacing
between fields.
Props
FormRow
| Prop | Type | Default | Description |
|---|---|---|---|
| gx | GutterScale | — | `.gx-*` — horizontal gutter between columns (0–5). Default 3 (1.5rem). |
| gy | GutterScale | — | `.gy-*` — vertical gutter between wrapped rows (0–5). Default 0. |
| align | "center" | "start" | "end" | "baseline" | "stretch" | — | Cross-axis alignment — `center` gives a classic horizontal form. |
FormCol
| Prop | Type | Default | Description |
|---|---|---|---|
| span | ColSpan | 'auto' | true | — | Column span at the base breakpoint: 1–12, `'auto'`, or `true` (equal-width). |
| sm | ColSpan | 'auto' | — | Column span at ≥576px (the usual horizontal-form breakpoint). |
ColFormLabel
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "lg" | — | Match the paired control's size so vertical padding lines the label up. |
| sm | ColSpan | 'auto' | — | Column span at ≥576px, e.g. `sm={2}` → `col-sm-2 col-form-label`. |
FormLabel, FormText, and FormGroup are styled elements (<label>,
<small>, and <div> respectively) with no props of their own — they accept
their native element attributes. All three, plus FormRow / FormCol /
ColFormLabel, forward every native attribute of their underlying element.
Theming
The layout pieces are structural, so they lean on the grid tokens rather than
colors. FormRow sets --bs-gutter-x / --bs-gutter-y (which FormCol and
ColFormLabel read for their padding), so overriding the gutter on the row
flows down to the columns. FormText reads --bs-secondary-color for its muted
help-text color:
<FormGroup style={{ '--bs-secondary-color': '#6d28d9' }}>
<FormLabel htmlFor="promo">Promo code</FormLabel>
<FormControl id="promo" />
<FormText>Applied at checkout.</FormText>
</FormGroup>Accessibility
Always associate a label with its control: give FormLabel / ColFormLabel an
htmlFor that matches the control’s id. When FormText provides instructions
for a field, reference it from the control with aria-describedby pointing at
the help text’s id so assistive tech announces it. FormRow / FormCol are
purely visual and add no semantics.