Switch

"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>
      {/* biome-ignore lint/a11y/noLabelWithoutControl: Label is visually associated with adjacent switch */}
      <label className={styles.label}>Enable notifications</label>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field/field";
import { Switch, SwitchThumb } from "@/components/ui/switch/switch";
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>
  );
}