A control used to switch between two states: often on or off.
Component
Toggle
Other names: Switch, Lightswitch, Toggle button
58 examples
Toggle
A11Y Style Guide
- jQuery
- Code examples
- Usage guidelines
- Accessibility
- Unmaintained
- Open source
Switch
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Toggle
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
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
- Web Components
- Code examples
- Usage guidelines
- Open source
Switch
Cedar
Recreational Equipment, Inc.
- Vue
- Sass
- CSS Modules
- Usage guidelines
- Code examples
- Open source
Switch
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
Toggle Switch
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
ToggleSwitch
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
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
Switch
eBay Playbook
- HTML
- React
- Code examples
Toggle
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Switch
Evergreen
Segment
- React
- Open source
Toggle
Flowbite
- Tailwind CSS
- Open source
- Code examples
Toggle
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
- Open source
Switch
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Toggle
Geist Design System
Vercel
- React
- Code examples
Switch
generic-components
- Web Components
- Code examples
- Accessibility
- Open source
Switch
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
Toggle Switch
giffgaff design system
- Usage guidelines
- Code examples
Switch
Headless UI
Tailwind Labs
- React
- Vue
- Code examples
- Accessibility
- Open source
Toggle
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Toggle button
Inclusive Components
- Code examples
- Accessibility
- Unmaintained
Toggle
Jøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
- Open source
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
Switch
Material Design
Google
- Mobile
- Web Components
- Sass
- Usage guidelines
- Open source
- Accessibility
Toggle Switch
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Switch
Morningstar Design System
- Vue
- Usage guidelines
Toggle
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Switch
NextUI
- React
- CSS-in-JS
- Code examples
- Open source
Toggle
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Toggle
Oxygen
Repsol
- HTML
- Code examples
- Usage guidelines
Toggle
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Switch
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Switch
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Toggle switch
Primer
GitHub
- React
- Code examples
- Open source
Toggle
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Switch
Radix Primitives
WorkOS
- React
- Code examples
- Open source
Switch
Ruter Components
- React
- Code examples
- Unmaintained
Slide toggle
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Usage guidelines
Switch
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Slide Toggle
Seek style guide
- React
- Code examples
- Unmaintained
Switch
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Switch
Shoelace
- Web Components
- Code examples
- Open source
Toggle
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
- Unmaintained
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
- Unmaintained
Switch
Wise Design
- Mobile
- Usage guidelines
- Tone of voice