チェックボックスCheckboxBeta

オン/オフを切り替えるコントロールです。

プレビュー

状態とバリエーション

未選択

まだ選択されていない基本状態です。ラベルと組み合わせて意味を明確にします。

選択済み

同意や選択が完了している状態です。値を外部で管理する場合は、選択済みの値を渡します。

無効

ユーザーが変更できない状態です。必要に応じて理由を近くに表示します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
checkedbooleanfalseチェックボックスの選択状態を制御します。
onCheckedChange(checked: boolean) => void-選択状態が変わった時に呼ばれる処理です。
disabledbooleanfalsetrue の場合、ユーザー操作を無効にします。

使い方

import { Checkbox, Label } from "@gunjo/ui"

export function CheckboxWithText() {
  return (
    <div className="flex items-start gap-2">
      <Checkbox id="terms" />
      <div className="grid gap-1.5 leading-none">
        <Label htmlFor="terms">Accept terms and conditions</Label>
        <p className="text-sm text-muted-foreground">
          You agree to our Terms of Service and Privacy Policy.
        </p>
      </div>
    </div>
  )
}

使用コンポーネント

CheckboxLabel

関連コンポーネント

SwitchRadioGroupToggleForm

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Checkbox