Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Switch examples · Square

Square Theme Toggle Switch for React

A compact square switch between a moon and a sun icon.

Framework
UI library

A square Switch with a moon before it and a sun after it, for a light and dark toggle in a header or a settings row. The demo keeps the on or off state; connect it to your own theme code to change the page.

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

Which icons sit beside the switch?

MoonIcon comes first with size-4 text-muted-foreground, then the Switch, then SunIcon with size-4. Both are decorative, with aria-hidden, in an inline-flex items-center gap-2 row.

How is this switch sized and squared?

The Switch sets h-5 w-9 rounded-sm for the track, and **:data-[slot=switch-thumb]:size-4 and **:data-[slot=switch-thumb]:rounded for the thumb.

Does it change the theme?

No. It only holds the state, starting off. Set the theme from the change handler, and start the switch from the current theme so it matches on load. The switch has aria-label (Light mode), since the icons are hidden from screen readers.

How do I control this switch in React?

This file keeps the state itself, starting off, and passes it back to the Switch. Pass checked; onCheckedChange receives the new boolean.

Does this switch submit with a form?

Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing. With Base UI, uncheckedValue sets what it submits when off.

Which keys toggle the switch?

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

All 19 switch examples