Toggle
Contents
What is a Toggle?
A Toggle is a useful tool for when you require an instant response or to turn different settings on/off.
When, and why?
A Toggle is useful for when you want to switch something on or off in a given context. For example, in Clear Review, we use a Toggle to turn on 'Giving Feedback anonymously' when a user is giving Feedback.
Toggle types
The following Toggle types are available:
| Type | Description |
|---|---|
| Default | The default Toggle is a standard looking Toggle that is grey when toggled 'off' and blue when toggled 'on'. It has an optional label to the right hand side |
| As choice button | The same as the default Toggle but contained within a selectable button to give more emphasis. It also contains a title and subtitle to provide more descriptive labelling |
Using a Toggle
Toggle labels
Labels should be on the right-hand side of the Toggle. They should also be in sentence case and both the Toggle and the label should be contained within the same columns.
Toggle placement
Toggles should not be used for yes or no responses - they should only be used for turning things on or off. If you want a yes or no response, you should consider something like a Select or Radio button
Contents
Uh-oh! Looks like we haven't finished building this page yet.
Come back soon, and we'll have more exciting content to share.
Contents
Uh-oh! Looks like we haven't finished building this page yet.
Come back soon, and we'll have more exciting content to share.
| Design | Documentation | HTML/CSS | Web Component |
|---|---|---|---|