.NETやAzure・Microsoft製品で学んだことや気づいたことを共有しよう

@tomokusaba(Tomomitsu Kusaba)Team Tea & Water

Fluent UI 2 の Combobox を理解する — Fluent UI Blazor 5 との比較と使い分け

Posted at 2026-06-04

はじめに 🌟

Fluent UI 2 の Combobox は、単なる「候補付きの入力欄」ではありません。
入力できること、候補を絞り込めること、必要なら自由入力も受け入れられることを、1 つの部品で扱うための設計です。

この記事では、まず Fluent UI 2 とは何かを短く整理し、そのうえで Combobox とは何かを W3C の定義とアクセシビリティの観点から見ます。
その後に、Fluent UI 2（React）と Fluent UI Blazor 5 の Combobox の違い、さらに Combobox / Dropdown / Select / Autocomplete の使い分けをまとめます。

参考にした公式ページはこちらです。

同じシリーズとして、Button の記事と Breadcrumb の記事もあります。
あわせて読むと、Fluent UI 2 と Fluent UI Blazor 5 の見方が揃いやすくなります。

今回のゴール ✅

✅ Fluent UI 2 の Combobox の役割を理解する
✅ W3C の combobox 定義とアクセシビリティ要点を押さえる
✅ Fluent UI 2 と Fluent UI Blazor 5 の実装差をつかむ
✅ Combobox / Dropdown / Select / Autocomplete を使い分けられるようにする
✅ コンテンツやラベルの書き方を実務に落とし込む

Fluent UI 2 とは

Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムに沿って UI を組み立てるための考え方とコンポーネント群です。
見た目をそろえるだけではなく、操作のしかたや、何を選ばせるか、支援技術にどう伝えるかまで含めて設計します。

Combobox はその中でも、選択と入力の境界を扱う部品です。
候補が多い場面、検索したい場面、あるいは自由入力を許したい場面で、とても重要になります。

Combobox とは

W3C の WAI-ARIA Authoring Practices では、combobox は関連する popup を持つ input widget と説明されています。popup は listbox / grid / tree / dialog などになりえます。
つまり combobox は、単なる入力欄ではなく、入力欄と候補リストがつながった複合ウィジェットです。

さらに重要なのは、combobox には大きく 2 つの形があることです。

editable: テキスト入力できる
select-only: 入力はできず、候補から選ぶだけ

この違いが、Combobox と Select / Dropdown の境目をかなり左右します。

W3C の pattern では、combobox の autocomplete も 4 種類に整理されています。

種類	振る舞い
🧭 補完なし	候補は出るが、入力に応じて補完しない
✍️ 一覧補完・手動選択	入力に応じて候補を絞るが、選択は手動
⚡ 一覧補完・自動選択	最初の候補が自動選択される
🪄 インライン補完	入力済み文字の後ろに補完文字がインライン表示される

W3C はまた、combobox の価値を次の 2 つの場面で説明しています。

値が事前定義された集合から選ばれる必要がある
任意入力も許したいが、候補提示で入力を助けたい

この 2 つを同時に満たせるのが combobox の強みです。

Fluent UI 2 と Fluent UI Blazor 5 の Combobox の違い

両者は同じ Fluent 2 の思想を共有していますが、実装の単位と API の形はかなり違います。

観点	Fluent UI 2（React）	Fluent UI Blazor 5
📦 主なコンポーネント	`Combobox`	`FluentCombobox<TOption, TValue>`
🧩 役割	入力付き候補選択	入力付き候補選択
✍️ 自由入力	`freeform`	`FreeOption`
🔎 候補の定義	JSX / props	`Items` + `OptionText` / `OptionValue`
🎛️ 追加 UI	`Field` と組み合わせる	`Label` / `Message` / `MessageState` を内包
🗂️ 複数選択	`multiselect`	`Multiple="true"`
♿ アクセシビリティ	公式ガイドで詳細に案内	Combobox は利用可、Autocomplete は未実装部分あり

React 側は、combobox 本体と field、option を分けて考えやすいです。
Blazor 側は、フォームとしてのラベルやメッセージまでコンポーネントに寄せている印象があります。

実装の比較

import { Combobox, Option } from "@fluentui/react-components";

export function CountryCombobox() {
  return (
    <Combobox placeholder="Select a country" freeform>
      <Option text="Japan">Japan</Option>
      <Option text="Korea">Korea</Option>
      <Option text="Taiwan">Taiwan</Option>
    </Combobox>
  );
}

<FluentCombobox TOption="string"
                TValue="string"
                Label="Country"
                Placeholder="Select a country"
                Items="@Countries"
                OptionText="@(x => x)"
                @bind-Value="@Value">
    <FreeOption>
        Search for '<FreeOptionOutput />'
    </FreeOption>
</FluentCombobox>

@code {
    static readonly string[] Countries = ["Japan", "Korea", "Taiwan"];
    string? Value;
}

React では freeform や text のような props で意味を足します。
Blazor では Items、OptionText、OptionValue、FreeOption の組み合わせで表現します。

Blazor 側で特に見ておきたい点

Blazor 5 の FluentCombobox は FluentSelect<T> をベースにしています。
そのため、見た目は入力欄付きでも、内部的にはリスト選択を拡張した作りとして読めます。

また、次のようなパラメーターが実務で効きます。

Placeholder
Label
Message / MessageState
Multiple
SelectedItems
FreeOption
OptionText
OptionValue
OptionDisabled

Blazor 版では Width がまだ未実装という注記がありました。レイアウトを詰めるときは、親コンテナ側で幅を調整する前提で考えたほうが安全です。

Combobox / Dropdown / Select / Autocomplete の使い分け

ここは混同しやすいので、先に結論を書きます。

コンポーネント	向いている場面	入力	候補数	自由入力
🧭 Combobox	候補を検索しながら選びたい	あり	多い	あり得る
📋 Dropdown	カスタム表示や多選択を含む選択UI	なし	中〜多	なし
✅ Select	標準的なフォーム入力	なし	少〜中	なし
🔎 Autocomplete	テキスト検索を中心にしたい	あり	多い	実装次第

Combobox

Combobox は、入力しながら候補を絞るのが基本です。
Fluent UI 2 のガイドでも、候補がとても長いときに向いていると説明されています。

特に次のような場面に向きます。

国名、都市名、担当者名のように候補が多い
入力文字列で絞り込みたい
候補にない値の自由入力も許したい

Dropdown

Fluent UI 2 の Dropdown は、候補を選ぶ UI です。
入力欄として打ち込むより、開いて選ぶことが中心です。

Combobox との大きな違いは、Dropdown の方が「入力して絞る」よりも「選択肢を見せる」ことに寄っています。
また、React のガイドでは、フォーム用途でモバイルも意識するなら Select を、カスタムスタイルや候補の見せ方を工夫したいなら Dropdown を勧めています。

Select

Select は、単一選択の標準的なフォーム部品です。
Fluent UI 2 のガイドでは、少なくとも 4 個以上の選択肢があるときに使う、と説明されています。

実務では次のときに選びやすいです。

送信フォームで使う
モバイルでの使いやすさを重視する
ブラウザー既定のアクセシビリティを活かしたい

Autocomplete

Fluent UI Blazor 5 の FluentAutocomplete は、テキスト入力 + 候補検索 を軸にしたコンポーネントです。
OnOptionsSearch で候補を返し、SelectedItem / SelectedItems で選択状態を扱います。

ただし、Blazor の公式ドキュメントには Accessibility requirements are not yet implemented とあります。
そのため、アクセシビリティを最優先するなら Combobox / Select / Listbox を先に検討するほうが安全です。

アクセシビリティ

Combobox で一番大事なのは、見た目ではなく名前・値・popup の関係です。

W3C の pattern では、combobox は次のような性質を持ちます。

popup は初期状態では閉じている
popup の種類は listbox / grid / tree / dialog になりうる
accessible name があり、value とは別に認識される
aria-required="true" を使える
キーボード操作で開閉・選択・編集を行う

`text` / `OptionText` の意味

React では、複雑な option に対して text prop を使うと、型文字入力による検索や閉じた状態の表示が安定します。
Blazor では OptionText がほぼ同じ役割を担います。

複雑な JSX / テンプレートを使うと、見た目は分かりやすいのに検索できないことがあります。
そこで、支援技術やキーボード操作のために、文字列としての代表値を別途持たせるのが重要です。

`inlinePopup` と画面読み上げ

React の Combobox では、可能なら inlinePopup={true} が推奨されます。
Safari が aria-owns をサポートしないため、popup を DOM 上で button の直後に置くと、VoiceOver の移動が安定しやすいからです。

これは細かい話に見えますが、「見えているのにたどれない」を避けるうえでかなり重要です。

placeholder の扱い

placeholder はラベルの代わりではありません。
W3C / Fluent の双方で、本当に必要な情報は label や helper text に置くことが前提です。

コンテンツの書き方

Combobox や Dropdown は、文言の質で使いやすさがかなり変わります。

ラベル

ラベルは短く、何を選ぶ欄かが分かる名詞句にします。

Country
Department
Project
Assignee

候補文言

候補は 並列構造 で書きます。
たとえば名詞なら名詞、動詞なら動詞に寄せます。

よい例	避けたい例	理由
🇯🇵 Japan / 🇰🇷 Korea / 🇹🇼 Taiwan	Select Japan / Select Korea / Select Taiwan	先頭語を揃えすぎると冗長
New / Open / Save	New item / Open item / Save item	冗長で比較しづらい
None / Email / SMS	Other / Various / Choice	何を選ぶかが曖昧

ヘルパー文言

必要なら helper text を置きます。
特に「自由入力してよいのか」「候補からしか選べないのか」は、画面上で明示したほうが安全です。

Combobox では入力できることが前提に見えやすいので、自由入力を許さない設計ならそのことをはっきり書いてください。
そうしないと、ユーザーは候補にない値を入れてよいと誤解します。

まとめ

Combobox は、選ぶことと入力することをつなぐ部品です。
W3C の観点では、editable / select-only、autocomplete の種類、popup の種類を意識すると整理しやすくなります。

Fluent UI 2 と Fluent UI Blazor 5 を比べると、思想は近い一方で、React は Combobox + Field のように部品を分け、Blazor は FluentCombobox にフォーム要素を寄せる構成でした。
さらに Blazor の Autocomplete は便利ですが、アクセシビリティ面ではまだ慎重に扱うべきです。

結局のところ、候補が多いなら Combobox / Autocomplete、標準フォームなら Select、見せ方を工夫したいなら Dropdown と考えると、かなり選びやすくなります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up