ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Checkbox | HTML Inputエレメント (Checkbox型) | — | |
| 2 | Label | チェックボックスにコンテキストを付与するためのテキスト要素 | 任意 |
Options: 選択肢
Size
sm
通常よりも小さなサイズです。限られたスペースにチェックボックスを配置する場合かつアクションの重要性が低い場合に使用します。
md (default)
チェックボックスのデフォルトのサイズです。mdが最も使用されるサイズです。他のサイズのチェックボックスはノーマルを基準に重要度に応じて使用します。
lg
大きなチェックボックスはアクションの重要性を高めるため、使用は極力控えてください。
States: 状態
Default
Enable
ユーザーがチェックボックスを操作する前のデフォルトの状態。
Hover
ユーザーがチェックボックスにマウスオーバーしている状態。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてチェックボックスに注視している状態。
Disabled
システムによってチェックボックスが非活性化されている状態。ユーザーによる操作は不能です。
Invalid
Enable
選択内容が特定のフォーマットに基準していない場合（フォーム内の選択が必須のチェックボックスを選択せずに続行しようとした場合など）の状態です。ユーザーが適切な入力を行うことで無効状態は解除されます。
Hover
ユーザーがチェックボックスにマウスオーバーしている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Focus
チェックボックスがフォーカスされている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Disabled
システムによってチェックボックスが非活性化されている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Checked
Enable
チェックボックスが選択されていることを表す状態。
Hover
ユーザーがチェックボックスにマウスオーバーしている場合かつ、チェックボックスが選択されている場合の状態です。
Focus
チェックボックスがフォーカスされている場合かつ、チェックボックスが選択されている場合の状態です。
Disabled
チェックボックスが非活性化されている場合かつ、チェックボックスが選択されている場合の状態です。
Indeterminate
Enable
テーブルなどで複数のチェックボックスが全て選択さ
れている場合の一括選択用のチェックボックスの状態
です。
選択することで内包されている全てのチェックボック
スの選択が解除されます。
Hover
ユーザーが一括選択用チェックボックスにマウスオーバーしている場合かつ、内包されているチェックボックスが全て選択されている場合の状態です。
Focus
一括選択用チェックボックスがフォーカスされている場合かつ、内包されているチェックボックスが全て選択されている場合の状態です。
Disabled
システムによって一括選択用チェックボックスが非活性化されている場合かつ、内包されているチェックボックスが全て選択されている場合の状態です。
Behaviors: 振る舞い
テキストオーバーフロー
チェックボックスのラベルが横幅に対して超過する場合、テキストは折り返して表示されます。
一括の選択と解除
親のチェックボックスを使用すると、すべての項目を選択または解除できます。
クリッカブルエリア
チェックボックスのクリッカブルエリアにはラベルも含まれます。
Metrics: 寸法
sm
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 32px
- Item Spacing: 0px
- padding Vertical: 8px
- padding Horizontal: 8px
md
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 40px
- Item Spacing: 0px
- padding Vertical: 10px
- padding Horizontal: 10px
lg
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 48px
- Item Spacing: 0px
- padding Vertical: 12px
- padding Horizontal: 12px
Usage: 使い方
チェックボックスは、グループから1つ以上の要素を選択できます。複数の項目への選択を要求するフォームにて使用します。
チェックボックスは単独で使用できます。単独で使用する場合は必ずラベルを付与します。
単一選択のためのフォームにはラジオを使用します。チェックボックスは使用しないでください。
真偽値のように、チェックボックス同士の関連がない独立した値を操作する場合はスイッチを使用します。チェックボックスは使用しないでください。
チェックボックスグループの項目が多い場合は一括操作を行うチェックボックスの設置を検討します。
また、インデントやグルーピングを適切に活用し、一括操作を行うチェックボックスと従属するチェックボックスの依存関係を明示します。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2024/12/13 | ドキュメントを公開 |
| 2023/10/14 | Figmaを公開 |
