Label
Labels describe the purpose of a form element in a UI
- Labels should be used to describe the input
- Labels should display (required) if the input is not optional
- Two types: standard, hidden
- Two sizes: small, medium
- Hidden labels should be used when the label is not visible to the user
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Standard Labels
Standard labels are used for most input use cases.
Hidden Labels
Hidden labels are used when the label is not visible to the user, but still needs to be present for screen readers.
Required Labels
Required labels are used when the input is required.
Placement
Labels should be placed above the input field. For checkboxes and radio buttons, the label should be placed to the right of the input.
On this page
import { Field, Label } from '@cerberus/react'Usage
Hidden
Optional
Customizing
API
export interface FieldProps { disabled?: boolean invalid?: boolean required?: boolean readOnly?: boolean}
define function Field(props: PropsWithChildren<FieldProps>): ReactNodeexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> { htmlFor: string hidden?: boolean size?: 'sm' | 'md'}
define function Label(props: LabelProps): ReactNodeProps
The LabelProps component accepts the following props:
| Name | Default | Description |
|---|---|---|
| htmlFor | null | The name attribute of the Input the Label is associated with. |
| hidden | false | Whether the Label content should be visually hidden. |
| size | 'md' | The size of the Label. |
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
Interaction & Style
The containers for both filled and outlined text fields provide the same functionality. Changes to color and thickness of stroke help provide clear visual cues for interaction.
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