Dashral Pro is on the wayGet 30% off at launch

Dashral

Switch

A toggle for on/off settings.

$ pnpm dlx shadcn@latest add https://dashral.com/r/switch.json

Receive product news and offers.

Beside the label, like a checkbox.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/switch.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/switch

Usage

example.tsx
import { Switch } from "@/components/dashral/switch"

<Switch label="Email notifications" description="A summary every Monday." defaultChecked />

Examples

Colors

color sets the track when it's on.

Notification settings

Email and push per topic, saved as you go; pausing disables the rows and keeps what was picked.

Notifications

Choose what reaches you, and where.

Mute everything for now; your choices below are kept.

emailpush

Comments

Replies to you and on your tasks.

Mentions

When someone @mentions you.

Deploys

Builds that fail or reach production.

Weekly digest

A summary every Monday morning.

API reference

Switch

Also takes every prop of Radix Switch(opens in a new tab).

PropTypeDefault
checked / defaultCheckedboolean—
onCheckedChange(checked: boolean) => void—
labelReactNode

Beside the control; clicking it works the control.

—
descriptionReactNode

A hint under the label.

—
color"primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"

The color when on, ticked or picked.

"primary"
labelPosition"end" | "start"

"start" puts the label first and the switch at the far end, as in a settings row.

"end"
errorboolean | ReactNode

A message shows under the label.

—
classNames{ root, label, description, error, switch }

Classes for each part.

—

Keyboard

KeysAction
SpaceorEnterToggle

Accessibility

  • role="switch" with aria-checked; the change should take effect immediately.
  • Give it a label (or an aria-label); the description is linked through aria-describedby.

Motion

  • The thumb springs across (--ease-spring).