Textarea
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 Textarea
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, Textarea,} from '@cerberus/react'Usage
The Textarea component displays a textarea field.
Customizing
You can customize the textarea by passing styles directly into the component and is a re-export of the FieldTextarea primitive.
API
Props
The Textarea accepts the following props in addition to any native textarea props:
| Name | Default | Description |
|---|---|---|
| size | This size variant of the textarea |
The Textarea component also accepts any of the props from the FieldParts.Textarea 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