Checkbox

インポート

import { Checkbox } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Checkbox } from '@caroainc/ui-components/checkbox'

利用規約に同意する

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">利用規約に同意する</Label>
</div>

チェック済み

<Checkbox id="checked" defaultChecked />

checked="indeterminate"を指定すると、チェックマークの代わりにマイナス記号が表示されます。「一部の子項目のみ選択されている」状態（全選択チェックボックス等）を表現する際に使用します。

一部選択中

<Checkbox checked="indeterminate" />

無効

無効（チェック済み）

<Checkbox disabled />
<Checkbox disabled defaultChecked />

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	`-`	チェック状態（制御コンポーネント）。indeterminate指定時はマイナス記号を表示
`defaultChecked`	`boolean`	`-`	初期チェック状態
`onCheckedChange`	`(checked: boolean) => void`	`-`	チェック状態変更時のコールバック
`disabled`	`boolean`	`false`	無効状態