Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Switch examples · Icons

Volume Toggle Switch for React

A switch between a muted and a volume icon, starting on.

Framework
UI library

A Switch between a muted speaker and a speaker with sound, starting on. Use it for sound effects, notification sounds or a media player's mute, where the icons say what the switch does.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What do the two icons show?

VolumeXIcon, a muted speaker, comes before the switch with size-4 text-muted-foreground. Volume2Icon comes after it with size-4. Both have aria-hidden, and the row is flex items-center gap-2.

What do screen readers call this switch?

The icons are hidden from screen readers, so the switch has aria-label (Sound). On means sound plays.

How do I control this switch in React?

The switch starts on through its default prop, which only sets the starting state; after that it keeps its own state. To control it, keep the on or off state in your own state and pass it back. The prop is defaultChecked. Pass checked; onCheckedChange receives the new boolean.

How do I add a visible label to this switch?

Put the Switch in a horizontal Field next to a FieldLabel. Clicking the label toggles the switch, and screen readers read the label with it. Give the Switch an id and set the same value as htmlFor on the FieldLabel.

How do I make this switch smaller?

Set size="sm". The default size is default. For a different track or thumb, edit those classes in the Switch file in your ui folder.

Which keys toggle the switch?

Tab moves focus to the switch. Space toggles it, and so does Enter.

All 19 switch examples