Use a Form when you need to collect one or more pieces of information from the user in a single submission. Forms wrap a set of input fields with shared submission logic, validation, and layout.
When to use
- Collecting user credentials (sign in, sign up)
- Capturing app, organizations or account settings
- Creating or configuring resources such as metrics, triggers, and log sources
- Any scenario where user input must be validated before being sent to a server
Anatomy
A Form follows the structure of the Box component, dividing its layout into three regions: header, content, and footer.
|
Region |
Region |
|---|---|
|
Header |
Inherits the Box header structure. Contains the form title and an optional description providing context. |
|
Content |
The main body of the form. Houses one or more form fields, each consisting of a label, an input component, and optional helper or error text. Fields can be logically grouped with fieldsets. |
|
Footer |
Contains action buttons — typically a primary button (e.g. "Save", "Create") and an optional secondary button (e.g. "Cancel"). Follows the Box footer layout. |