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

Checkbox

透明な native input の上にニューモーフィックなサーフェスを重ね、form 送信とブラウザーのアクセシビリティを維持します。shadcn 形式の onCheckedChange callback とともに、制御・非制御・indeterminate の各状態に対応します。

@neumorphism-ui/checkbox

プレビュー

価格アラートを受け取る一部のワークスペースに適用済み利用できないオプション

npx shadcn@latest add @neumorphism-ui/checkbox

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

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

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

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<div className="flex items-center gap-2">
  <Checkbox id="updates" defaultChecked />
  <Label htmlFor="updates">製品アップデートを受け取る</Label>
</div>

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