Input
Text fields let users enter text into a UI
- 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
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, Input,} from '@cerberus/react'Usage
The Input component displays a text-based input field.
With Icons
You can utilize the startIcon or endIcon props to add icons to the input.
Customizing
You can customize the input by passing styles directly into the component and is a re-export of the FieldInput primitive.
API
Props
The Input accepts the following props in addition to any native input props:
| Name | Default | Description |
|---|---|---|
| startIcon | An ElementType to display at the start of the input | |
| endIcon | An ElementType to display at the end of the input | |
| size | This size variant of the input |
The Input component also accepts any of the props from the FieldParts.Input primitive.
On this page
Use Cases
- Users should be able to:
- Navigate to and activate a text field with assistive technology
- Input information into the text field
- Receive and understand supporting text and error messages
- Navigate to and select interactive icons
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 screenreader) will read the UI text followed by the component's role.
The accessibility label for a textfield is typically the same as the label for the textfield.
On this page