A control used to switch between two states: often on or off.
Component
Toggle
Other names: Switch, Lightswitch, Toggle button
45 examples
Toggle
A11Y Style Guide
- jQuery
- Code examples
- Usage guidelines
- Accessibility
Switch
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
Toggle
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
- Open source
Switch
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Toggle
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Code examples
- Usage guidelines
- Open source
Switch
Chakra UI
- React
- CSS-in-JS
- Accessibility
- Code examples
- Open source
Toggle switches
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Switch
Coral
Talend
- React
- Code examples
- Tone of voice
Toggle
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Toggle
Decathlon Design System
- CSS
- React
- Svelte
- Vue
- Web Components
- Usage guidelines
- Code examples
- Accessibility
- Open source
Toggle
Duet Design System
LocalTapiola
- Angular
- Vue
- React
- Code examples
Switch
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Toggle switch
Edison Design System
General Electric
- Web Components
- Usage guidelines
- Code examples
Toggle
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Switch
Evergreen
Segment
- React
- Open source
Toggle
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
Switch
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Switch
generic-components
- Web Components
- Code examples
- Accessibility
- Open source
Switch
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
Switch
Goldman Sachs Design System
- Tone of voice
- Usage guidelines
Switch
GroupUI
Volkswagen Group
- Web Components
- Code examples
- Usage guidelines
Switch (toggle)
Headless UI
Tailwind Labs
- React
- Vue
- Code examples
- Accessibility
- Open source
Toggle button
Inclusive Components
- Code examples
- Accessibility
Toggle
Jøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
Checkbox Toggle
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Switch
Luna
Sainsbury’s
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Switch
Mailchimp design system
- Code examples
Toggle Switch
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Switch
NextUI
- React
- CSS-in-JS
- Code examples
- Open source
Toggle
Oxygen
Repsol
- HTML
- Code examples
- Usage guidelines
Setting toggle
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Toggle
Quasar Framework
- Vue
- Accessibility issues
- Code examples
Switch
Radix Primitives
Modulz
- React
- Code examples
- Open source
Switch
Ruter Components
- React
- Code examples
Slide toggle
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Open source
- Usage guidelines
Switch
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Slide Toggle
Seek style guide
- React
- Code examples
Switch
Shoelace
- Web Components
- Code examples
- Open source
Toggle
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
Switch
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Toggle
uStyle
uSwitch
- Sass
- Tone of voice
- Code examples
- Usage guidelines
- Open source
Toggle
Vercel Design
- React
- Code examples
Switch
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
