Switch

Installation

$npx litefy@latest add switch
$pnpm dlx litefy@latest add switch
$yarn dlx litefy@latest add switch
$bun --bun litefy@latest add switch

Usage

A simple toggle switch with default checked state.

Enable notificationsEnable dark mode

import { Switch } from "@/ui";

export default function SwitchBasicDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Switch defaultChecked>Enable notifications</Switch>
      <Switch>Enable dark mode</Switch>
    </div>
  );
}

Disabled

Shows the switch in a disabled state.

Disabled

import { Switch } from "@/ui";

export default function SwitchDisabledDemo() {
  return <Switch disabled>Disabled</Switch>;
}

Custom

Assemble a switch with custom size and colors using the composable components.

Large switch

"use client";

import { useState } from "react";
import { SwitchLabel, SwitchRoot, SwitchThumb, SwitchTrack } from "@/ui";

export default function Demo() {
  const [checked, setChecked] = useState(false);
  return (
    <SwitchLabel>
      <SwitchTrack
        checked={checked}
        className="w-14 h-7 bg-muted data-checked:bg-primary-accent"
      >
        <SwitchRoot
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
        />
        <SwitchThumb
          checked={checked}
          className="w-6 h-6 data-checked:translate-x-7"
        />
      </SwitchTrack>
      <span className="text-sm font-medium">Large switch</span>
    </SwitchLabel>
  );
}

API Reference

High-level Components

Ready-to-use composite component.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Label content rendered next to the switch
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Default checked state for uncontrolled mode
`onCheckedChange`	`(checked: boolean) => void`	-	Callback triggered when the checked state changes
`classNames`	`{ label?, track?, thumb?: ClassNameValue }`	-	Custom classes for the label, track and thumb
`styles`	`{ label?, track?, thumb?: React.CSSProperties }`	-	Inline styles for the label, track and thumb
`disabled`	`boolean`	`false`	Disable the switch
`...props`	`React.ComponentProps<"input">`	-	Supports all native input props (except `type`, `className`), such as `name`, `value`, `required`

Composable Components

SwitchRoot

The visually hidden native checkbox input (sr-only) that carries state, focus and form semantics.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"input">`	-	Supports all native input props (except `type`, `className`)

SwitchTrack

The visual track rendered as a span with data-checked styling and a has-focus-visible focus ring.

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Drives the `data-checked` attribute and styles
`className`	`ClassNameValue`	-	Custom CSS class
`children`	`React.ReactNode`	-	Track content, typically `SwitchRoot` and `SwitchThumb`
`...props`	`React.ComponentProps<"span">`	-	Supports all native span props

SwitchThumb

The visual thumb rendered as a span that slides via data-checked styling.

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Drives the `data-checked` translate
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"span">`	-	Supports all native span props

SwitchLabel

The label wrapper that associates the input with the track and text.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"label">`	-	Supports all native label props

Switch

On this page