Toggle
Toggle
Usage
A toggle is used to view or switch between enabled or disabled states. Toggle switch gives control over a feature or option that can be turned on or off.
State
On
Usage: The state that indicated toggle is being enable or turned on.Off
Usage: The state that indicated toggle is being disable or turned off.Muted On
Usage: The state that indicate toggle is being disabled in active condition or can be say that the toggle is being mandatory active.Muted Off
Usage: The state that indicate toggle is being disabled in inactive condition or can be say that the toggle is being mandatory inactive.Attributes
None
Usage: The toggle that doesn’t have any attributes is mainly used as default toggle. It can be used as general toggle because not bounded with a certain context.Text
Usage: The toggle that have a text attribute usualy used for certain context. Function of the text is to make the context of the toggle more clearer. The wording that usualy used is (on/off).Icon
Usage: The toggle that have icon atribute usualy has a certain context. Icon used as a substitute of text. The icon should resemble meaning of the context of toggle.Dark/Light
Usage: Dark/Light toggle basically is an icon toggle attributes. but it specially made for toggle that have a function to switch light mode to dark mode.Time
Usage: Toggle with time attributes have a specific function as a switcher am / pm.Pattern Rule
Best Practice
- Let people know what happens when the toggle is switched by using a tooltip.
- Toggles should never require users to press a button to apply the settings.
Do
- Use toggles when your intent is to turn something on or off instantly.
- Use for any feature or option that can be turned on or off.
- If a physical switch would work for the action, the toggle is probably the best component to use.
- Use for making it possible to choose one or more options from a limited number of options.
Don’t
- Toggles should never require users to click a button to apply or save the setting.
- Avoid using when you have more than 10 options to choose from.
- Don’t change the selection of another toggle when another one is clicked. Only exception is when a toggle is used to make a bulk selection of multiple items.