Skip to content
On this page

toggle 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.

Released under the MIT License.