Component

Toggle

Also known as: Switch, Lightswitch, Toggle button

A control used to switch between two states: often on or off.

55 Examples

Filter:

  • Toggle

    A11Y Style Guide

    Tech

    • jQuery

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Unmaintained
    • Open source

  • Switch

    Ant Design

    Tech

    • React

    Features

    • Code examples
    • Accessibility issues
    • Open source

  • Toggle

    Atlassian Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Accessibility

  • Switch

    Backpack

    Tech

    • Mobile
    • React

    Features

    • Code examples
    • Usage guidelines
    • Open source
    • Tone of voice

  • Switch card

    Blueprint

    Tech

    • React
    • Sass

    Features

    • Open source

  • Switch

    Blueprint

    Tech

    • React
    • Sass

    Features

    • Open source

  • Toggle

    Carbon Design System

    Tech

    • React
    • Vanilla JS
    • Angular
    • Vue
    • Svelte
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Switch

    Cedar

    Tech

    • Vue
    • Sass
    • CSS Modules

    Features

    • Usage guidelines
    • Code examples
    • Open source

  • Switch

    Chakra UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Toggle Switch

    Clarity Design System

    Tech

    • CSS
    • Angular
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • ToggleSwitch

    Coral

    Tech

    • React

    Features

    • Code examples
    • Tone of voice
    • Open source

  • Toggle

    Crayons

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Toggle

    Decathlon Design System

    Tech

    • CSS
    • React
    • Svelte
    • Vue
    • Web Components

    Features

    • Usage guidelines
    • Code examples
    • Accessibility
    • Open source

  • Toggle

    Duet Design System

    Tech

    • Angular
    • Vue
    • React

    Features

    • Code examples

  • Switch

    eBay MIND Patterns

  • Switch

    eBay Playbook

    Tech

    • HTML
    • React

    Features

    • Code examples

  • Toggle

    Elisa Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Code examples
    • Accessibility

  • Switch

    Evergreen

    Tech

    • React

    Features

    • Open source

  • Toggle

    Flowbite

    Tech

    • Tailwind CSS

    Features

    • Open source
    • Code examples

  • Toggle

    Fluent UI

    Tech

    • React
    • Web Components
    • Mobile

    Features

    • Usage guidelines
    • Code examples
    • Accessibility
    • Open source

  • Switch

    Forma 36

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Toggle

    Geist Design System

    Tech

    • React

    Features

    • Code examples

  • Switch

    generic-components

    Tech

    • Web Components

    Features

    • Code examples
    • Accessibility
    • Open source

  • Switch

    Gestalt

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Open source
    • Usage guidelines

  • Toggle Switch

    giffgaff design system

  • Switch

    Headless UI

    Tech

    • React
    • Vue

    Features

    • Code examples
    • Accessibility
    • Open source

  • Toggle

    Helios

    Tech

    • Ember
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Switch

    HeroUI

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Toggle button

    Inclusive Components

  • Toggle

    Jøkul Designsystem

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Checkbox Toggle

    Lightning Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Switch

    Luna

    Tech

    • React
    • Sass

    Features

    • Usage guidelines
    • Code examples
    • Tone of voice

  • Switch

    Material Design

    Tech

    • Mobile
    • Web Components
    • Sass

    Features

    • Usage guidelines
    • Open source
    • Accessibility

  • Toggle

    Momentum Design

    Tech

    • React
    • Web Components

    Features

    • Usage guidelines
    • Open source

  • Switch

    Morningstar Product System

    Tech

    • Vue

    Features

    • Usage guidelines

  • Toggle

    Nessie

    Tech

    • Web Components
    • Tailwind CSS

    Features

    • Usage guidelines
    • Code examples

  • Switch

    NewsKit

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Toggle

    Nord Design System

    Tech

    • Web Components

    Features

    • Code examples
    • Usage guidelines

  • Toggle

    Pajamas

    Tech

    • Vue

    Features

    • Usage guidelines
    • Code examples
    • Open source

  • Switch

    PatternFly

    Tech

    • React
    • Sass

    Features

    • Tone of voice
    • Open source
    • Usage guidelines

  • Switch

    Porsche Design System

    Tech

    • Web Components
    • Angular
    • React
    • Vue

    Features

    • Code examples
    • Open source

  • Toggle switch

    Primer

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Toggle

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Switch

    Radix Primitives

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Switch

    Red Hat design system

    Tech

    • Web Components

    Features

    • Code examples
    • Usage guidelines

  • Switch

    Ruter Components

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Slide toggle

    SEB Design Library

    Tech

    • Sass
    • React
    • Angular

    Features

    • Code examples
    • Usage guidelines

  • Switch

    Seeds

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice

  • Slide Toggle

    Seek style guide

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Switch

    shadcn/ui

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Switch

    Shoelace

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Switch

    Spectrum

    Tech

    • CSS
    • Web Components
    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Toggle

    uStyle

    Tech

    • Sass

    Features

    • Tone of voice
    • Code examples
    • Usage guidelines
    • Open source
    • Unmaintained

  • Switch

    Visa Product Design System

    Tech

    • Angular
    • React
    • CSS
    • Mobile

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Switch

    Wise Design

    Tech

    • Mobile

    Features

    • Usage guidelines
    • Tone of voice

Related components

  • Checkbox

    An input for choosing from predefined options:

    • when used alone, it gives a binary choice (checked/unchecked);
    • in a group it allows the user to select multiple values from a list of options.

Resources

Name distribution