Caroa UI

Checkbox

チェックボックスコンポーネント。

インポート

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

基本的な使い方

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

デフォルトでチェック

Loading...
<Checkbox id="checked" defaultChecked />

無効状態

Loading...
<Checkbox disabled />
<Checkbox disabled defaultChecked />

Props

PropTypeDefaultDescription
checkedboolean-チェック状態(制御コンポーネント)
defaultCheckedboolean-初期チェック状態
onCheckedChange(checked: boolean) => void-チェック状態変更時のコールバック
disabledbooleanfalse無効状態

On this page