Field
Provides a flexible container for form inputs, labels, and helper text.
- Make sure input fields look interactive
- The field's state (blank, with input, error, etc) should be visible at a glance
- Keep labels and error messages brief and easy to act on
Example
We'll never share your email with anyone else.
A name is required to submit this form. It replaces the helper text.
This will help us learn more about you.0/300
Live Playground
This is a helper text
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Make sure input fields look interactive
- The field's state (blank, with input, error, etc) should be visible at a glance
- Keep labels and error messages brief and easy to act on
Example
We'll never share your email with anyone else.
A name is required to submit this form. It replaces the helper text.
This will help us learn more about you.0/300
Live Playground
This is a helper text
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Make sure input fields look interactive
- The field's state (blank, with input, error, etc) should be visible at a glance
- Keep labels and error messages brief and easy to act on
Example
We'll never share your email with anyone else.
A name is required to submit this form. It replaces the helper text.
This will help us learn more about you.0/300
Live Playground
This is a helper text
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Make sure input fields look interactive
- The field's state (blank, with input, error, etc) should be visible at a glance
- Keep labels and error messages brief and easy to act on
Example
We'll never share your email with anyone else.
A name is required to submit this form. It replaces the helper text.
This will help us learn more about you.0/300
Live Playground
This is a helper text
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |