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.
Used for this
- To see or compare the results of a settings change
- To activate a mode (such as "dark mode") which takes immediate effect
Not for this
- 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
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Field, Hint, Label, Message, Toggle } from '@zendeskgarden/react-forms'
API
Field
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
id | string | – | Sets the field ID and the prefix for the generated label, input, and hint IDs |
Hint
Extends HTMLAttributes<HTMLDivElement>
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | – | Applies regular (non-bold) font weight |
Message
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | VALIDATION | – | Applies validation state styling |
Toggle
Extends InputHTMLAttributes<HTMLInputElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isCompact | boolean | – | Applies compact styling |