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
Live Playground
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
- How to write supporting text
- Helper text should be concise and easy to understand
- Helper text should not be redundant with the label
- Error text should be clear and actionable
- Error text should provide the context of the helper text
Standard Field
Responsive Layout
As layouts adapt to larger screens and different window sizes, apply flexible container dimensions to fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.
Fields can span the full width of the display on compact window sizes, but should be bounded by flexible margins or other containers on medium and expanded window sizes.
On this page
import { Field, FieldParts,} from '@cerberus/react'Usage
The Field component helps manage the state of form fields and ensures consistent display of labels, helper texts, and error messages.
Primitives
You can utilize the primitive components to customize the field.
| Component | Description |
|---|---|
| FieldRoot | The context provider for the Field parts |
| FieldLabel | The label of the field |
| FieldInput | The input of the field |
| FieldTextarea | The textarea of the field |
| FieldHelperText | The helper text of the field |
| FieldErrorText | The error text of the field |
| StartIndicator | The start indicator of the field |
| StatusIndicator | The status indicator or end icon of the field |
| RequiredIndicator | The required indicator of the field |
API
Props
The Field component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| label | The label to show above the field input. | |
| helperText | The helper text to show below the field input. | |
| secondaryHelperText | The secondary helper text to show below the field input at the end of the row. | |
| errorText | The error text to show below the field input. It replaces the helperText when visible. |
The Field component also accepts all the props of the FieldRoot primitive props
Parts
The FieldParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The FieldRoot component which is the Provider for the family. |
| Label | The FieldLabel component which displays the label and "required" notice. |
| Input | The FieldInput component which is the input field. |
| Textarea | The FieldTextarea component which is the textarea field. |
| HelperText | The FieldHelperText component which displays the helper text. |
| ErrorText | The FieldErrorText component which displays the error text. |
| StartIndicator | The StartIndicator component which displays an indicator of your choice at the start of the field. |
| StatusIndicator | The StatusIndicator component which displays an indicator of your choice at the end of the field. |
| RequiredIndicator | The RequiredIndicator component which displays an indicator of your choice when the field is marked required. |
On this page
Use Cases
- Users should be able to:
- Navigate to and activate a field with assistive technology
- Receive and understand supporting help and error messages
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screen-reader) will read the UI text followed by the component's role.
The accessibility label for a select field is typically the same as the label for the text field.
On this page