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., ~.
<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.
<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.
<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.
<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).
<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.
<template>
<BFormFloating>
<BFormSelect
id="floatingSelect"
aria-label="Floating label select example"
>
<option selected>
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</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.
<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"
>
<option selected>
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</BFormSelect>
<BFormLabel for="floatingSelectGrid">
Works with selects
</BFormLabel>
</BFormFloating>
</Col>
</Row>
</template>