Question 1

What is a Switch?

Accepted Answer

A Switch is a two-state control for a setting that takes effect at once, such as airplane mode, dark mode or notifications. The thumb slides along the track to show on or off. These examples use shadcn.io's Switch, available on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid. Screen readers announce it as a switch, on or off.

Question 2

Are these switch examples free?

Accepted Answer

Yes. Every switch example is free to use in personal and commercial projects. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Switch, Checkbox or Toggle: which one?

Accepted Answer

Use a Switch for a setting that applies at once and can be flipped back, such as dark mode. Use a Checkbox for a choice submitted later with a form, or for picking several items in a list. Use a Toggle for a pressed or unpressed button in a toolbar, such as bold or italic.

Question 4

Should a switch save right away?

Accepted Answer

Usually, yes: people expect a switch to act as soon as it moves, so a separate Save button works against it. For a setting that needs confirmation, such as one that costs money, ask in an Alert Dialog first, or use a Checkbox in a form with a Save button.

Question 5

How do I show a loading state while a toggle saves?

Accepted Answer

Keep a pending flag. While the request runs, disable the switch and show a small Spinner beside it. On success, keep the new state; on error, set the switch back and show a message next to it. Disabling it during the request stops a second toggle from racing the first.

Question 6

Where should the label go?

Accepted Answer

For settings rows, the label and an optional description go first and the switch goes at the end, as in the Switch with Description and Settings List examples. Put the Switch and a FieldLabel in a Field so that clicking the label toggles the switch and screen readers read it as the switch's name.

Question 7

How do I add icons to a switch?

Accepted Answer

Place icons beside it, as the theme and volume examples do: a sun and a moon, or a muted and a sounding speaker. Mark the icons aria-hidden and give the switch an aria-label, since the icons alone are not a name.

Question 8

How do I install a switch example?

Accepted Answer

Sign in, open an example and run the install command under its code. It adds the example to your project, with the Switch and any other components it uses if they aren't in your ui folder yet.

Question 9

How do I use a switch in a form?

Accepted Answer

Give the Switch a name: when on, it submits its value, which defaults to on, and when off it submits nothing. With a form library, bind its boolean value to the switch's checked state. The Form guides show this for each framework.

Question 10

How do I size or restyle the switch?

Accepted Answer

Use the size prop for the built-in sizes, default and sm. For other sizes or colors, edit the Switch file in your ui folder, where the track and thumb are plain Tailwind classes; the on and off styles use the data-checked and data-unchecked variants (data-selected with React Aria).

Question 11

Which libraries do switch examples depend on?

Accepted Answer

shadcn.io's Switch (on Base UI, React Aria, Ark UI or Radix UI for React, and on Ark UI for Vue, Svelte and Solid), Tailwind CSS, and Lucide icons in the examples with icons. The switch keeps its own state unless you control it, so no state library is needed.

Question 12

Are the switch examples accessible?

Accepted Answer

Yes. The Switch is announced as a switch with its on or off state. Tab moves focus to it, and Space or Enter toggles it. Examples without a visible label give the switch an aria-label, and labeled ones use a FieldLabel that toggles the switch when clicked.

Question 13

Can I use these switch examples with React Server Components?

Accepted Answer

The Switch is a client component, since it keeps state and handles input; render it from a Server Component like any client component. To save a setting on the server, call a Server Action from the switch's change handler.

Switch Examples

Feature Card

Switch in Item

Settings Card

Settings List

Icon with Label

Theme Toggle with Icons

Volume Toggle

Switch with Description

Switch with Label

Switch with On Label

Switch with State Labels

Square Switch

More component examples

Calendar

Checkbox

Combobox

Date Picker

Radio Group

Slider

Table

Tabs

Switch examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every switch example. One prompt away.