Overview

Key Features

• Label Placement: Supports label placement before or after the toggle.
• Accessibility: Fully keyboard and screen-reader accessible.

Anatomy

1. Toggle:
   An interactive switch that allows users to enable or disable a setting.
2. Label:
   Text that clearly describes the function of the toggle.
3. Description text (optional):
   Additional context or instructions about what the toggle controls.

Component States

A toggle has two component states: On, where the condition is enabled, and Off, where it is disabled. These states determine whether a setting or feature is applied.

Label Placement

The label can be placed before or after the toggle, allowing for flexible positioning.

Look and Feel

States

States define how the component behaves and appears in different interactions:

• Default: The standard appearance when inactive
• Hover: Highlights the field when the user hovers over it
• Focus: Indicates active input with a visible focus indicator.
• Disabled: Prevents interaction and input, appearing visually subdued.
• Read-only: Displays content without allowing edits while maintaining a standard appearance.

Best Practice

Do:

• Use a toggle for immediate, binary actions that take effect instantly without confirmation
• Do position the label to the left of the toggle to ensure users read and understand the option before interacting, reducing cognitive load and preventing accidental toggles.
• Use a clear, concise label that describes the toggle’s function, such as “Enable Notifications”.
• Provide an optional description text if additional context is needed, such as explaining the impact of the toggle, for example, “You will receive email updates for new messages”.
• Use a default state that aligns with user expectations. Opt-in settings should be off by default.

Don’t:

• Use a toggle for actions that require confirmation or saving, as users expect toggle changes to apply immediately.
• Place the toggle far from its label, which creates ambiguity about what the toggle controls and weakens the label-component association.

Examples

Links

The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.