チェックボックスCheckboxBeta

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

プレビュー

状態とバリエーション

未選択

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

選択済み

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

無効

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

プロパティ

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

使い方

import * as React from "react";
import { Checkbox, Label } from "@gunjo/ui";

export function TermsCheckboxWithText() {
  const [accepted, setAccepted] = React.useState(false);

  return (
    <div className="flex items-start gap-2">
      <Checkbox
        id="terms"
        checked={accepted}
        onCheckedChange={setAccepted}
      />
      <div className="grid gap-1.5 leading-none">
        <Label htmlFor="terms">利用規約に同意する</Label>
        <p className="text-sm text-muted-foreground">
          利用規約とプライバシーポリシーに同意したものとみなします。
        </p>
      </div>
    </div>
  );
}

設計の判断

  • 土台は入力欄ではなくボタン。role="checkbox" と aria-checked を自分で持つ button で作っています。素の入力欄の描画に見た目を縛られないための選択で、その代わり読み上げ用の属性は部品の側で全部埋めています。
  • 名前と補足を部品に渡せる。label と description を渡すと、useId で作った id を使って aria-labelledby と aria-describedby に繋がります。呼ぶ側が毎回 aria-label を思い出さなくて済みます。ラベルを押しても切り替わるので、当たり判定は四角の中だけではありません。
  • 見た目の段は生成された定義から引く。チェック済み・未チェック・使えない、の3つの見た目は設計の元から生成した名前で引いています。ソースの側だけで段を足すことはできません。四角は複数選べる・丸は1つだけ、という使い分けは資料に書いてあります。

使用コンポーネント

CheckboxLabel

関連コンポーネント

SwitchRadioGroupToggleForm

いつ・なぜ使うか（UIXHERO）

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

UIコンポーネント: Checkbox