Bootstrap5 入力ボックスグループ

Bootstrap5 入力グループ

本文では、Bootstrap5で入力グループを使用して、入力フィールドの前後にテキスト、ボタン、またはドロップダウンメニューなどの組み合わされたフォームコントロールを作成する方法について説明します。

基本構造

入力グループの基本的なHTML構造は、.input-groupコンテナと.input-group-textクラスで構成されています。


<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名">
</div>

テキストの追加

.input-group-textクラスを使用すると、入力フィールドの前後にテキストを追加できます。


<div class="input-group">
  <span class="input-group-text">金額:</span>
  <input type="text" class="form-control" aria-label="金額">
  <span class="input-group-text">円</span>
</div>

ボタンの追加

入力グループにボタンを追加するには、.btn-primaryなどの任意のボタンクラスを使用できます。


<div class="input-group">
  <button class="btn btn-primary" type="button">検索</button>
  <input type="text" class="form-control" placeholder="キーワードを入力">
</div>

ドロップダウンメニューとボタングループの追加

入力グループにドロップダウンメニューとボタングループを追加するには、.dropdownと.btn-groupクラスを使用する必要があります。


<div class="input-group">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      ドロップダウン
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">項目1</a></li>
      <li><a class="dropdown-item" href="#">項目2</a></li>
      <li><a class="dropdown-item" href="#">項目3</a></li>
    </ul>
  </div>
  <input type="text" class="form-control" aria-label="入力フィールド">
</div>

サイズ

.input-group-smと.input-group-lgクラスを使用して、入力グループのサイズを調整できます。

サイズ	クラス
小	`.input-group-sm`
大	`.input-group-lg`

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

入力グループでチェックボックスとラジオボタンを使用するには、.input-group-textクラスを使用してそれらを囲みます。


<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="チェックボックス">
  </div>
  <input type="text" class="form-control" aria-label="入力フィールド">
</div>

多重入力グループ

ネストされた入力グループを作成するには、複数の.input-groupコンテナーを使用できます。


<div class="input-group">
  <span class="input-group-text">https://</span>
  <input type="text" class="form-control" placeholder="www.example.com">
  <div class="input-group-append">
    <span class="input-group-text">.com</span>
  </div>
</div>