Form

Use a form to collect one or more pieces of information in a single submission. A form wraps a set of fields with shared submission, validation and layout.

Use one to:

A form follows the structure of a box:

RegionWhat it holds
HeaderThe form title, and an optional description for context
ContentThe fields. Each has a label, an input, and optional helper or error text. Related fields can be grouped in fieldsets
FooterThe action buttons: usually one primary button, such as Save or Create, and an optional secondary button, such as Cancel

How to lay a form out, choose its controls and write its help text is on the forms pattern page.

Where it exists

Storybook — story forms-form--text-input (open it in Storybook). One of 8 stories. Drag the bottom edge to resize. ⚠️ The frame renders the component at the frame's own width, so in a narrow pane you are seeing a narrow rendering rather than the canonical one.
axisvalue
React moduleyes — local component
React tierlocal
CSS class.c-form
CSS filesform.css
Storybookyes
Figmanot mapped
Uses in product310
Uses in admin8
Seen ascss-class-attribute, jsx-tag
Join provenanceinferred:kebab

An empty cell above is a measurement, not an omission: every axis is printed whether or not it is populated. What each one costs is on /gaps.md, linked from the axis name wherever this page has a gap.

Members

A member is attached to its parent at module scope, so it is imported through the parent and versioned with it. Members have no page of their own: they declare no CSS class, carry no story and join no Figma set, and their uses are counted against the parent rather than separately.