Full Example
Minimal (No Sections)
Sub-components
| Sub-component | Key Props | Description |
|---|---|---|
| FormLayout | <form> | Root form element. Accepts all standard form attributes. |
| FormLayout.Section | title?, description? | Groups related fields under a heading with a bottom border. |
| FormLayout.Field | label?, htmlFor?, description?, error?, required? | Wraps a single control with label, helper text, and error message. |
| FormLayout.Row | <div> | Inline grid — 1 column on mobile, 2 on sm+. Override via className. |
| FormLayout.Actions | align?: "left" | "right" | "center" | "between" | Button bar at the bottom with a top border. |
Usage
<FormLayout onSubmit={handleSubmit}>
<FormLayout.Section title="Details" description="...">
<FormLayout.Row>
<FormLayout.Field label="First" htmlFor="f" required>
<Input id="f" />
</FormLayout.Field>
<FormLayout.Field label="Last" htmlFor="l">
<Input id="l" />
</FormLayout.Field>
</FormLayout.Row>
<FormLayout.Field label="Email" error="Required">
<Input type="email" aria-invalid />
</FormLayout.Field>
</FormLayout.Section>
<FormLayout.Actions align="right">
<Button variant="link">Cancel</Button>
<Button type="submit">Save</Button>
</FormLayout.Actions>
</FormLayout>