はじめに 🌟
Fluent UI 2 の Field は、入力コンポーネントそのものではなく、ラベル・補足・検証結果をひとまとまりで扱うための土台です。見た目を整える部品に見えますが、実際には「何を入力してほしいか」「どこで補足するか」「いつエラーを見せるか」を決める、かなり設計寄りのコンポーネントです。
この記事では、まず Fluent UI 2 の概要を簡単に整理し、そのあとで Fluent UI 2 の Field と Fluent UI Blazor 5 の Field を比較します。あわせて、近い役割を持つ TextInput、TextArea、Number も見ます。
特にアクセシビリティとコンテンツの説明を重視してまとめます。
Blazor 側は /Input ではなく TextInput が実質的な比較対象です。この記事では、Input 相当として TextInput を扱います。
Fluent UI 2 とは
Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムに沿った UI コンポーネント群です。単に見た目をそろえるための部品集ではなく、情報の優先順位、操作の一貫性、支援技術での読みやすさまで含めて設計されています。
そのため Field も、単なる「入力欄の見出し」ではありません。利用者が迷わず入力できるように、ラベル、ヒント、検証メッセージの置き方を整理するためのコンポーネントです。
今回のゴール ✅
-
Fieldが何を担うコンポーネントか分かる - Fluent UI 2 と Fluent UI Blazor 5 の
Fieldの違いを整理できる -
TextInput/TextArea/Numberの使い分けを押さえられる - アクセシビリティと文言設計の注意点を理解できる
Field の役割
公式の説明を要約すると、Field は「ラベル + フォームコンポーネント + 補足情報」をまとめる箱です。React 側は input や select など、入力を求めるコンポーネント全般に使えます。Blazor 側は FluentField がラベル、メッセージ、ヒントをまとめ、入力コンポーネントと接続する形です。
| 観点 | Fluent UI 2 | Fluent UI Blazor 5 |
|---|---|---|
| 🧱 役割 | ラベルとフォーム部品を組み合わせる | ラベル、検証メッセージ、ヒントをまとめる |
| 🔌 接続 | 任意の入力系コンポーネントを包む |
InputComponent で既存入力と結びつける |
| 📐 レイアウト | 既定はラベルが上、必要なら左寄せも可能 |
LabelPosition と LabelWidth で調整する |
| ♿ アクセシビリティ | placeholder を主情報にしない |
AriaLabel や MessageCondition で補完する |
| 📝 文言 | 短いラベル、短い補足、短い検証文 |
LabelTemplate / MessageTemplate で拡張できる |
使用法の違い
Fluent UI 2 の Field
React 側の Field は、入力部品を囲むことでラベル、required、validation message をまとめて扱います。公式ガイドでは、validationMessage で状態を伝え、required で必須を示します。
また、重要なのは「隠してはいけない情報を Field に入れない」ことです。入力に必要な条件や、失敗すると先に進めない注意事項は、折りたたまずに見える場所へ置くべきです。
Fluent UI Blazor 5 の Field
Blazor 側の FluentField は、Label、Message、MessageCondition、MessageState などをまとめて扱います。さらに InputComponent を設定すると、既存の入力コンポーネントに同じ属性群をまとめて適用できます。
Blazor の公式ドキュメントでは、Field は次の用途に向いています。
-
Fieldでフォーム部品にラベルと検証メッセージを付ける -
ProgressBarのような、もともとラベルを持たない部品に説明を足す
逆に、次の使い方は避けます。
- 1 つの
Fieldに複数のコントロールを入れる -
CheckboxにFieldのラベルを重ねる
使い分けの要点
まず結論だけ言うと、Field は入力そのものではありません。
入力の種類を決めるのが TextInput / TextArea / Number で、その入力をどう説明するかを整えるのが Field です。
| 迷ったとき | 選ぶもの | 理由 |
|---|---|---|
| 1 行の文字を入れたい | TextInput |
最も基本的な単一行入力だから |
| 複数行の文章を入れたい | TextArea |
改行や長文に向いているから |
| 数値を入れたい | Number |
型、範囲、刻み幅を扱えるから |
| ラベル、補足、検証文を付けたい | Field |
入力の意味を説明できるから |
React 側は「入力コンポーネントをどう包むか」が中心です。Blazor 側は「入力コンポーネントと Field の属性をどう共有するか」が中心です。見た目は似ていても、Blazor の方がコンポーネント間の結合を明示的に扱います。
似ている入力コンポーネントの比較
TextInput / Input
TextInput は、名前のとおり 1 行の文字入力です。
たとえばユーザー名、検索語、メールアドレスのように、改行しない値を入れるときに使います。
| 観点 | TextInput |
|---|---|
| 📝 用途 | 単一行の文字入力 |
| ✨ 目立つ機能 |
Immediate、ImmediateDelay、検索向けのキーイベント、prefix/suffix、マスク |
| ♿ 注意点 | 必須情報を placeholder に置かない |
| 🔗 Field との関係 |
Field がラベルと補足を担い、TextInput が値入力を担う |
TextInput は「どう入力させるか」の部品で、Field はその前後にある「何を入力してほしいか」を伝える部品です。
両方を合わせると、入力欄そのものと説明が分かれ、フォームがかなり読みやすくなります。
TextArea
TextArea は複数行の入力です。
たとえばコメント、メモ、問い合わせ内容のように、長くなりやすい文章を入れるときに向いています。
| 観点 | TextArea |
|---|---|
| 📝 用途 | 複数行の文字入力 |
| ✨ 目立つ機能 |
Size、Width / Height、Resize、AutoResize、ChangeAfterKeyPress
|
| ♿ 注意点 | 文章量が増えるなら補足を Field 側に置く |
| 🔗 Field との関係 | ラベル、ヒント、検証文は Field に寄せる |
TextArea は本文を長く書くための部品なので、入力ルールは Field 側で先に示したほうが読みやすいです。
ここを分けると、「入力する文章」と「入力のしかた」が混ざりません。
Number
Number は数値入力です。
価格、人数、数量、割合のように、数値として扱いたい値を入れるときに使います。
| 観点 | Number |
|---|---|
| 🧮 用途 | 整数・小数の入力 |
| ✨ 目立つ機能 |
TValue、Min、Max、Step、Culture、StepButtons
|
| 🌍 注意点 | 小数点や桁区切りは文化圏で変わる |
| 🔗 Field との関係 | 数値の意味は Field で説明し、入力制約は Number で担う |
Number は「数値として正しいか」を扱います。Field は「その数値が何を意味するか」を説明します。
たとえば「何円まで」「何人まで」「どの単位か」を Field で先に書いておくと、エラー文も短く保ちやすくなります。
レイアウト
Fluent UI 2 の Field は、既定でラベルが入力欄の上に来ます。一覧性が高く、フォームを上から順に読ませたいときに向いています。
Blazor 側は LabelPosition でラベル位置を上・左・右に調整でき、LabelWidth で幅をそろえられます。スペースが限られる画面では便利ですが、読みやすさは上置きのほうが保ちやすいです。
また、Blazor 側には Field ごとの余白があり、入力群の間隔をそろえやすいのも特徴です。フォーム全体の見通しを作りやすい反面、詰め込みすぎると逆に窮屈になるので、密度とのバランスが必要です。
アクセシビリティ
ここが一番大事です。
Field では、プレースホルダーを必須情報の代わりにしてはいけません。React の公式ドキュメントでも、必要な情報は label と helper text に分けるべきだとされています。Blazor 側でも同じ考え方で、入力の意味は Label、補足は Message や補助文言に分けたほうが安全です。
| 観点 | ポイント |
|---|---|
| ♿ 必須表示 | 必要なら required で示す。ただし全項目必須なら、フォーム冒頭でまとめて案内する方が自然 |
| 🔊 読み上げ | placeholder だけに頼らず、ラベルを用意する |
| 🚫 無効状態 | 入力を無効化しても、ラベルや補足は見える形にしておく |
| 🧩 1 対 1 | 1 つの Field に複数の入力を入れない |
| 🧠 読みやすさ | 左寄せラベルは省スペースだが、可読性が落ちやすい |
Blazor 側では AriaLabel が各入力コンポーネントに用意されているので、視覚ラベルと支援技術向けの説明を分けて考えられます。MessageCondition でメッセージ表示のタイミングを制御できるのも、実務では助かります。
コンテンツの説明
Field の役目は、入力欄の周囲にある言葉を整えることです。
- Label: 何を入力するかを短く示す
- Placeholder: 目安を短く示す。必須情報にはしない
- Helper text / Message: 入力ルールや検証結果を補う
ラベルは短い句で十分です。文末を付けない方が収まりやすく、読んだ瞬間に意味が伝わります。補足も同じで、長文にするより、必要なら箇条書きに分けた方が理解しやすいです。
Blazor 側の LabelTemplate と MessageTemplate は柔軟ですが、自由度が高いからこそ使いすぎないほうがいいです。標準のテキストで足りるなら、まずは簡潔な文言に寄せたほうが、保守もしやすくなります。
まとめ
Field は、入力そのものよりも「どう説明するか」を担当するコンポーネントです。Fluent UI 2 では、ラベル・補足・検証メッセージを整理するための設計要素として扱われます。Blazor 5 では、FluentField が入力コンポーネントと明示的に結びつき、TextInput / TextArea / Number と役割分担しやすくなっています。
特に重要なのは、ラベルを短く、補足を適切に、必須情報を隠さないことです。ここを外さなければ、見た目だけでなく、読みやすさとアクセシビリティも一緒に整います。