Floating labels

Create beautifully simple form labels that float over your input fields.

On this page

Example

Wrap a pair of FormFloating elements in .form-floating to enable floating labels with Bootstrap's textual form fields.

A placeholder is required on each FormInput as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

Also note that the FormInput must come first so we can utilize a sibling selector (e.g., ~.

vue
<template>
  <BFormFloating margin="b-3">
    <BFormInput
      id="floatingInput"
      type="email"
      placeholder="name@example.com"
    />
    <BFormLabel for="floatingInput">
      Email address
    </BFormLabel>
  </BFormFloating>
  <BFormFloating>
    <BFormInput
      id="floatingPassword"
      type="password"
      placeholder="Password"
    />
    <BFormLabel for="floatingPassword">
      Password
    </BFormLabel>
  </BFormFloating>
</template>

When there's a value already defined, FormLabels will automatically adjust to their floated position.

vue
<template>
  <BFormFloating>
    <BFormInput
      id="floatingInputValue"
      type="email"
      placeholder="name@example.com"
      value="test@example.com"
    />
    <BLabel for="floatingInputValue">
      Input with value
    </BLabel>
  </BFormFloating>
</template>

Form validation styles also work as expected.

vue
<template>
  <BFormFloating>
    <BFormInput
      id="floatingInputInvalid"
      type="email"
      valid="false"
      placeholder="name@example.com"
      value="test@example.com"
    />
    <BFormLabel for="floatingInputInvalid">
      Invalid input
    </BFormLabel>
  </BFormFloating>
</template>

Textareas

By default, FormTextareas will be the same height as FormInputs.

vue
<template>
  <BFormFloating>
    <BFormTextarea
      id="floatingTextarea"
      placeholder="Leave a comment here"
    />
    <BFormLabel for="floatingTextarea">
      Comments
    </BFormLabel>
  </BFormFloating>
</template>

To set a custom height on your FormTextarea, do not use the rows attribute.

Instead, set an explicit height (either inline or via custom CSS).

vue
<template>
  <BFormFloating>
    <BFormTextarea
      id="floatingTextarea2"
      placeholder="Leave a comment here"
      style="height: 100px"
    />
    <BFormLabel for="floatingTextarea2">
      Comments
    </BFormLabel>
  </BFormFloating>
</template>

Selects

Other than FormControl, floating labels are only available on FormSelects.

They work in the same way, but unlike FormInputs, they'll always show the FormLabel in its floated state.

Selects with size and multiple are not supported.

vue
<template>
  <BFormFloating>
    <BFormSelect
      id="floatingSelect"
      aria-label="Floating label select example"
    >
      <b-option selected>
        Open this select menu
      </b-option>
      <b-option value="1">
        One
      </b-option>
      <b-option value="2">
        Two
      </b-option>
      <b-option value="3">
        Three
      </b-option>
    </BFormSelect>
    <BFormLabel for="floatingSelect">
      Works with selects
    </BFormLabel>
  </BFormFloating>
</template>

Layout

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

vue
<template>
  <Row gutter="2">
    <Col col="md">
      <BFormFloating>
        <BFormInput
          id="floatingInputGrid"
          type="email"
          placeholder="name@example.com"
          value="test@example.com"
        />
        <BFormLabel for="floatingInputGrid">
          Email address
        </BFormLabel>
      </BFormFloating>
    </Col>

    <!-- <div class="col-md"> -->
    <Col col="md">
      <BFormFloating>
        <BFormSelect
          id="floatingSelectGrid"
          aria-label="Floating label select example"
        >
          <b-option selected>
            Open this select menu
          </b-option>
          <b-option value="1">
            One
          </b-option>
          <b-option value="2">
            Two
          </b-option>
          <b-option value="3">
            Three
          </b-option>
        </BFormSelect>
        <BFormLabel for="floatingSelectGrid">
          Works with selects
        </BFormLabel>
      </BFormFloating>
    </Col>
  </Row>
</template>