Toggle buttons are selection controls that allow users to activate or deactivate options.
Toggle button used in a table, on the backoffice
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Toggle |
While checkboxes are used to select, toggle buttons are used to activate or deactivate options |
Can be placed everywhere within the grid system. |
On click, the state toggles. |
|
Similar Components |
Usage |
Placement |
User action |
|
Used in forms to select one or more options within a given list of items. |
Same as above. |
Same as above. |
|
|
Radio buttons allow users to select one single option from a set. |
Same as above. |
Same as above. |
Anatomy
Structure
|
|
|
Input control |
Gives the possibility to the user to select the option. |
|
Label |
Indicates the name of the information asked the user. |
Sizes and Spaces
|
The distance between the input control and the label should be 8px.
Within a list, there should be a spacing of 16px between each toggle button. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Enabled |
true false |
--- |
|
State |
default disabled read-only |
--- |
Behaviour
Responsiveness
The text label adapts to the width of the container. When there is text wrap, the input control is centred vertically with the text.
Guidelines
⛔️ Don't
Don't use toggles when the user is selecting options. Use checkboxes instead.