Ready

Toggle Switch

A toggle switch allows users to quickly switch between two opposing options. It behaves similarly to a physical switch, where a user clicks the switch to change its position.

Ready

Toggle Switch

A toggle switch allows users to quickly switch between two opposing options. It behaves similarly to a physical switch, where a user clicks the switch to change its position.

Variants

  1. Default

  2. Form field

States

  1. Default

  2. Hover

  3. Disabled

  4. Checked

Best Practices

1

When to use 

The toggle switch should be used to toggle a setting "on" or "off".²

Do

2

Don't use for actions

Toggle switches should not be used to trigger one-time actions. Buttons should be used instead.⁴

Don't

Content

1

Short

Always include a label. Keep labels clear and as short as possible.¹ The label should be a noun or noun phrase that describes the what the setting is.

Do

Don't

2

Verbs

If necessary, use a verb that clarifies what turning the setting on does. The verb should be as specific as possible, instead of something generic like “Turn on”.

3

Helper text

Help text can be used to provide additional information describing what the user is selecting. Keep this information as short as possible while still being descriptive--one phrase or short sentence.

Use a different component to capture longer text if an elaborate explanation is required.

Do

Don't

More

Related Pages

Additional Reading

© 2026 Basis Technologies
© 2026 Basis Technologies
© 2026 Basis Technologies