Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Switch examples · Square

Square Switch for React

A switch with square corners on its track and thumb.

Framework
UI library

The Switch with small radii instead of a pill, for interfaces with square buttons and inputs, such as editors and developer tools. Only classes change: the behavior, keyboard and states are the Switch's own.

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

How are the corners squared off?

The Switch sets rounded-sm for the track and **:data-[slot=switch-thumb]:rounded for the thumb. The thumb is the part with data-slot="switch-thumb", so the selector reaches it on every library.

How do I make every switch square?

Edit the Switch file in your ui folder: replace rounded-full on the track and the thumb there. Then you don't repeat the classes on each switch.

How do I control this switch in React?

Nothing in this file sets the on state, so the switch starts off and keeps its own state. To control it, keep the on or off state in your own state and pass it back. To start it on, use the default prop. The prop is defaultChecked. Pass checked; onCheckedChange receives the new boolean.

What do screen readers call this switch?

It has no visible label, so the demo passes aria-label (Enable feature). Change it to the setting the switch controls, or use a visible FieldLabel instead.

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.

Which keys toggle the switch?

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

All 19 switch examples