Floating labels

    Create beautifully simple form labels that float over your input fields.

    Example

    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.

    Textareas

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

    Selects

    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.

    Layout

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

    Customizing rendering

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

    API

    Form.Floatingview source file

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'form-floating'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    FloatingLabelview source file

    import FloatingLabel from 'react-bootstrap/FloatingLabel'Copy import code for the FloatingLabel component
    NameTypeDefaultDescription
    as
    elementType

    You can use a custom element type for this component.

    controlId
    string

    Sets id on <FormControl> and htmlFor on <label>.

    label required
    node

    Form control label.