Skip to content

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

Free

Switch with Description for Ark UI

Push Notifications, the line Receive notifications on your device, and a switch that starts off.

A row shows the label Push Notifications, the description Receive notifications on your device, and a switch that starts off. Clicking the label toggles the switch.

Add the description when the label alone does not say what the setting does. A choice saved on submit fits a Checkbox. In React, Ark UI toggles when that label is clicked.

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

<Field className="max-w-sm" orientation="horizontal">
  <FieldContent>
    <FieldLabel>Push Notifications</FieldLabel>
    <FieldDescription>Receive notifications on your device</FieldDescription>
  </FieldContent>
  <Switch />
</Field>

FAQ

How are the label, the description and the switch arranged?

A horizontal Field holds a FieldContent, with the FieldLabel and the FieldDescription, and then the Switch. max-w-sm keeps the row from stretching.

Is the description tied to the switch?

The label is: clicking Push Notifications toggles the switch, and screen readers read it as the switch's name. The Field links the label to the switch, so this file sets no ids.

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

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.

Which keys toggle the switch?

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

API Reference

Field

Sets orientation="horizontal". The rest is on the Field page.

Switch

No extra props in this demo. The rest is on the Switch page.

All 19 switch examples