Switches
A Switch is a component that allows to control a
single item, changing its status to on or off.
Use Case
- Whenever an options or a set of options can be turned on or off individually.
Without Label
Labeled
HTML
Do's & Dont's
Labeling and Captioning
Even when this component can be used without any label, it is
advised to label it properly indicating the setting that is related
to.
As most of the cases, trying to be contextual and concise is reccomended.
As most of the cases, trying to be contextual and concise is reccomended.
Grouping similar behaviors
This component can be used on a single item whenever when the screen
content requires it. However, if there are two or more switch items
on the same screen, it is advised to group them whenever their
content is relevant to each other.
Choosing the right component
Be mindful that, just as in other scenarios, there are cases in
which alternative components can be used depending on business
needs. Just remember that alternative components for this one must
reflect only two options (coherent with the on/off behavior), for
which components able to list more than two options must be
dismissed.
Alternative and Related components
