The toggle/switch is meant to resemble a physical switch and allow a user to turn a setting “on” or “off”. It should be used to switch between two states/modes: active or inactive.
It is recommended to always display the toggle with a label above it as well as the label of the selected state. For example, the label above would be Active, the toggle state would be “on” and the selected state label displayed to the right of the toggle would be “Yes”.
Toggle with Label on top
To clarify the meaning of the toggle, use a label above it (ex. Live).
Toggle with label on the side
When the value of the toggle requires translation, it is suggested to display the text value (ex. On/Off) outside and to the right of of the toggle to allow for longer translations. (ex. French translation of “On” is “Allumez”)
To clarify the current state, display the text value to the right of the toggle (ex. On or Off).
Note: Use a checkbox instead:
If it is not clear if the control is showing a state or action.
If there are more than two options.
fd-toggle--semantic modifier renders semnatic colors and icons inside the toggle switch
fd-toggle--compact modifier can be used to render the compact size of the toggle
Other Size Options
In addition to default and --compact, the toggle can be set to 3 sizes: --xs, --s and --l. When used with forms, it is recommended to use the small size so that form components will be consistent.
Node: --semantic modifier is currently not supported by these optional sizes
The toggle can be set to the disable state and still indicate the state of the toggle. To do this, add the disabled parameter to the input element.