Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Toggles are for immediate results
Toggle switches should implement changes instantly without requiring additional actions like clicking "Save" or "Submit."Â
When to use a toggle vs a checkbox
A toggle is used when there is activation (switching something on/off) involved - this activation should also be instantaneous.
If the selection does not provide immediate results, then a checkbox should be considered.
Do
Use checkboxes in case there is another action (in this case button) required for the change to take effect.
Don't
Avoid using toggles in cases where an additional button is required (for eg. forms) for the change to take effect.
Labels should remain the same
Our toggle component currently has only one label that describes the value that the user can change.
To avoid confusion, do not update the label upon change of the on or off states.
Do
Keep labels the same regardless of the toggle’s on/off state.
Don't
Avoid changing the labels or adding the words on and off to indicate the toggle’s state, as it might confuse users (especially the ones using assistive technology).
Related Components & Patterns