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

フローティングラベル(Floating labels) v5.0.0-alpha3新設

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。

実例(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>
※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> がフロート状態で表示。sizemultiple 属性がある選択メニューは非対応。

見本
設定例
<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>
【設定】
  • コントロールが select.form-select でも設定可能
【注意】
  • 選択フィールドに値が入っていない場合でも、<label> はフロート状態で表示
  • sizemultiple 属性がある選択メニューは非対応
【変更履歴】
  • 【v5.2.0】
    • .form-select 内の [aria-label] を削除(兄弟要素に <label> があるため不要)

読み取り専用プレーンテキスト(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> があるため不要)

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
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-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;