7onicDESIGN SYSTEM

Checkbox

Checkboxは、ユーザーがオプションのオン/オフを切り替えるためのフォームコントロールです。単独で使用するか、複数を並べてグループとして使用します。

3
Sizes
3
Radius
3
States
Radix
Base

Playground

プレビュー
D
Size
Color
Weight
Radius
Checked
Items
Options
<Checkbox
  label="Email"
/>

Sizes

sm
ボックス14px
アイコン10px
フォント12px
Gap6px
クリック24px
default
ボックス16px
アイコン12px
フォント14px
Gap8px
クリック32px
lg
ボックス20px
アイコン14px
フォント16px
Gap10px
クリック36px

Features

With Field

Fieldコンポーネントと組み合わせることで、disabled状態を自動的に継承します。

<Field>
  <Field.Label>Notifications</Field.Label>
  <div className="flex flex-col gap-2">
    <Checkbox defaultChecked label="Email" />
    <Checkbox label="Push" />
    <Checkbox label="SMS" />
  </div>
</Field>
<Field>
  <Field.Label>Notifications</Field.Label>
  <div className="flex gap-6">
    <Checkbox defaultChecked label="Email" />
    <Checkbox label="Push" />
    <Checkbox label="SMS" />
  </div>
</Field>

States

Unchecked
Checked
Indeterminate
Disabled
Disabled On
<Checkbox />
<Checkbox defaultChecked />
<Checkbox checked="indeterminate" />
<Checkbox disabled />
<Checkbox disabled defaultChecked />

API

Props

checkedundefined
boolean | "indeterminate"

制御モードでのチェック状態

defaultCheckedundefined
boolean

非制御モードでの初期チェック状態

onCheckedChangeundefined
(checked: boolean | "indeterminate") => void

状態変更時のコールバック

size"default"
"sm" | "default" | "lg"

チェックボックスのサイズ (14/16/20px)

radius"sm"
"none" | "sm" | "md"

角丸 (none: 0px / sm: 2px / md: 4px)

weight"bold"
"thin" | "bold"

ボーダーの太さ (thin: 1px / bold: 2px)

color"default"
"default" | "primary"

チェック/未確定状態の塗り色

labelundefined
string

チェックボックスのラベルテキスト

disabledundefined
boolean

無効状態

requiredundefined
boolean

必須フィールド

nameundefined
string

フォームのname属性

value"on"
string

フォームのvalue属性

Anatomy

1
2
3
4
I agree
statechecked · unchecked · indeterminate
1
Root
フレックスコンテナ
2
Box
チェックボックス本体
3
Checkmark
チェック時に表示
4
Label
オプション

Best Practices

✓

推奨

  • ✓明確なラベルを付けて使用する
  • ✓複数選択が必要な場合に使用する
  • ✓グループの全選択にindeterminateを使用
  • ✓必須項目にはFieldと組み合わせる
✕

避けるべき

  • ✗排他的選択にCheckboxを使わない（Radioを使用）
  • ✗即座に効果が出る切替にはSwitchを使用
  • ✗ラベルなしで使用しない
  • ✗選択肢が多すぎる場合はSelectを検討

Accessibility

キーボード操作

Spaceチェック切替
Tabフォーカス移動

ARIA属性

  • role="checkbox" 自動付与
  • aria-checked true/false/mixed
  • フォーカスインジケーター
  • label でクリック領域拡大