Checkbox

独立した選択、同意、複数項目の選択に使います。

プレビュー

選択・部分選択・無効状態

選択済みの価格通知、制御された部分選択のワークスペース、使用できない項目を比較します。

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

インストール

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

npx shadcn@latest add @neumorphism-ui/checkbox

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

選択・部分選択・無効状態

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

Registry JSON

使い方

Checkbox の id と表示する Label の htmlFor を一致させます。初期値には defaultChecked、アプリで制御する場合は checked と onCheckedChange を使います。

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <div className="flex items-center gap-2">
      <Checkbox id={id} name="updates" />
      <Label htmlFor={id}>Receive product updates</Label>
    </div>
  );
}

API リファレンス

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

コンポーネント	プロパティ	型	デフォルト	説明
`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 属性です。