Switch

A switch allows users to instantly change between two states (on/off, enabled/disabled). It provides immediate visual feedback and is commonly used for settings, preferences, or features that can be activated or deactivated with a single interaction.

Type Component

Tier Global

Documentation Status Minimal

Last Edited 13.02.2026

Open in Figma View on GitHub

Usage

Switches are used for immediate, binary actions that take effect instantly without requiring a save or submit action. When a user toggles a switch, the change is applied immediately and the system responds in real-time. This instant feedback makes switches ideal for turning features on or off, enabling or disabling functionality, or changing modes where users expect to see immediate results. Unlike Checkboxes, which typically accumulate changes to be submitted as part of a form, switches represent independent actions that stand alone and update the system state immediately upon interaction.

Determining Checked vs Unchecked States

When deciding which option should correspond to the checked (right/blue) or unchecked (left/gray) state, follow these principles:

Checked state (right/blue) should represent:

• The active, enabled, or "on" state
• The more permissive or open option (e.g., "Public" over "Private")
• The enhanced or additional functionality (e.g., "Automatic" over "Manual")
• The state that adds features or capabilities
• The option that increases visibility, access, or activity

Unchecked state (left/gray) should represent:

• The inactive, disabled, or "off" state
• The more restrictive or closed option (e.g., "Private")
• The default or basic functionality (e.g., "Manual")
• The state that removes or limits features
• The option that decreases visibility, access, or activity

When in doubt, frame the switch label as an action or feature that can be enabled, making it clear that checked = activated. For example, instead of "Private/Public", use "Make profile public" where checked means public.

When to use

• For binary settings that take effect immediately (e.g., "Enable notifications", "Dark mode")
• When changes are independent of other form fields and don't require submission
• When the action is easily reversible with the same control

When not to use

• In forms that require a submit button to save changes
• For selecting multiple options from a list (use Checkbox instead)
• When the action requires additional confirmation or has significant consequences
• When the state change depends on other form validation
• If the change cannot be applied immediately due to system constraints
• For binary choices that are part of a larger form submission workflow