Neumorphism UI

Switch

通常は変更がすぐ反映される、オン・オフの設定に使います。

プレビュー

ライブ・任意・固定の設定

制御されたライブ価格とメール通知を切り替え、管理者が固定した無効な設定と比較します。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/switch

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

ライブ・任意・固定の設定

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/switch
Registry JSON

使い方

表示する Label を Switch の id に接続します。初期値は defaultChecked、実際の設定を管理する場合は checked と onCheckedChange を使います。

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export default function Example() {
  const id = useId();
  return (
    <div className="flex items-center gap-3">
      <Switch id={id} name="notifications" defaultChecked />
      <Label htmlFor={id}>Email notifications</Label>
    </div>
  );
}

API リファレンス

native checkbox input に role=switch を適用し、form とブラウザーの動作を維持します。checked、defaultChecked、onCheckedChange に対応します。

コンポーネントプロパティ型デフォルト説明
Switchchecked / defaultCheckedboolean—制御されたオン状態、または非制御時の初期状態です。
SwitchonCheckedChange(checked: boolean) => void—オン状態が変わったときに呼び出されます。
SwitchonChangeReact.ChangeEventHandler<HTMLInputElement>—native checkbox の change event を受け取ります。
Switchdisabledbooleanfalseinput とポインターによる操作を無効にします。
Switchname / value / requirednative input props—form 送信に使用する native checkbox 属性です。

アクセシビリティ

  • 01

    実際の checkbox に role=switch を適用することで、checked 状態を支援技術に伝え、Space キーの操作も維持します。

  • 02

    Label の htmlFor と Switch の id を関連付けるか、aria-label を指定してください。

  • 03

    即時適用されず、別途 save action が必要な boolean 選択には Checkbox の方が適している場合があります。