Skip to content

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

Free

Square Switch with Text for Ark UI

A wide square switch that starts on, with On on the track in capitals. Off shows when it is turned off.

A wide switch starts on, with square corners and the word On visible on the track. Off takes that place when the switch is off. Its accessible name is Labeled switch, not On.

Use the words when on and off must be unmistakable, such as power or a live mode. Rename the accessible name to the real setting. A form field can be a Checkbox instead. In React, Ark UI reports the new value, and this demo stores it.

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

<div className="relative inline-grid h-9 grid-cols-[1fr_1fr] items-center font-medium text-sm">
  <Switch
    aria-label="Labeled switch"
    checked={checked}
    className="peer absolute inset-0 h-[inherit] w-auto rounded-md data-unchecked:bg-input/50 **:data-[slot=switch-thumb]:data-checked:translate-x-full **:data-[slot=switch-thumb]:z-10 **:data-[slot=switch-thumb]:h-full **:data-[slot=switch-thumb]:w-1/2 **:data-[slot=switch-thumb]:rounded-sm **:data-[slot=switch-thumb]:duration-300 **:data-[slot=switch-thumb]:ease-[cubic-bezier(0.16,1,0.3,1)] **:data-[slot=switch-thumb]:data-checked:rtl:-translate-x-full"
    onCheckedChange={handleCheckedChange}
  />
  <span className="pointer-events-none relative ms-0.5 flex translate-x-full items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-checked:invisible peer-data-checked:translate-x-0 rtl:-translate-x-full">
    <span className="font-medium text-[10px] uppercase">Off</span>
  </span>
  <span className="pointer-events-none invisible relative me-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-checked:visible peer-data-checked:-translate-x-full peer-data-checked:text-primary-foreground peer-data-checked:rtl:translate-x-full">
    <span className="font-medium text-[10px] uppercase">On</span>
  </span>
</div>

FAQ

How is the On and Off switch laid out?

A two-column grid with h-9 and grid-cols-[1fr_1fr] holds the Off and On words. The Switch is peer absolute inset-0 with h-[inherit] w-auto rounded-md, so it covers both columns, and its thumb is h-full w-1/2.

What moves the thumb and the words?

When the switch is on, the thumb moves with translate-x-full, over 300ms with a custom easing. The words are siblings after the switch, so peer- classes show On and hide Off when it is on, and rtl: classes slide the other way. The state classes use data-checked and data-unchecked.

Is there a text name for this switch?

The visible On and Off words describe the state, not the setting, so the demo passes aria-label (Labeled switch). Change it to the setting the switch controls.

How do I control this switch in React?

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

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="Labeled switch", checked={checked} and onCheckedChange={handleCheckedChange}. The rest is on the Switch page.

All 19 switch examples