テキスト入力、カスタム選択、およびカスタム ファイル入力のいずれかの側にテキスト、ボタン、またはボタン グループを追加して、フォーム コントロールを簡単に拡張します。
基本的な例
入力の両側にアドオンまたはボタンを 1 つ配置します。入力の両側に配置することもできます。<label>
s を入力グループの外に配置することを忘れないでください。
ラッピング
flex-wrap: wrap
入力グループ内のカスタム フォーム フィールドの検証に対応するために、入力グループはデフォルトでラップされます。でこれを無効にすることができ.flex-nowrap
ます。
サイジング
相対フォーム サイズ クラスを.input-group
それ自体に追加すると、その中のコンテンツが自動的にサイズ変更されます。各要素でフォーム コントロール サイズ クラスを繰り返す必要はありません。
個々の入力グループ要素のサイズ変更はサポートされていません。
チェックボックスとラジオ
テキストの代わりに、入力グループのアドオン内にチェックボックスまたはラジオ オプションを配置します。
複数<input>
の が視覚的にサポートされていますが、検証スタイルは単一の を持つ入力グループでのみ使用できます<input>
。
複数のアドオン
複数のアドオンがサポートされており、チェックボックスおよびラジオ入力バージョンと混在させることができます。
入力グループには、カスタム選択とカスタム ファイル入力のサポートが含まれています。これらのブラウザのデフォルト バージョンはサポートされていません。
カスタム選択
アクセシビリティ
支援技術のユーザーにその目的を伝えることができるように、すべてのフォーム コントロールに適切なアクセス可能な名前が付けられていることを確認してください。これを実現する最も簡単な方法は、要素を使用するか、ボタンの場合はコンテンツ<label>
の一部として十分に説明的なテキストを含めることです。<button>...</button>
可視または適切なテキスト コンテンツを含めることができない状況では、次のよう<label>
なアクセス可能な名前を提供する別の方法があります。
<label>
.visually-hidden
クラスを使用して要素を非表示にする
- を使用してラベルとして機能できる既存の要素を指す
aria-labelledby
title
属性の提供
- を使用して要素にアクセス可能な名前を明示的に設定する
aria-label
これらのいずれも存在しない場合、支援技術は、および要素placeholder
のアクセス可能な名前のフォールバックとして属性を使用することに頼る場合があります。このセクションの例では、いくつかの推奨されるケース固有のアプローチを示します。<input>
<textarea>
視覚的に隠されているコンテンツ ( .sr-only
、aria-label
、およびplaceholder
フォーム フィールドにコンテンツが含まれると消えるコンテンツ) を使用することは支援技術ユーザーにとって有益ですが、ラベル テキストが表示されないことは、特定のユーザーにとって依然として問題となる可能性があります。アクセシビリティとユーザビリティの両方の点で、一般に、何らかの形式の可視ラベルが最善のアプローチです。