Patterns
Form Element Builder
The Figma construction kit behind the Inputs pattern. Nine components that assemble into any field in the system — a designer’s tool rather than a shipped component.
Figma source: Input Builder ↗What this is
The Input Builder page holds a Master Form Element Builder and the parts it composes. Where the Inputs pattern documents the rules a form must follow, this page documents how a designer assembles a field in Figma that obeys them.
Nothing here is a separate runtime component — the CSS equivalent is the
.cds-field wrapper, which is the same idea expressed as markup.
The parts
| Figma component | Role | CSS equivalent |
|---|---|---|
| Master Form Element Builder | The assembled field: label, caption, control, error. | .cds-field |
| FEB Label | Label with basic / required / none variants. | .cds-field__label + .cds-field__required |
| FEB Descriptive Caption or Error | The text below or above the control — help text or error message. | .cds-field__caption / .cds-field__error |
| FEB Text Input Variants | Text, date, time, number, currency. | .cds-input |
| FEB Text Area | Multi-line. | .cds-textarea |
| FEB Checkbox Set | A fieldset of checkboxes. | .cds-choice-group |
| FEB Radio Set | A fieldset of radios. | .cds-choice-group |
| FEB Basic Dropdown | Select. | .cds-select |
| FEB Search Assisted Entry | Combobox with pills. | .cds-input + .cds-data-pill |
Assembling a field
The builder pairs one label component, one control, and optionally one caption. Two things are worth checking every time, because they are the ones that silently drift:
- The 8px label gap. The Pixel Grid page states that a text label sits 8px from the object it labels. Auto-layout will happily hold 12 or 16 and it will look fine in isolation — and wrong beside a correctly built field.
- Caption and error are the same slot in Figma, and are not the same slot in HTML. The FEB component names them together — “Descriptive Caption or Error” — but a field can have both at once, and when it does, the help text must stay visible. Losing the format hint at the moment the user gets the format wrong is precisely backwards.
The FEB prefix stands for Form Element Builder, but it is not
self-explanatory to anyone joining the file — and the components sort together in the
layer list under a name that reads as an abbreviation for nothing. Worth either
expanding the prefix or adding a description to the Master component pointing at this
page.