---
title: Floating labels
description: Create beautifully simple form labels that float over your input fields.
toc: true
---

## Example

Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap’s textual form fields.

A non-empty `placeholder` attribute is required on each `<input>` as our CSS-only floating label implementation relies on the `:placeholder-shown` pseudo-element to detect when the input is empty. The placeholder text itself is not visible; only the `<label>` is shown to users.

Also note that the `<input>` must come first so we can utilize a sibling selector (i.e., `~`).

<Example code={`
    
    Email address

    Password
  
`} />

When there’s a `value` already defined, `<label>`s will automatically adjust to their floated position.

<Example code={`
    
    Input with value
  
`} />

Form validation styles also work as expected.

<Example code={`
    
    Invalid input
  
`} />

## Textareas

By default, `<textarea>`s with `.form-control` will be the same height as `<input>`s.

<Example code={`
    
    Comments
  
`} />

To set a custom height on your `<textarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).

<Example code={`
    
    Comments
  
`} />

## Selects

Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they’ll always show the `<label>` in its floated state. **Selects with `size` and `multiple` are not supported.**

<Example code={`
    
      Open this select menu
      One
      Two
      Three
    
    Works with selects
  
`} />

## Disabled

Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.

<Example code={`
    
    Email address

    Comments

    Disabled textarea with some text inside
    Comments

      Open this select menu
      One
      Two
      Three
    
    Works with selects
  
`} />

## Readonly plaintext

Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout.

<Example code={`
    
    Empty input

    Input with value
  
`} />

## Input groups

Floating labels also support `.input-group`.

<Example code={`
    @

      Username

`} />

When using `.input-group` and `.form-floating` along with form validation, the `-feedback` should be placed outside of the `.form-floating`, but inside of the `.input-group`. This means that the feedback will need to be shown using javascript.

<Example code={`
    @

      Username

      Please choose a username.

`} />

## Layout

When working with the Bootstrap grid system, be sure to place form elements within column classes.

<Example code={`

        Email address

          Open this select menu
          One
          Two
          Three
        
        Works with selects

`} />

## CSS

### Sass variables

<ScssDocs name="form-floating-variables" file="scss/_variables.scss" />
