Toggle Switch
UI ComponentsA control that allows users to switch between two mutually exclusive states (on/off, yes/no, enabled/disabled) with immediate effect.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Toggle Switch coming soon.
How It Works in Apps/Websites
Toggle switches are binary controls that provide immediate feedback. Unlike checkboxes (which often require form submission), toggles typically apply changes instantly. The thumb slides from one side to the other, with color change indicating state. Common for settings, preferences, and feature flags.
How AI Interprets This Term
When you say 'toggle switch', AI expects: a pill-shaped track (40-50px wide, 20-24px tall), circular thumb that slides left/right. Off state: gray track, thumb on left. On state: colored track (often green/blue), thumb on right. May include on/off labels or icons.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a toggle switch for enabling dark mode
Design a settings toggle switch: 48x24px, off state (gray track #e5e5e5, white thumb), on state (blue track #3b82f6, white thumb). Include sun/moon icons inside track for dark mode toggle.
Show a toggle switch vs checkbox for the same 'Enable notifications' setting
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Binary settings (on/off)
- •Feature toggles
- •Preferences with immediate effect
- •Dark mode switches
When NOT to Use
- •When action requires confirmation
- •In forms that need submit button
- •For selecting from multiple options
Related Terms
Checkbox
A small square box that can be toggled between checked and unchecked states, used for selecting multiple options from a list or confirming a single choice.
Dark Mode
An alternative color scheme that uses dark backgrounds with light text, reducing eye strain in low-light conditions and often saving battery on OLED screens.