Input
Text fields let users enter text into a UI
- Make sure text fields look interactive
- The text 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
- Text fields commonly appear in forms and dialogs
Examples
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Standard Input
Sizes
Responsive Layout
As layouts adapt to larger screens and different window sizes, apply flexible container dimensions to text fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.
Text 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
Invalid
Disabled
With Icon
Sizes
Customizing
API
export interface FieldProps { disabled?: boolean invalid?: boolean required?: boolean readOnly?: boolean}
define function Field(props: PropsWithChildren<FieldProps>): ReactNodeexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> { describedBy?: string id: string size?: 'sm' | 'md' | 'lg' startIcon?: ReactNode endIcon?: ReactNode}
define function Input(props: InputProps): ReactNodeProps
The InputProps component accepts the following props:
| Name | Default | Description |
|---|---|---|
| describedBy | The id attribute of the FieldMessage the Input is associated with. | |
| id | An identifier that is shared with the Label htmlFor attribute. | |
| size | lg | The size of the input field. |
| startIcon | An icon that appears at the start of the input field. | |
| endIcon | An icon that appears at the end of the input field when the state is valid. |
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