はじめに 🌟
Fluent UI 2 は、Microsoft のデザインシステム Fluent 2 に沿って UI を組み立てるための考え方とコンポーネント群です。見た目をそろえるだけではなく、情報の優先順位、操作の一貫性、アクセシビリティまで含めて設計されているのが特徴です。
その中でも Checkbox は、複数選択や「はい／いいえ」の選択を扱ううえで、とても出番の多いコンポーネントです。ですが、Checkbox は「ただの四角い入力欄」ではありません。いつ使うか、どうラベルを書くか、ラジオグループやスイッチとどう分けるかで、体験がかなり変わります。
この記事では、まず Fluent UI 2 とは何かを簡単に押さえたうえで、Fluent UI 2 の Checkbox と Fluent UI Blazor v5 の FluentCheckbox を比較します。そのあとで、Checkbox の役割、ほかの選択入力コンポーネントとの使い分け、レイアウト、アクセシビリティ、コンテンツの書き方までまとめます。
参照した公式情報はこちらです。
- Fluent UI 2 Checkbox Usage
- Fluent UI 2 Radio group Usage
- Fluent UI 2 Dropdown Usage
- Fluent UI 2 Switch Usage
- Fluent UI Blazor v5 Checkbox
Fluent UI 2 とは
Fluent UI 2 は、Microsoft のデザインシステム Fluent 2 に沿って UI を実装するための土台です。単なるコンポーネントの寄せ集めではなく、情報設計、操作の流れ、アクセシビリティを含めて一貫した体験を作ることを目指しています。
Checkbox もその一部なので、単に「チェックできる見た目」を作るのではなく、何を選ばせたいのか、利用者は今すぐ確定したいのか、あとでまとめて送信したいのかまで考えて選ぶ必要があります。
今回のゴール ✅
- Fluent UI 2 における Checkbox の役割を理解する
- Fluent UI 2 と Fluent UI Blazor v5 の Checkbox の違いを把握する
- Checkbox とラジオグループ、ドロップダウン、スイッチの使い分けを整理する
- レイアウト、アクセシビリティ、コンテンツの書き方を押さえる
Checkbox は何をするコンポーネントか
Fluent UI 2 の公式説明では、Checkbox は複数の選択肢から複数を選ぶため、または 1 つの選択肢をオン／オフするために使います。さらに、Checkbox は選んだ直後に反映するのではなく、送信や確定の操作を挟む入力として扱われます。
つまり、Checkbox は「選択をためておく」ための部品です。選んだ瞬間に設定が切り替わるスイッチとは、役割が違います。
Checkbox は、選択の確定を急がせるよりも、「ここで選んでから後でまとめる」操作に向いています。
Fluent UI 2 の Checkbox と Fluent UI Blazor v5 の Checkbox の比較
まず結論です。Fluent UI 2 の Checkbox は設計ガイドに沿って使う React 用コンポーネントで、Fluent UI Blazor v5 の FluentCheckbox はBlazor のフォーム入力として使いやすいコンポーネントです。
| 観点 | Fluent UI 2 の Checkbox | Fluent UI Blazor v5 の FluentCheckbox
|
|---|---|---|
| 🧩 使い方 |
Checkbox を中心に、ラベルやグループを組み立てる |
FluentCheckbox に Label やバインドを付けて使う |
| 🔁 状態 | 単一選択、複数選択、一部選択状態（indeterminate）を扱う |
Value の 2 値と CheckState の 3 値を明示できる |
| 🧭 グループ | 6〜7 個程度までの短い選択肢に向く | 単体でもグループでも使えるが、フォーム部品としての色が濃い |
| 🎨 見た目 | Fluent 2 の文脈で一貫したラベル・余白・配置を重視 |
Shape と Size で外観を調整できる |
| ♿ アクセシビリティ | グループラベル、単体ラベル、支援技術で読める構造を重視 |
AriaLabel、Name、Label、Tooltip などを持つ |
| 🧪 追加機能 | 公式 Usage は用途と書き方の指針が中心 |
ThreeState、ShowIndeterminate、LabelPosition、Message などがある |
React 側で大事なのは、Checkbox を単体で置く前に、何をまとめて選ばせるのか を決めることです。公式 Usage でも、単一の「はい／いいえ」なら単体 Checkbox、複数選択なら Checkbox グループ、1 つだけ選ばせるならラジオグループ、すぐ反映したいならスイッチと案内されています。
一方、Blazor 側の FluentCheckbox は、フォーム寄りの API がまとまっています。Value で 2 状態、CheckState で 3 状態を扱えますし、ThreeState、ShowIndeterminate、Shape、Size、Message、Tooltip まで 1 つのコンポーネントで扱えます。
使い方の違い
Fluent UI 2 の Checkbox は、まずラベルとグループ構造を先に決めるのが自然です。たとえば単一のチェックなら、ラベルは短く、意味がすぐ分かる文にします。複数選択なら、選択肢を並べて比較しやすくします。
Blazor の FluentCheckbox は、Label を付けるだけで単体の入力として成立しやすいです。加えて、ShowIndeterminate="false" のようにして、最初は一部選択状態を表示しておき、利用者にはその状態へ戻らせない、という制御もできます。
実装の差
React 側は、「選択 UI をどう組み立てるか」をコンポーネントの組み合わせで作ります。
Blazor 側は、「1 つの入力部品としてどう振る舞わせるか」を FluentCheckbox のプロパティで表現します。
import { Checkbox, Field } from "@fluentui/react-components";
export const NotificationOptions = () => (
<Field label="Notifications">
<Checkbox label="Email" />
<Checkbox label="SMS" />
<Checkbox label="Push" />
</Field>
);
<FluentStack Orientation="Orientation.Vertical">
<FluentCheckbox @bind-Value="email" Label="Email" />
<FluentCheckbox @bind-Value="sms" Label="SMS" />
<FluentCheckbox @bind-Value="push" Label="Push" />
</FluentStack>
@code {
bool email = true;
bool sms;
bool push;
}
Blazor では、これに ThreeState="true" を足すと、親子チェックのような mixed 状態も扱いやすくなります。
Checkbox とほかの選択入力コンポーネントの使い分け
ここはかなり重要です。Checkbox の周辺にある入力部品は、見た目が似ていても役割が違います。
| コンポーネント | 向いている場面 | ポイント |
|---|---|---|
| ☑️ Checkbox | 複数選択、yes / no、部分選択 | 選択をためる。即時反映ではない |
| 🔘 Radio group | 1 つだけ選ぶ、候補が少ない | 5 個前後までなら見渡しやすい |
| 📋 Dropdown | 候補が多い、画面幅が狭い | 画面を節約しやすい。カスタム表示とも相性がよい |
| 🔁 Switch | on / off を即時反映したい | 変更の瞬間に設定が切り替わる |
ラジオグループ
ラジオグループは、必ず 1 つだけ選ばせたいときに使います。Fluent UI 2 の公式ガイドでも、短い候補の一覧で、しかも全体を見渡したいときに向いているとされています。
Checkbox で同じことをやると、「複数選べるのでは？」という誤解を招きます。1 つしか選べないならラジオグループに寄せたほうが、利用者の期待と合います。
ドロップダウン
ドロップダウンは、候補が多いときや画面のスペースを節約したいときに向いています。Fluent UI 2 のガイドでも、Checkbox よりドロップダウンのほうが適切な場面があるとされています。
特に、選択肢が 7 個を超えてきたら、Checkbox グループよりドロップダウンを検討したほうが見やすいです。スマホのように縦方向の余白が貴重な画面でも有利です。
ドロップダウンは単一選択にも複数選択にも使えますし、複数選択では各項目にチェック状態が付くので、Checkbox グループの代わりにもなります。
スイッチ
スイッチは、切り替えた瞬間に反映したい設定に使います。Checkbox と違い、切り替えた瞬間に状態が変わる前提です。
たとえば「通知を有効にする」「ダークモードを使う」のような設定はスイッチに向きます。一方で、「保存対象の項目を選ぶ」は Checkbox のほうが自然です。
「オンにしたらすぐ反映される」設定を Checkbox で表すと、利用者が完了操作を待つのか、すぐ反映されるのかが分かりにくくなります。
レイアウト
Fluent UI 2 の Checkbox は、ラベルとの距離とグループ分けが大事です。単体 Checkbox は操作対象がすぐ分かるように、ラベルを近くに置きます。グループでは、グループラベルを先に置いて、何の選択肢なのかを明確にします。
親子の Checkbox があるときは、子を少しインデントして視覚的に分けると見つけやすくなります。Fluent UI 2 のガイドでも、親と子のチェックボックスを視覚的に分離することが勧められています。
Blazor でも、既定で 24px 程度の間隔を推奨しているので、隣接するコンポーネントを詰め込みすぎないほうが読みやすいです。
アクセシビリティ ♿
Checkbox で一番大切なのは、状態が支援技術に正しく伝わることです。見た目を整えるだけでは足りません。
Fluent UI 2 の公式ガイドでは、Checkbox グループは説明的なラベルと結びつけるべきだとされています。ラベルを自動で付けたいなら checkbox field component を使い、単体の Checkbox なら label prop で目的を明示します。
Blazor 側でも同じ考え方で、Label、AriaLabel、Name を適切に使う必要があります。特に Name は SSR で重要です。CheckState を使う 3 状態の Checkbox では、一部選択状態がコード上でも分かるようにしておくことが大切です。
WCAG の観点では、少なくとも次の 3 つを意識すると整理しやすいです。
要するに、見た目で「ここにチェックがある」と分かるだけでは不十分です。何の選択肢で、今どの状態で、どうグループ化されているか が、コードとしても伝わる必要があります。
コンテンツ
Checkbox のラベルは、見た目以上に重要です。Fluent UI 2 の公式ガイドでは、ラベルは短く、分かりやすく、見ただけで理解しやすいように書くことが勧められています。
単体 Checkbox のラベル
- 1 行で意味が通る
- できるだけ肯定形にする
- 句点は付けない
- 質問文にしない
たとえば、Send me product updates のようなラベルは自然です。逆に、Don't send me product updates のような否定形は、チェックの意味が読み取りづらくなります。
グループのラベル
グループラベルは、「何を選ぶグループか」を伝えるためのものです。選択肢の重複語はグループ名側に寄せて、各項目はできるだけ短くします。
また、選択肢は次のようにそろえると読みやすいです。
- 名詞なら名詞でそろえる
- 動詞なら動詞でそろえる
- 小さい順、簡単な順、安全な順など、論理的な順で並べる
個人向けの文言
個人設定では、I や my のような一人称を使うことがあります。これは「その人自身が制御している」ことを伝えやすいからです。
ただし、無理に個人化しなくても構いません。大事なのは、ラベルだけで意味が伝わることです。
まとめ / おわりに
Checkbox は、複数選択や「はい／いいえ」を扱ううえで基本の部品ですが、使い方を間違えるとラジオグループやスイッチと役割がぶつかります。
Fluent UI 2 では、Checkbox は「選択をためる入力」、ラジオグループは「1 つだけ選ぶ入力」、ドロップダウンは「候補が多いときの入力」、スイッチは「切り替えた瞬間に反映する入力」と考えると整理しやすいです。
Fluent UI Blazor v5 の FluentCheckbox は、Value と CheckState、ThreeState、Shape、Size などを通じて、フォーム部品として細かく制御できます。React 側の Fluent UI 2 は、レイアウトとコンテンツのルールを強く意識して使うのがコツです。
Checkbox は小さい部品ですが、ラベル、順序、状態、グループ化を丁寧に扱うと、画面全体の分かりやすさがかなり変わります。