CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedMigration
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ undefined Star🙏
  • undefined
  • undefined

Vue Floating labels

Vue floating label component. Create beautifully simple form labels that float over your input fields.

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.

<CFormInput type="email" id="floatingInput" floatingLabel="Email address" placeholder="[email protected]" />
<CFormInput type="password" id="floatingPassword" floatingLabel="Password" placeholder="Password" />
1
2

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. Also, note that the <CFormInput> must come first so we can utilize a sibling selector (e.g., ~).

<CFormFloating class="mb-3">
  <CFormInput type="email" id="floatingInput" placeholder="[email protected]" />
  <CFormLabel for="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
  <CFormInput type="password" id="floatingPassword" placeholder="Password" />
  <CFormLabel for="exampleFormControlPassword">Password</CFormLabel>
</CFormFloating>
1
2
3
4
5
6
7
8

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

<CFormFloating>
  <CFormInput
    type="email"
    id="floatingInputValue"
    floatingLabel="Input with value"
    placeholder="[email protected]"
    value="[email protected]"
  />
</CFormFloating>
1
2
3
4
5
6
7
8
9

Form validation styles also work as expected.

<CFormInput
  class="mb-3"
  type="email"
  id="floatingInputInvalid"
  floatingLabel="Email addresss"
  placeholder="[email protected]"
  valid
  value="[email protected]"
/>
<CFormInput
  type="email"
  id="floatingInputInvalid"
  invalid
  floatingLabel="Email addresss"
  placeholder="[email protected]"
  value="[email protected]"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Textareas #

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

<CFormFloating>
  <CFormTextarea
    id="floatingTextarea"
    floatingLabel="Comments"
    placeholder="Leave a comment here"
  ></CFormTextarea>
</CFormFloating>
1
2
3
4
5
6
7

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).

<CFormFloating>
  <CFormTextarea
    placeholder="Leave a comment here"
    id="floatingTextarea2"
    floatingLabel="Comments"
    style="height: 100px"
  ></CFormTextarea>
</CFormFloating>
1
2
3
4
5
6
7
8

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.

<CFormFloating>
  <CFormSelect 
    id="floatingSelect"
    floatingLabel="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>
1
2
3
4
5
6
7
8
9
10
11
12

Layout #

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

<CRow :xs="{gutter: 2}">
  <CCol md>
    <CFormFloating>
      <CFormInput 
        type="email"
        id="floatingInputGrid"
        floatingLabel="Email address"
        placeholder="[email protected]"
        value="[email protected]"
      />
    </CFormFloating>
  </CCol>
  <CCol md>
    <CFormFloating>
      <CFormSelect 
        id="floatingSelectGrid"
        floatingLabel="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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
On this page
  • Example
  • Textareas
  • Selects
  • Layout
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

Code licensed MIT , docs CC BY 3.0 .