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" />
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>
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>
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]"
/>
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>
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>
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>
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>