メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

フローティングラベル（Floating labels） v5.0.0新設

入力フィールドに浮かぶ美しくシンプルなフォームラベルを作成。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.0.0新設

実例（Example）

1.入力フィールドに値が入っていない場合

.form-floating で <input class="form-control"> 要素と <label> 要素のペアを囲んで、Bootstrapのテキストフォームフィールドでフローティングラベルを有効にする。CSSのみのフローティングラベルのメソッドは :placeholder-shown 疑似要素を使用するため、各 <input> には placeholder が必要。そして兄弟セレクタ（例：〜）を利用できるように <input> が先に来る必要がある。

見本
Bootstrap5.0.0-alpha3～の設定例 緑背景が5.0.0-alpha3での変更箇所
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Eメールアドレス</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="パスワード">
  <label for="floatingPassword">パスワード</label>
</div>
(.form-floating.mb-3>input:email.form-control[placeholder]+label)+(.form-floating>input:p.form-control[placeholder]+label)（Eメールアドレス+パスワード）
※Bootstrap5.0.0-alpha2の設定例（実例より）赤背景が5.0.0-alpha3での変更箇所
<div class="form-label-group">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput" class="form-label">Eメールアドレス</label>
</div>

<div class="form-label-group">
  <input type="password" id="floatingPassword" class="form-control" placeholder="パスワード">
  <label for="inputPassword" class="form-label">パスワード</label>
</div>

2.入力フィールドに値が入っている場合

すでに定義されている value がある場合、<label> は自動的にフロート位置に調整される。

見本
設定例
<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputValue">Eメールアドレス</label>
</form>

3.フォーム検証スタイルの無効入力

フォーム検証スタイルも期待どおりに機能。

見本
設定例
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputInvalid">Eメールアドレス</label>
</form>
【設定】
  • .form-floating(.mb-3) > [input.form-control#ID[placeholder]《コントロール》 + label[for]《ラベル》]
【注意】
  • コントロールとラベルの順番が通常とは逆になる
  • label[for] に .form-label は不要

テキストエリア（Textareas）

1.通常の場合

デフォルトでは、.form-control を持つ <textarea> は <input> と同じ高さになる。

見本
設定例
<div class="form-floating">
  <textarea class="form-control" placeholder="コメントはこちら" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">コメント</label>
</div>

2.テキストエリアの高さを変更する場合

<textarea> にカスタムの高さを設定するには、rows 属性を使用しないで下さい。代わりに、（インラインかカスタムCSSを経由して）明示的な height を設定する。

見本
設定例
<div class="form-floating">
  <textarea class="form-control" placeholder="コメントはこちら" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">コメント</label>
</div>
【設定】
  • コントロールが textarea.form-control でも設定可能
【注意】
  • <textarea> の高さ設定に rows 属性は使用不可。任意のCSSで height の設定が必要

選択メニュー（Selects）v5.2.0設定変更

.form-control を除き、フローティングラベルは .form-select でも使用できる。これらは同じように機能するが、<input> とは異なり、常に <label> がフロート状態で表示。size や multiple 属性がある選択メニューは非対応。

見本
設定例
<div class="form-floating">
  <select class="form-select" id="floatingSelect">
    <option selected>この選択メニューを開く</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
  <label for="floatingSelect">選択で動作</label>
</div>
.form-floating>(select.form-select>option*3)+label（オプション3つの場合）
【設定】
  • コントロールが select.form-select でも設定可能
【注意】
  • 選択フィールドに値が入っていない場合でも、<label> はフロート状態で表示
  • size や multiple 属性がある選択メニューは非対応
【変更履歴】
  • 【v5.2.0】
    • .form-select 内の [aria-label] を削除（兄弟要素に <label> があるため不要）

無効化（Disabled）v5.3.0新設

入力コントロール、テキストエリア、選択メニューに disabled ブール属性を追加してグレー表示にし、ポインタイベントを削除してフォーカスするのを防ぐ。

見本
設定例
入力コントロール<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
  <label for="floatingInputDisabled">Eメールアドレス</label>
</div>
テキストエリア<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="コメントはこちら" id="floatingTextareaDisabled" disabled></textarea>
  <label for="floatingTextareaDisabled">コメント</label>
</div>
任意の高さのテキストエリア<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="コメントはこちら" id="floatingTextarea2Disabled" style="height: 100px" disabled>テキストエリアが無効になっており、中にテキストが入っている。</textarea>
  <label for="floatingTextarea2Disabled">コメント</label>
</div>
選択メニュー<div class="form-floating">
  <select class="form-select" id="floatingSelectDisabled" aria-label="フローティングラベル選択メニュー無効化の例" disabled>
    <option selected>この選択メニューを開く</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
  <label for="floatingSelectDisabled">選択で動作</label>
</div>
【設定】
  • 無効化したい入力コントロール（.form-control）に [disabled] を追加

読み取り専用プレーンテキスト（Readonly plaintext）v5.2.0新設

フローティングラベルは .form-control-plaintext もサポート。これは、ページレイアウトに影響を与えることなく、編集可能な <input> からプレーンテキストの値に切り替えるのに役立つ。

見本
設定例
入力欄が空白<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
  <label for="floatingEmptyPlaintextInput">入力欄が空白</label>
</div>
値が入力済<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
  <label for="floatingPlaintextInput">値が入力済</label>
</div>
【設定】
  • <input> 部分に [readonly].form-control-plaintext を入れる
  • 入れるテキストは、[value] で設定

インプットグループ（Input groups）v5.2.0新設

フローティングラベルは .input-group もサポート。

見本
@
設定例
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">ユーザー名</label>
  </div>
</div>

フォーム検証スタイルとともに .input-group と .form-floating を使用する場合、-feedback は .form-floating の外側、かつ .input-group の内側に配置する必要がある。これは、フィードバックをjavascriptを使用して表示する必要があることを意味する。

見本
@
ユーザー名を選択してください。
設定例
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">ユーザー名</label>
  </div>
  <div class="invalid-feedback">
    ユーザー名を選択してください。
  </div>
</div>
【設定】
  • インプットグループの <input> 部分を .form-floating で囲み、<input> の後に <label> を入れる
  • 入力検証する場合は、.valid-feedback や .invalid-feedback の部分は .form-floating の後に入れる

レイアウト（Layout）v5.2.0設定変更

Bootstrapグリッドシステムを使用する場合は、必ずフォーム要素を列クラス内に配置する。

見本
設定例
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
      <label for="floatingInputGrid">Eメールアドレス</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>この選択メニューを開く</option>
        <option value="1">その1</option>
        <option value="2">その2</option>
        <option value="3">その3</option>
      </select>
      <label for="floatingSelectGrid">選択で動作</label>
    </div>
  </div>
</div>
【設定】
  • グリッド（form.row.g-* > div.col(-{breakpoint}-*)）内に .form-floating 以下を入れる
【変更履歴】
  • 【v5.2.0】
    • 選択メニュー（.form-select）内の [aria-label] を削除（兄弟要素に <label> があるため不要）

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 form-floating-variables の設定$form-floating-height:                  add(3.5rem, $input-height-border);
$form-floating-line-height:             1.25;
$form-floating-padding-x:               $input-padding-x;
$form-floating-padding-y:               1rem;
$form-floating-input-padding-t:         1.625rem;
$form-floating-input-padding-b:         .625rem;
$form-floating-label-height:            1.5em;
$form-floating-label-opacity:           .65;
$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-label-disabled-color:    $gray-600;
$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out;