メインコンテンツへスキップ

インプットグループ(Input group) v5.0.0-alpha1設定変更

テキスト入力、カスタム選択メニュー、カスタムファイル入力の両側にテキスト、ボタン、ボタングループを追加して、フォームコントロールを簡単に拡張可能。

基本のインプットグループ(Basic example)v5.0.0-alpha1設定変更

単独のアドオンやボタンをインプットの両側に配置。また、インプットの両側に配置することも可能。<label> はインプットグループの外に置くこと。

見本

●前にアドオン

@

●後にアドオン

@example.com

●ラベル付きアドオン

https://example.com/users/

●前後にアドオン

$ .00

●間にアドオン v5.0.0-alpha3追加

@

●コントロールがテキストエリアの場合

テキストエリア付き
Bootstrap5.xの設定例 緑背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon1">@</span>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
後にアドオン<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
	<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
ラベル付きアドオン<label for="basic-url" class="form-label">ダミーURL</label>
<div class="input-group mb-3">
	<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
前後にアドオン<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
	<span class="input-group-text">.00</span>
</div>
間にアドオン<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="ユーザー名">
	<span class="input-group-text">@</span>
	<input type="text" class="form-control" placeholder="サーバー">
</div>
コントロールがテキストエリア<div class="input-group">
	<span class="input-group-text" id="basic-textarea">テキストエリア付き</span>
	<textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-addon1">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
後にアドオン<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
	<div class="input-group-append">
		<span class="input-group-text" id="basic-addon2">@example.com</span>
	</div>
</div>
ラベル付きアドオン<label for="basic-url">ダミーURL</label>
<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
	</div>
	<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
前後にアドオン<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text">$</span>
	</div>
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
	<div class="input-group-append">
		<span class="input-group-text">.00</span>
	</div>
</div>
コントロールがテキストエリア<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text" id="basic-textarea">テキストエリア付き</span>
	</div>
	<textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>
【設定】
  • 前にアドオン:.input-group > [span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 後にアドオン:.input-group > [input.form-control《コントロール》 + span.input-group-text《アドオン》]
  • ラベル付きアドオン:<label> + .input-group > [span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 間にアドオン:.input-group > [input.form-control《コントロール》 + span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 前後にアドオン:.input-group > [span.input-group-text《アドオン》 + input.form-control《コントロール》 + span.input-group-text《アドオン》]
【注意】
アクセシビリティの設定】
  • <input> には、
    • アドオンが1つだけの場合は aria-describedby 属性(アドオン部のIDを指定)
    • アドオンが2つの場合は aria-label 属性(代替テキストを指定)
    を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • アドオン:div.input-group-{prepend|append} > span.input-group-textspan.input-group-textdiv.input-group-prepend, div.input-group-append は廃止)

 

インプットグループのラッピング(Wrapping)

インプットグループ内のカスタムフォームフィールドの検証に対応するために、インプットグループはデフォルトでは flex-wrap: wrap(折り返しあり)で囲まれている。.flex-nowrap(折り返しなし)でこれを無効に。

見本
@
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="input-group flex-nowrap">
	<span class="input-group-text" id="addon-wrapping">@</span>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="addon-wrapping">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="input-group flex-nowrap">
	<div class="input-group-prepend">
		<span class="input-group-text" id="addon-wrapping">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="addon-wrapping">
</div>
【設定】
  • .input-group.flex-nowrap を追加

 

インプットグループのサイズ(Sizing)

相対的なフォームサイズのクラスを .input-group 自体に追加すると、その中の内容は自動的にサイズ変更される。各要素のフォームコントロールサイズのクラスを繰り返す必要はない。

個々のインプットグループ要素のサイズ設定はサポートされていない。

見本

●大きめ:.input-group-lg

大きめ

●小さめ:.input-group-sm

小さめ

※標準(参考)

標準
Bootstrap5.xの設定例 緑背景が変更箇所
大きめ<div class="input-group input-group-lg mb-3">
	<span class="input-group-text" id="inputGroup-sizing-lg">@</span>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-lg">
</div>
小さめ<div class="input-group input-group-sm mb-3">
	<span class="input-group-text" id="inputGroup-sizing-sm">@</span>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-sm">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
大きめ<div class="input-group input-group-lg mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroup-sizing-lg">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-lg">
</div>
小さめ<div class="input-group input-group-sm mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroup-sizing-sm">@</span>
	</div>
	<input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-sm">
</div>
【設定】
  • .input-group.input-group-{size}(上記の「サイズの種類」から選択)を追加

 

チェックボックスとラジオボタン(Checkboxes and radios)v5.0.0-beta2設定変更

インプットグループのアドオン内にテキストではなくチェックボックスやラジオボタンのオプションを配置。インプットの横に表示されるテキストがない場合は、.form-check-input.mt-0 の追加を推奨。

見本

●チェックボックスの場合

●ラジオボタンの場合

Bootstrap5.xの設定例 緑背景が変更箇所
チェックボックスの場合<div class="input-group mb-3">
	<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>
ラジオボタンの場合<div class="input-group">
	<div class="input-group-text">
		<input class="form-check-input mt-0" type="radio" value="" aria-label="...">
	</div>
	<input type="text" class="form-control" aria-label="...">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
チェックボックスの場合<div class="input-group mb-3">
	<div class="input-group-prepend">
		<div class="input-group-text">
			<input type="checkbox" value="" aria-label="...">
		</div>
	</div>
	<input type="text" class="form-control" aria-label="...">
</div>
ラジオボタンの場合<div class="input-group">
	<div class="input-group-prepend">
		<div class="input-group-text">
			<input type="radio" value="" aria-label="...">
		</div>
	</div>
	<input type="text" class="form-control" aria-label="...">
</div>
【設定】
  • チェックボックス:.input-group > [div.input-group-text > input.form-check-input.mt-0[type="checkbox"]]《アドオン》
  • ラジオボタン:.input-group > [div.input-group-text > input.form-check-input.mt-0[type="radio"]]《アドオン》
アクセシビリティの設定】
  • チェックボックスやラジオボタン部分の <input> にも aria-label 属性(代替テキストを指定)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • チェックボックスやラジオボタン部分の <input>.form-check-input を入れる
    • アドオン:div.input-group-{prepend|append} > span.input-group-textspan.input-group-text
  • 【v5.0.0-beta2】
    • .form-check-input.mt-0 を追加

 

マルチインプット(Multiple inputs)

複数の <input> が視覚的にサポートされているが、検証スタイルでは単一の <input> を持つインプットグループに対してのみ使用可能。

見本
名前と名字
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="input-group">
	<span class="input-group-text">名字と名前</span>
	<input type="text" class="form-control" aria-label="名字">
	<input type="text" class="form-control" aria-label="名前">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text">名字と名前</span>
	</div>
	<input type="text" class="form-control" aria-label="名字">
	<input type="text" class="form-control" aria-label="名前">
</div>
【設定】
  • コントロール部分に複数の input.form-control を入れる

 

マルチアドオン(Multiple addons)

複数のアドオンがサポートされており、チェックボックスやラジオボタンの入力バージョンと混在させることも可能。

見本

●前にアドオン

$ 0.00

●後にアドオン

$ 0.00
Bootstrap5.xの設定例 緑背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
</div>
後にアドオン<div class="input-group">
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
	<span class="input-group-text">$</span>
	<span class="input-group-text">0.00</span>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text">$</span>
		<span class="input-group-text">0.00</span>
	</div>
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
</div>
後にアドオン<div class="input-group">
	<input type="text" class="form-control" aria-label="ドル金額(小数点以下2桁)">
	<div class="input-group-append">
		<span class="input-group-text">$</span>
		<span class="input-group-text">0.00</span>
	</div>
</div>
【設定】
  • 片側に2つのアドオンを入れる(アドオンはチェックボックスやラジオボタン付きでも可)
  • アドオン:span.input-group-text を囲む div.input-group-prependdiv.input-group-append は不要に

 

ボタンアドオン(Button addons)v5.0.0-alpha1設定変更

アドオン部分がボタンになっている。

見本

●前にボタン

●後にボタン

●前後にボタン

●前に複数のボタン

●後に複数のボタン

Bootstrap5.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group mb-3">
	<button type="button" id="button-addon1" class="btn btn-outline-secondary">ボタン</button>
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon1">
</div>
後にボタン<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon2">
	<button type="button" id="button-addon2" class="btn btn-outline-secondary">ボタン</button>
</div>
前後にボタン<div class="input-group mb-3">
	<button type="button" class="btn btn-outline-secondary">ボタン</button>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<button type="button" class="btn btn-outline-secondary">ボタン</button>
</div>
前に複数のボタン<div class="input-group mb-3">
	<button type="button" class="btn btn-outline-secondary">ボタン</button>
	<button type="button" class="btn btn-outline-secondary">ボタン</button>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
</div>
後に複数のボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<button type="button" class="btn btn-outline-secondary">ボタン</button>
	<button type="button" class="btn btn-outline-secondary">ボタン</button>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" id="button-addon1" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon1">
</div>
後にボタン<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon2">
	<div class="input-group-append">
		<button type="button" id="button-addon2" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
前後にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
前に複数のボタン<div class="input-group mb-3">
	<div class="input-group-prepend" id="button-addon3">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon3">
</div>
後に複数のボタン<div class="input-group">
	<input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon4">
	<div class="input-group-append" id="button-addon4">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
</div>
設定例
【設定】
  • .input-group > [button.btn《ボタンアドオン》+ input.form-control]
【変更履歴】
  • 【v5.0.0-alpha1】
    • アドオン:div.input-group-{prepend|append} > button.btnbutton.btnのみに

 

ドロップダウン付きボタンアドオン(Buttons with dropdowns)v5.0.0-beta1設定変更

アドオン部分がボタンドロップダウンになっている。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group">
	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
		アクション
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">メニュー1</a></li>
		...
		<li><hr class="dropdown-divider"></li>
		...
	</ul>
	<input type="text" class="form-control" aria-label="...">
</div>
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
		アクション
	</button>
	<ul class="dropdown-menu dropdown-menu-end">
		<li><a class="dropdown-item" href="#">メニュー1</a></li>
		...
		<li><hr class="dropdown-divider"></li>
		...
	</ul>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			アクション
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-prepend -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			アクション
		</button>
		<div class="dropdown-menu dropdown-menu-right">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-append -->
</div><!-- /.input-group -->
【設定】
  • .input-group > {button.btn.dropdown-toggle[data-bs-toggle="dropdown"]《ドロップダウンボタン》 + ul.dropdown-menu > <li> > a.dropdown-item《ドロップメニュー》}《アドオン》
  • 後にボタンドロップダウンがつく場合は、ul.dropdown-menu.dropdown-menu-end を追加
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="dropdown"][data-bs-toggle="dropdown"]
    • RTL(右書き)の設定追加に伴い行末揃えのボタンドロップダウンメニューのクラス名変更
      • .dropdown-menu-right.dropdown-menu-end

 

分離ボタンのアドオン(Segmented buttons)v5.0.0-beta1設定変更

アドオン部分が分離ボタンになっている。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group">
	<button type="button" class="btn btn-outline-secondary">アクション</button>
	<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">切替ボタン</span>
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">メニュー1</a></li>
		...
		<li><hr class="dropdown-divider"></li>
		...
	</ul>
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<button type="button" class="btn btn-outline-secondary">アクション</button>
	<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">切替ボタン</span>
	</button>
	<ul class="dropdown-menu dropdown-menu-end">
		<li><a class="dropdown-item" href="#">メニュー1</a></li>
		...
		<li><hr class="dropdown-divider"></li>
		...
	</ul>
</div><!-- /.input-group -->
※Bootstrap4.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">アクション</button>
		<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-prepend -->
	<input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
	<input type="text" class="form-control" aria-label="...">
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary">アクション</button>
		<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
			<span class="sr-only">切替ボタン</span>
		</button>
		<div class="dropdown-menu dropdown-menu-right">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
			<div role="separator" class="dropdown-divider"></div>
			...
		</div><!-- /.dropdown-menu -->
	</div><!-- /.input-group-append -->
</div><!-- /.input-group -->
【設定】
  • .input-group > {button.btn《ボタン》 + button.btn.dropdown-toggle[data-bs-toggle="dropdown"]]ドロップダウンボタン》 + [ul.dropdown-menu > <li> > a.dropdown-item]《ドロップメニュー》]}《アドオン》
  • 後にボタンドロップダウンがつく場合は、ul.dropdown-menu.dropdown-menu-end を追加
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-alpha2】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="dropdown"][data-bs-toggle="dropdown"]
    • RTL(右書き)の設定追加に伴い行末揃えのボタンドロップダウンメニューのクラス名変更
      • .dropdown-menu-right.dropdown-menu-end

 

フォーム付き(Forms)v5.0.0-alpha1設定変更

インプットグループには、Bootstrapの選択メニューとファイル選択のサポートが含まれる。

選択メニュー(Form select)

見本
Bootstrap5.xの設定例 緑背景が変更箇所
設定例
前にアドオン<div class="input-group mb-3">
	<label class="input-group-text" for="inputGroupSelect01">オプション</label>
	<select class="form-select" id="inputGroupSelect01">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にアドオン<div class="input-group mb-3">
	<select class="form-select" id="inputGroupSelect02">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<label class="input-group-text" for="inputGroupSelect02">オプション</label>
</div>
前にボタン<div class="input-group mb-3">
	<button type="button" class="btn btn-outline-secondary">ボタン</button>
	<select class="form-select" id="inputGroupSelect03" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にボタン<div class="input-group">
	<select class="form-select" id="inputGroupSelect04" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<button class="btn btn-outline-secondary" type="button">ボタン</button>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<label class="input-group-text" for="inputGroupSelect01">オプション</label>
	</div>
	<select class="custom-select" id="inputGroupSelect01">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にアドオン<div class="input-group mb-3">
	<select class="custom-select" id="inputGroupSelect02">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<div class="input-group-append">
		<label class="input-group-text" for="inputGroupSelect02">オプション</label>
	</div>
</div>
前にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary">ボタン</button>
	</div>
	<select class="custom-select" id="inputGroupSelect03" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
後にボタン<div class="input-group">
	<select class="custom-select" id="inputGroupSelect04" aria-label="ボタンアドオンで選択する例">
		<option selected>選択...</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<div class="input-group-append">
		<button class="btn btn-outline-secondary" type="button">ボタン</button>
	</div>
</div>
【設定】
  • コントロールの部分を select.form-select > <option>選択メニューにする
【注意】
  • 選択メニューの幅は、メニューの幅ではなく100%になる
【変更履歴】
  • 【v5.0.0-alpha1】
    • 選択メニュー:.custom-select.form-select

ファイル選択(From file input)v5.0.0-alpha3設定変更

見本
アップロード
アップロード
Bootstrap5.0.0-alpha3~の設定例 緑背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
	<input type="file" id="inputGroupFile01" class="form-control" aria-describedby="inputGroupFileAddon01">
</div>
後にアドオン<div class="input-group mb-3">
	<input type="file" id="inputGroupFile02" class="form-control" aria-describedby="inputGroupFileAddon02">
	<span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
</div>
前にボタン<div class="input-group mb-3">
	<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
	<input type="file" id="inputGroupFile03" class="form-control" aria-describedby="inputGroupFileAddon03">
</div>
後にボタン<div class="input-group">
	<input type="file" id="inputGroupFile04" class="form-control" aria-describedby="inputGroupFileAddon04">
	<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
</div>
※Bootstrap5.0.0-alpha2の設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
	<div class="form-file">
		<input type="file" id="inputGroupFile01" class="form-file-input" aria-describedby="inputGroupFileAddon01">
		<label class="form-file-label" for="inputGroupFile01">
			<span class="form-file-text">ファイル選択...</span>
			<span class="form-file-button">参照</span>
		</label>
	</div>
</div>
後にアドオン<div class="input-group mb-3">
	<div class="form-file">
		<input type="file" id="inputGroupFile02" class="form-file-input" aria-describedby="inputGroupFileAddon02">
		<label class="form-file-label" for="inputGroupFile02">
			<span class="form-file-text">ファイル選択...</span>
			<span class="form-file-button">参照</span>
		</label>
	</div>
	<span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
</div>
前にボタン<div class="input-group mb-3">
	<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
	<div class="form-file">
		<input type="file" id="inputGroupFile03" class="form-file-input" aria-describedby="inputGroupFileAddon03">
		<label class="form-file-label" for="inputGroupFile03">
			<span class="form-file-text">ファイル選択...</span>
			<span class="form-file-button">参照</span>
		</label>
	</div>
</div>
後にボタン<div class="input-group">
	<div class="form-file">
		<input type="file" id="inputGroupFile04" class="form-file-input" aria-describedby="inputGroupFileAddon04">
		<label class="form-file-label" for="inputGroupFile04">
			<span class="form-file-text">ファイル選択...</span>
			<span class="form-file-button">参照</span>
		</label>
	</div>
	<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
	</div>
	<div class="custom-file">
		<input type="file" id="inputGroupFile01" class="custom-file-input" aria-describedby="inputGroupFileAddon01">
		<label class="custom-file-label" for="inputGroupFile01" data-browse="参照">ファイル選択...</label>
	</div>
</div>
後にアドオン<div class="input-group mb-3">
	<div class="custom-file">
		<input type="file" id="inputGroupFile02" class="custom-file-input" aria-describedby="inputGroupFileAddon02">
		<label class="custom-file-label" for="inputGroupFile02" data-browse="参照">ファイル選択...</label>
	</div>
	<div class="input-group-append">
		<span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
	</div>
</div>
前にボタン<div class="input-group mb-3">
	<div class="input-group-prepend">
		<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
	</div>
	<div class="custom-file">
		<input type="file" id="inputGroupFile03" class="custom-file-input" aria-describedby="inputGroupFileAddon03">
		<label class="custom-file-label" for="inputGroupFile03" data-browse="参照">ファイル選択...</label>
	</div>
</div>
後にボタン<div class="input-group">
	<div class="custom-file">
		<input type="file" id="inputGroupFile04" class="custom-file-input" aria-describedby="inputGroupFileAddon04">
		<label class="custom-file-label" for="inputGroupFile04" data-browse="参照">ファイル選択...</label>
	</div>
	<div class="input-group-append">
		<button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
	</div>
</div>
【設定】
  • コントロールの部分が input.form-control[type="file"] の場合は、ファイル選択のスタイルになる
【変更履歴】
  • 【v5.0.0-alpha1】
    • ファイル選択部分の設定が変更(.custom-file.form-file 等)
  • 【v5.0.0-alpha3】

取消ボタン付き

インプットグループで参照ボタンの横にファイル取消ボタンを追加(複数ファイル対応)。

ファイル名をリスト表示

ファイルを選択すると、コントロールの下にファイル名とサイズをリスト表示(複数ファイル対応)。

See the Pen Bootstrap5 Form-file List preview by cccabinet (@cccabinet) on CodePen.

画像ファイルのプレビュー

ファイルを選択すると、画像ファイルのみ画像プレビューとファイル名が表示され、画像ファイル以外ではファイル名のみが表示される(複数ファイル対応)。

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 input-group-variables の設定$input-group-addon-padding-y:           $input-padding-y;
$input-group-addon-padding-x:           $input-padding-x;
$input-group-addon-font-weight:         $input-font-weight;
$input-group-addon-color:               $input-color;
$input-group-addon-bg:                  $gray-200;
$input-group-addon-border-color:        $input-border-color;