フォームと選択@neumorphism-ui/switch

Switch

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

@neumorphism-ui/switch

Registry JSON

プレビュー

リアルタイム価格市場価格を自動で更新します。メール通知重要な変動だけを受け取ります。管理者ポリシー現在のワークスペースではロックされています。

インストール

npx shadcn@latest add @neumorphism-ui/switch

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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

Import

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

Example

<div className="flex items-center justify-between gap-4">
  <Label htmlFor="system-theme">システムテーマを使用</Label>
  <Switch id="system-theme" name="systemTheme" defaultChecked />
</div>

API リファレンス

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

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ