インプットグループ

入力要素(input , textarea , etc.)の前後にテキスト、ボタンなどの補助機能を配置するための拡張用コンポーネント。

基本例

前置の場合

構造

• グループ外枠 div.input-group
  • 前置グループ div.input-group-prepend
    span.input-group-text 属性
    • (アクセシビリティ)属性 id="basic-addon1"
    • テキスト @
  • フォームコントロール input.form-control 属性
    • 属性 type="text"
    • 属性 placeholder="Username"
    • アクセシビリティ属性 aria-label="Username"
    • アクセシビリティ属性 aria-describedby="basic-addon1"

(公式ドキュメントより)使用上のガイドラインは次の通り。

• インプットグループ中にフォームコントロールは1つのみ
  • これを守らないとBootstrap 4方式バリデーションを用いる場合に問題を生じる
• ラベル label はインプットグループの外部に用いる
  • これを守らないとアクセシビリティ上の支障を生じる可能性がある

後置の場合

構造

• グループ外枠(前置と同じ)
  • フォームコントロール input.form-control : 設定は前置と同様(略)
  • 後置グループ div.input-group-append
    • 以下設定は前置と同様(略)

ラベル label の使用例

Your vanity URL 構造

• label はインプットグループの外部(それを指し示す位置)に用いる 属性
  • 属性(例) for="basic-url" (インプットグループ内の input のIDと同じ)
  • テキスト Your vanity URL
• グループ外枠(以下前置の基本例と同様)

前後両方のグループを用いる例

構造

• グループ外枠
  • 前置グループ
  • フォームコントロール
  • 後置グループ

テキストエリア textarea の使用例

構造

• グループ外枠
  • 前置グループ
  • テキストエリア textarea.form-control

サイズ設定

グループ外枠に .input-group-(sm|lg) を追加する。

div.input-group.input-group-sm

div.input-group

div.input-group.input-group-lg

チェックボックス、ラジオボタン

チェックボックス

ラジオボタン

構造

• グループ外枠
  • 前置グループ div.input-group-prepend
    • div.input-group-text (背景塗りつぶし用)
      • チェックボックス/ラジオ - インライン配置 (詳しい設定はリンク先参照)

複数の入力コントロール

構造

• グループ外枠
  • 前置グループ
  • フォームコントロール input.form-control (×2) (3以上も可、等分配置)

バリデーション

この構成は入力コントロールは1つだけという規則に従っていないため、Bootstrap 4方式バリデーションで問題を生じる。ただし不正(invalid)時に共通のメッセージを表示するという仕様であれば矛盾は生じない。次の設定例を参照。

構造

• グループ外枠 属性
  • バリデーション状態表示のため .was-validated を追加
  • 前置グループ
  • フォームコントロール input.form-control (×2) 属性
    • 属性 required を追加
  • 不正時メッセージ div.invalid-response
    • テキスト Please input your name

複数のアドオン

構造

• グループ外枠
  • 前置グループ1 $
  • 前置グループ2 0.00
  • フォームコントロール

構造

• グループ外枠
  • フォームコントロール
  • 後置グループ1 $
  • 後置グループ2 0.00

ボタンアドオン

構造

• グループ外枠
  • 前置グループ div.input-group-prepend
    • アウトラインボタン button.btn.btn-outline-secondary 属性
      • 属性 type="button"
      • テキスト Button
  • フォームコントロール

構造

• グループ外枠
  • フォームコントロール
  • 後置グループ div.input-group-append
    • アウトラインボタン (設定は同じ)

構造

• グループ外枠
  • 前置グループ
    • アウトラインボタン (×2)
  • フォームコントロール

構造

• グループ外枠
  • フォームコントロール
  • 後置グループ
    • アウトラインボタン (×2)

ドロップダウン

構造

• グループ外枠
  • 前置グループ div.input-group-prepend
    • アウトラインボタン + ドロップダウン button.btn.btn-outline-secondary 属性
      • クラス .dropdown-toggle
      • 属性 type="button"
      • 属性 data-toggle="dropdown"
      • アクセシビリティ属性 aria-haspopup="true"
      • アクセシビリティ属性 aria-expanded="false"
      • テキスト Dropdown
    • メニュー(アイテムリスト) div.dropdown-menu
      • 内部(メニューアイテム)の設定は ドロップダウン - 基本例 を参照
  • フォームコントロール

構造

• グループ外枠
  • フォームコントロール
  • 後置グループ div.input-group-append
    • アウトラインボタン + ドロップダウン
    • アイテムリスト

スプリットボタン

構造

• グループ外枠
  • 前置グループ div.input-group-prepend
    • アウトラインボタン button.btn.btn-outline-secondary 属性
      • 属性 type="button"
      • テキスト Action
    • スプリットボタン button.btn.btn-outline-secondary 属性
      • クラス .dropdown-toggle
      • クラス .dropdown-toggle-split
      • 属性 type="button"
      • 属性 data-toggle="dropdown"
      • アクセシビリティ属性 aria-haspopup="true"
      • アクセシビリティ属性 aria-expanded="false"
      • スクリーンリーダ用要素 span.sr-only
        • テキスト Toggle Dropdown
    • アイテムリスト div.dropdown-menu
      • 内部の設定は ドロップダウン - 基本例 を参照
  • フォームコントロール

構造

• グループ外枠
  • フォームコントロール
  • 後置グループ div.input-group-append
    • アウトラインボタン
    • スプリットドロップダウン
    • アイテムリスト

カスタムフォームコントロール

カスタムフォームコントロールを用いた応用例。

カスタム select

構造

• グループ外枠
• 前置グループ
  • ラベル label.input-group-text 属性
    • 属性 for="inputGroupSelect1"
    • テキスト Options
• カスタムselect select.custom-select 属性
  • 属性 id="inputGroupSelect1"
  • アイテム option ... (×4)

構造

• グループ外枠
• カスタムselect
• 後置グループ

構造

• グループ外枠
• 前置グループ
  • アウトラインボタン
• カスタムselect

構造

• グループ外枠
• カスタムselect
• 後置グループ
  • アウトラインボタン

カスタムファイルブラウザ

構造

• グループ外枠
• 前置グループ (アップロード)
• カスタムファイルブラウザ div.custom-file
  • コントロール code input.custom-file-input 属性
    • 属性 id="inputGroupFile1"
    • 属性 type="file"
  • ラベル label.custom-file-label 属性
    • 属性 for="inputGroupFile1"
    • テキスト 選択されていません

構造

• グループ外枠
• カスタムファイルブラウザ (Browseまで)
• 後置グループ (アップロード)

構造

• グループ外枠
• 前置グループ
• アウトラインボタン
• カスタムファイルブラウザ

構造

• グループ外枠
• カスタムファイルブラウザ
• 後置グループ
• アウトラインボタン

ジャンボトロン

例1 (基本構成)

構造

• div.jumbotron
  • h1.display-4
    • タイトル Hello, world!
  • p.lead
    • テキスト This is a simple hero unit, ...
  • hr.my-4
  • p
    • テキスト It uses utility classes ...
  • p.lead
    • a.btn.btn-primary.btn-lg 属性
      • 属性 href="#"
      • アクセシビリティ属性 role="button"
      • テキスト Learn more

例2 (バリエーション)

構造