Search…
Search…
Switch
Live in Codebase
Use a switch to let people choose between two opposing values, especially when the action has an immediate effect. Provide clear context or labels when needed. Because a switch carries more visual weight than a checkbox, reserve it for significant functionality and avoid using it for minor settings.
AA
WCAG 2.1 accessibility compliant
Switch
Live in Codebase
Use a switch to let people choose between two opposing values, especially when the action has an immediate effect. Provide clear context or labels when needed. Because a switch carries more visual weight than a checkbox, reserve it for significant functionality and avoid using it for minor settings.
AA
WCAG 2.1 accessibility compliant
Switch
Use a switch to let people choose between two opposing values, especially when the action has an immediate effect. Provide clear context or labels when needed. Because a switch carries more visual weight than a checkbox, reserve it for significant functionality and avoid using it for minor settings.
Figma Designs
Figma Designs
Figma Designs
Use a switch to toggle a single item on or off when it takes immediate effect. Don't use a switch to select a single item from a list of options.
When to use | When not to use |
|---|---|
✅ Do use a segmented control instead of a switch when the options are not binary (yes/no). | ⛔️ Don't use a switch if the options aren't Yes/No, On/Off. |
States
Anatomy
Breaks down the structural elements of a switch, including the switch component and the label (main text).
Element | Description |
|---|---|
| Switch component |
| Text |
Spacing
Switch components use minimal spacing for compact form integration, with platform-specific dimensions optimized for their respective interaction patterns.
Web: 24px × 44px (height × width) - Compact size for dense layouts |
Native: 32px × 60px (height × width) - Larger touch targets for mobile |
No external padding applied - spacing handled by parent components |
Internal thumb positioning animated smoothly between states |
Use a switch to toggle a single item on or off when it takes immediate effect. Don't use a switch to select a single item from a list of options.
When to use | When not to use |
|---|---|
✅ Do use a segmented control instead of a switch when the options are not binary (yes/no). | ⛔️ Don't use a switch if the options aren't Yes/No, On/Off. |
States
Anatomy
Breaks down the structural elements of a switch, including the switch component and the label (main text).
Element | Description |
|---|---|
| Switch component |
| Text |
Spacing
Switch components use minimal spacing for compact form integration, with platform-specific dimensions optimized for their respective interaction patterns.
Web: 24px × 44px (height × width) - Compact size for dense layouts |
Native: 32px × 60px (height × width) - Larger touch targets for mobile |
No external padding applied - spacing handled by parent components |
Internal thumb positioning animated smoothly between states |
Use a switch to toggle a single item on or off when it takes immediate effect. Don't use a switch to select a single item from a list of options.
When to use | When not to use |
|---|---|
✅ Do use a segmented control instead of a switch when the options are not binary (yes/no). | ⛔️ Don't use a switch if the options aren't Yes/No, On/Off. |
States
Anatomy
Breaks down the structural elements of a switch, including the switch component and the label (main text).
Element | Description |
|---|---|
| Switch component |
| Text |
Spacing
Switch components use minimal spacing for compact form integration, with platform-specific dimensions optimized for their respective interaction patterns.
Web: 24px × 44px (height × width) - Compact size for dense layouts |
Native: 32px × 60px (height × width) - Larger touch targets for mobile |
No external padding applied - spacing handled by parent components |
Internal thumb positioning animated smoothly between states |
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.