Vue Bootstrap Floating labels Component

Floating labels with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s Vue Floating labels component with Bootstrap styles for flexible, framework-consistent UI.

On this page

Example

Use floatingLabel property on <CFormInput>, <CFormSelect> or <CFormTextarea> to enable floating labels with textual form fields. A placeholder is required on each <CFormInput>, <CFormSelect> and <CFormTextarea> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. The placeholder stays hidden while the label rests in the field, and shows under the floated label once the field has focus.

vue

<template>
  <CFormInput
    id="floatingInput"
    class="mb-4"
    type="email"
    floating-label="Email address"
    placeholder="[email protected]"
  />
  <CFormInput
    id="floatingPassword"
    type="password"
    floating-label="Password"
    placeholder="••••••••"
  />
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>

You can create the same form control by wrapping a pair of <CFormInput> and <CFormLabel> elements in <CFormFloating> to enable floating labels with textual form fields. A placeholder is required on each <CFormInput> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Write the <CFormLabel> first, so a screen reader announces it before the field’s value. The control-first order keeps working.

<CFormFloating class="mb-4">
  <CFormLabel for="floatingInput">Email address</CFormLabel>
  <CFormInput type="email" id="floatingInput" placeholder="[email protected]" />
</CFormFloating>
<CFormFloating>
  <CFormLabel for="floatingPassword">Password</CFormLabel>
  <CFormInput type="password" id="floatingPassword" placeholder="••••••••" />
</CFormFloating>

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

vue

<template>
  <CFormFloating>
    <CFormInput
      id="floatingInputValue"
      type="email"
      floating-label="Input with value"
      placeholder="[email protected]"
      value="[email protected]"
    />
  </CFormFloating>
</template>

<script setup>
import { CFormFloating, CFormInput } from '@coreui/vue'
</script>

Form validation styles also work as expected.

vue

<template>
  <CFormInput
    id="floatingInputInvalid"
    class="mb-4"
    type="email"
    floating-label="Email addresss"
    placeholder="[email protected]"
    validation-state="valid"
    value="[email protected]"
  />
  <CFormInput
    id="floatingInputInvalid"
    type="email"
    validation-state="invalid"
    floating-label="Email addresss"
    placeholder="[email protected]"
    value="[email protected]"
  />
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>

Textareas

By default, <CFormTextarea>s will be the same height as <CFormInput>s.

vue

<template>
  <CFormFloating>
    <CFormTextarea
      id="floatingTextarea"
      floating-label="Comments"
      placeholder="Leave a comment here"
    ></CFormTextarea>
  </CFormFloating>
</template>

<script setup>
import { CFormFloating, CFormTextarea } from '@coreui/vue'
</script>

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

vue

<template>
  <CFormFloating>
    <CFormTextarea
      id="floatingTextarea2"
      placeholder="Leave a comment here"
      floating-label="Comments"
      style="height: 100px"
    ></CFormTextarea>
  </CFormFloating>
</template>

<script setup>
import { CFormFloating, CFormTextarea } from '@coreui/vue'
</script>

Selects

Other than <CFormInput>, floating labels are only available on <CFormSelect>s. They work in the same way, but unlike <CFormInput>s, they’ll always show the <CFormLabel> in its floated state. Selects with size and multiple are not supported.

vue

<template>
  <CFormFloating>
    <CFormSelect
      id="floatingSelect"
      floating-label="Works with selects"
      aria-label="Floating label select example"
    >
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CFormSelect>
  </CFormFloating>
</template>

<script setup>
import { CFormFloating, CFormSelect } from '@coreui/vue'
</script>

Date and time

Date, time, datetime-local, month, and week inputs also always show the label in its floated state. These controls do not support placeholders the way textual inputs do, so a placeholder is not required (and is ignored by most browsers on these types). For a field that formats its value by locale, use the Date Picker or the Time Picker with the floatingLabel property.

vue

<template>
  <div class="mb-4">
    <CFormInput id="floatingDate" type="date" floating-label="Date" />
  </div>
  <CFormInput id="floatingTime" type="time" floating-label="Time" />
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>

Always floating

Set floatingLabelAlways on the form control, or always on <CFormFloating>, to keep the label floated and show the placeholder.

vue

<template>
  <div class="mb-4">
    <CFormInput
      id="alwaysFloatingInput"
      type="email"
      floating-label="Email address"
      floating-label-always
      placeholder="[email protected]"
    />
  </div>
  <CFormFloating always>
    <CFormLabel for="alwaysFloatingPassword">Password</CFormLabel>
    <CFormInput id="alwaysFloatingPassword" type="password" placeholder="••••••••" />
  </CFormFloating>
</template>

<script setup>
import { CFormFloating, CFormInput, CFormLabel } from '@coreui/vue'
</script>

The date and time pickers take floatingLabelAlways as well.

vue

<template>
  <CDatePicker floating-label="Delivery date" floating-label-always locale="en-US" />
</template>

<script setup>
import { CDatePicker } from '@coreui/vue-pro'
</script>

By default, placeholders stay transparent until the control is focused. With floatingLabelAlways, the placeholder stays visible in both states, so keep it short on a textarea, where the floated label covers its first line.

Layout

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

vue

<template>
  <CRow :xs="{ gutter: 3 }">
    <CCol md>
      <CFormFloating>
        <CFormInput
          id="floatingInputGrid"
          type="email"
          floating-label="Email address"
          placeholder="[email protected]"
          value="[email protected]"
        />
      </CFormFloating>
    </CCol>
    <CCol md>
      <CFormFloating>
        <CFormSelect
          id="floatingSelectGrid"
          floating-label="Works with selects"
          aria-label="Floating label select example"
        >
          <option>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </CFormSelect>
      </CFormFloating>
    </CCol>
  </CRow>
</template>

<script setup>
import { CRow, CCol, CFormFloating, CFormInput, CFormSelect } from '@coreui/vue'
</script>