Floating labels

Labels that float over their form controls.

Bootstrap’s floating labels docs describe the markup and CSS.

Example

Put a bsLabel and then a bsFormControl in a bsFormFloating. The label comes first so screen readers announce it before the value. Text controls need a non-empty placeholder, which Bootstrap’s CSS uses to detect an empty control. It stays hidden until the control is focused.

Email address

Password

HTML

<div class="vstack gap-3">
  <div bsFormFloating>
    <label bsLabel>Email address</label>
    <input type="email" bsFormControl placeholder="[email protected]" autocomplete="email" />
  </div>
  <div bsFormFloating>
    <label bsLabel>Password</label>
    <input type="password" bsFormControl placeholder="Password" autocomplete="current-password" />
  </div>
</div>

Validation

Validation styles work as for other controls. Put the floating label in a bsFormField for feedback.

Email address

Please enter a valid email address.

<div bsFormField>
  <div bsFormFloating>
    <label bsLabel>Email address</label>
    <input type="email" bsFormControl placeholder="[email protected]" [formControl]="email" />
  </div>
  <div bsInvalidFeedback>Please enter a valid email address.</div>
</div>

Textareas

For a taller textarea, set the --bs-form-floating-height CSS variable on the wrapper instead of rows.

Comments

Longer comments

HTML

<div class="vstack gap-3">
  <div bsFormFloating>
    <label bsLabel>Comments</label>
    <textarea bsFormControl placeholder="Leave a comment here"></textarea>
  </div>
  <div bsFormFloating style="--bs-form-floating-height: 100px">
    <label bsLabel>Longer comments</label>
    <textarea bsFormControl placeholder="Leave a comment here"></textarea>
  </div>
</div>

Selects

Selects always show the floated label. Selects with size or multiple aren’t supported.

Works with selects

HTML

<div bsFormFloating>
  <label bsLabel>Works with selects</label>
  <select bsFormControl>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Date and time

Date, time, datetime-local, month and week inputs also always show the floated label. They don’t support placeholders like text inputs, so they don’t need one.

Date

Time

HTML

<div class="vstack gap-3">
  <div bsFormFloating>
    <label bsLabel>Date</label>
    <input type="date" bsFormControl />
  </div>
  <div bsFormFloating>
    <label bsLabel>Time</label>
    <input type="time" bsFormControl />
  </div>
</div>

Disabled and plain text

Disabled controls and bsFormControl="plaintext" work too, for example to switch between editing and showing a value.

Disabled email

Plain text email

HTML

<div class="vstack gap-3">
  <div bsFormFloating>
    <label bsLabel>Disabled email</label>
    <input type="email" bsFormControl placeholder="[email protected]" disabled />
  </div>
  <div bsFormFloating>
    <label bsLabel>Plain text email</label>
    <input
      type="email"
      bsFormControl="plaintext"
      readonly
      placeholder="[email protected]"
      value="[email protected]" />
  </div>
</div>

Input groups

Floating labels also work in a bsInputGroup. The wrapper mirrors the control’s validation state, so the group’s borders stay right.

Username

HTML

<div bsInputGroup>
  <span bsInputGroupText>&#64;</span>
  <div bsFormFloating>
    <label bsLabel>Username</label>
    <input bsFormControl placeholder="Username" />
  </div>
</div>

Always floating

Add always to keep the label floated and the placeholder visible, even when the control is empty and unfocused.

Email address

Password

HTML

<div class="vstack gap-3">
  <div bsFormFloating always>
    <label bsLabel>Email address</label>
    <input type="email" bsFormControl placeholder="[email protected]" autocomplete="email" />
  </div>
  <div bsFormFloating always>
    <label bsLabel>Password</label>
    <input type="password" bsFormControl placeholder="••••••••" autocomplete="new-password" />
  </div>
</div>

Layout

In a grid, put floating labels inside columns.

Email address

Works with selects

HTML

<div class="row g-2">
  <div class="md:col">
    <div bsFormFloating>
      <label bsLabel>Email address</label>
      <input type="email" bsFormControl placeholder="[email protected]" value="[email protected]" />
    </div>
  </div>
  <div class="md:col">
    <div bsFormFloating>
      <label bsLabel>Works with selects</label>
      <select bsFormControl>
        <option selected>Open this select menu</option>
        <option value="1">One</option>
      </select>
    </div>
  </div>
</div>

API

BsFormFloating

Selector: [bsFormFloating] · Exported as: bsFormFloating

Inputs

Name	Type	Default	Description
`always`	`boolean`	`false`	Keeps the label floated and the placeholder visible.

Methods

Name	Type	Description
`controlId`	`Signal<string \| null>`	Id of the control inside the wrapper.