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

onoff

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

1 0

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

PMAM

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.