e958cd2637
While it is understood that this is just an example, the visible text (label) of "Works with selects" and the `aria-label="Floating label select example"` created a [WCAG 2.5.3 Label in name](https://www.w3.org/WAI/WCAG21/quickref/#label-in-name) failure. As the `aria-label` isn't necessary here since this `select` is already provided an accessible name by its `label` element, removing the unnecessary `aria-label` seems the best course of action as: * removing it solves the WCAG issue * it removes the potential implication to developers that they'd even _need_ an `aria-label` here, let alone indirectly suggesting that it's ok for the visible text and accessible name to be out of alignment
3.8 KiB
| layout | title | description | group | toc |
|---|---|---|---|---|
| docs | Floating labels | Create beautifully simple form labels that float over your input fields. | forms | true |
Example
Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap's textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).
{{< example >}}
When there's a value already defined, <label>s will automatically adjust to their floated position.
{{< example >}}
{{< /example >}}Form validation styles also work as expected.
{{< example >}}
{{< /example >}}Textareas
By default, <textarea>s with .form-control will be the same height as <input>s.
{{< example >}}
To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).
{{< example >}}
Selects
Other than .form-control, floating labels are only available on .form-selects. They work in the same way, but unlike <input>s, they'll always show the <label> in its floated state. Selects with size and multiple are not supported.
{{< example >}}
Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.
{{< example >}}
Sass
Variables
{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}