Switch
Switches allow users to toggle between two states, off and on.
Import
import { Switch } from "@cfa/react-core";Live Editor
Guidelines
When to use
- Switch is for an on/off option that takes effect immediately.
Do
- Phrase labels as switchable nouns, such as
Email notifications, not as verbs. - Add a description when the label alone cannot provide enough context.
- In switch groups, prefer a vertical layout for easier reading.
Avoid
- Using Switch for an opt-in choice submitted with a form. Use Checkbox.
- Using Switch where the action needs confirmation. Use Button with a confirmation Modal.
Examples
Description
Use the description prop to add a description to the switch. The description will be displayed below the switch.
Invalid
The isInvalid prop applies an error outline to the switch.
Error Message
Use errorMessage with isInvalid to display validation text below the switch.
AutoFocus
Use the autoFocus prop to automatically focus the switch when it is mounted.
Readonly
The isReadOnly prop makes the switch read-only, preventing user interaction.
Disabled
The isDisabled prop disables the switch, preventing user interaction.
Default Selected
Use the defaultSelected prop to set the initial state of the switch. The switch will be checked by default.
Controlled
To use the Switch in a controlled state, you can use the combination of isSelected which is a boolean and onChange which accepts a function.
Label Position
The labelPosition prop allows you to change the position of the label. The default is right.
Native HTML Forms
The Switch component can be used in native HTML forms. The name prop is required for the switch to be submitted with the form.