Toggle
A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
- To see or compare the results of a settings change
- To activate a mode (such as “dark mode”) which takes immediate effect
- To let users select from a list of settings, use Checkboxes instead
How to use it
Default
A Toggle’s label is part of its touch target.
Disabled
A disabled Toggle prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.
Hidden label
Toggle labels can be hidden.
Hint text
Use hint text for additional context.
Regular weight label
The label is bold by default. It can be made regular weight too.
Validation
Show success, warning, or danger validation messages with the Message component.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Toggle, Field } from '@zendeskgarden/react-forms'
API
The Toggle component follows this structure:
<Field><Toggle><Field.Label /><Field.Hint /><Field.Message /></Toggle></Field>
Field
A Field provides accessibility attributes to its child Toggle field by associating it with the corresponding Field.Label and Field.Hint.
Field.Hint
Extends HTMLAttributes<HTMLDivElement>
Nest the Hint within the Toggle component.
Field.Label
Extends LabelHTMLAttributes<HTMLLabelElement>
Nest the Label within the Toggle component.
| Prop name | Type | Default | Description |
|---|---|---|---|
hidden | boolean | Hides the label visually without hiding it from screen readers | |
isRegular | boolean | Applies regular (non-bold) font weight |
Field.Message
Extends HTMLAttributes<HTMLDivElement>
The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | 'success' | 'warning' | 'error' | Applies validation state styling | |
validationLabel | string | Defines the aria-label for the validation icon |
Toggle
Extends InputHTMLAttributes<HTMLInputElement>
Nest a Toggle within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
isCompact | boolean | Applies compact styling |