Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Checked Switch for Ark UI

A switch with no visible label that starts on. Its accessible name is Wi-Fi, and the demo shows no other control.

One switch is on screen and it starts on. There is no visible label. Its accessible name is Wi-Fi.

Use it when the setting should begin enabled, such as a connection that is already on. A later form submit fits a Checkbox. In React, Ark UI toggles it with Space and with Enter.

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

Anatomy

Switch anatomy: root, control, thumb, label

Usage

<Switch aria-label="Wi-Fi" defaultChecked />

FAQ

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 details.checked.

What do screen readers call this switch?

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

How do I stop people from toggling it?

Disable it. The switch then matches data-disabled, which fades it to half opacity and sets cursor-not-allowed. Pass disabled.

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.

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.

Which keys toggle the switch?

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

API Reference

Switch

Sets aria-label="Wi-Fi" and defaultChecked. The rest is on the Switch page.

All 19 switch examples