www/docs/forms/floating-labels.mdx
import FormFloatingBasic from '!!raw-loader!../examples/Form/FormFloatingBasic'; import FormFloatingCustom from '!!raw-loader!../examples/Form/FormFloatingCustom'; import FormFloatingLayout from '!!raw-loader!../examples/Form/FormFloatingLayout'; import FormFloatingSelect from '!!raw-loader!../examples/Form/FormFloatingSelect'; import FormFloatingTextarea from '!!raw-loader!../examples/Form/FormFloatingTextarea';
Wrap a <Form.Control> element in <FloatingLabel> to enable floating labels with
Bootstrap’s textual form fields. A placeholder is required
on each <Form.Control> as our method of CSS-only
floating labels uses the :placeholder-shown pseudo-element.
By default, <textarea>s will be the same height as <input>s. 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).
Other than <Form.Control>, floating labels are only available on <Form.Select>s.
They work in the same way, but unlike <input>s, they’ll always show the <label>
in its floated state.
When working with the Bootstrap grid system, be sure to place form elements within column classes.
<CodeBlock language="jsx" live> {FormFloatingLayout} </CodeBlock>If you need greater control over the rendering, use the <FormFloating> component
to wrap your input and label. Also note that the <Form.Control> must come first
so we can utilize a sibling selector (e.g., ~).