Switch

A component to toggle states.

Enable notifications

"use client";

import { useState } from "react";
import { Switch, SwitchThumb } from "@/components/ui/switch/switch";
import styles from "./switch-demo.module.css";

export default function SwitchDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className={styles.container}>
      <Switch checked={checked} onCheckedChange={setChecked}>
        <SwitchThumb />
      </Switch>
      <label className={styles.label}>Enable notifications</label>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/switch.json

Anatomy

anatomy

import {
Switch,
SwitchThumb,
} from '../ui/switch'

<Switch>
  <SwitchThumb />
</Switch>

Examples

With Field and Label

"use client";

import { useState } from "react";
import { Switch, SwitchThumb } from "@/components/ui/switch/switch";
import { Field, FieldLabel, FieldDescription } from "@/components/ui/field/field";
import styles from "./switch-with-label.module.css";

export default function SwitchWithLabel() {
  const [subscribeNewsletter, setSubscribeNewsletter] = useState(false);

  return (
    <form className={styles.form}>
      <Field>
        <FieldLabel>
          <Switch checked={subscribeNewsletter} onCheckedChange={setSubscribeNewsletter}>
            <SwitchThumb />
          </Switch>
          <span className={styles.labelText}>Subscribe to newsletter</span>
        </FieldLabel>
        <FieldDescription>Get the latest updates and announcements delivered to your inbox</FieldDescription>
      </Field>
    </form>
  );
}