Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

Toggle Switch - Component

Hidden label
View full screen
Code

Source (Nunjucks)

<label class="toggle-switch" for="{{ data.inputId }}">
<span class="toggle-switch__label {{ 'visually-hidden' if data.hiddenLabel }}">{{ data.label }}</span>
<input type="checkbox" role="switch" class="toggle-switch__input" id="{{ data.inputId }}" />
<div class="toggle-switch__decor focus-ring" aria-hidden="true">
<div class="toggle-switch__thumb"></div>
</div>
</label>

Output

<label class="toggle-switch" for="toggle-switch">
<span class="toggle-switch__label">Dark theme</span>
<input
type="checkbox"
role="switch"
class="toggle-switch__input"
id="toggle-switch"
/>

<div class="toggle-switch__decor focus-ring" aria-hidden="true">
<div class="toggle-switch__thumb"></div>
</div>
</label>

Information

The toggle switch extends a standard checkbox by adding a switch role and switch-like decorative styling.

It's really important that the input (toggle-switch__input) sits before the decor (toggle-switch__decor) because the Sass block uses [next sibling combinator selectors] (/learn/css/selectors/#next-sibling-combinator) to create visual state changes.

You can visually hide the text label with the visually-hidden utility, but this pattern must contain one for accessibility purposes.

Key links

  • Sass File

Variants

Hidden label

View full screen
Code

Source (Nunjucks)

<label class="toggle-switch" for="{{ data.inputId }}">
<span class="toggle-switch__label {{ 'visually-hidden' if data.hiddenLabel }}">{{ data.label }}</span>
<input type="checkbox" role="switch" class="toggle-switch__input" id="{{ data.inputId }}" />
<div class="toggle-switch__decor focus-ring" aria-hidden="true">
<div class="toggle-switch__thumb"></div>
</div>
</label>

Output

<label class="toggle-switch" for="toggle-switch">
<span class="toggle-switch__label visually-hidden">Dark theme</span>
<input
type="checkbox"
role="switch"
class="toggle-switch__input"
id="toggle-switch"
/>

<div class="toggle-switch__decor focus-ring" aria-hidden="true">
<div class="toggle-switch__thumb"></div>
</div>
</label>

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.