Validation

    Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

    Native HTML5 form validation

    For native HTML form validation–available in all our supported browsers, the :valid and :invalid pseudo selectors are used to apply validation styles as well as display feedback messages.

    Bootstrap scopes the :valid and :invalid styles to parent .was-validated class, usually applied to the <Form> (you can use the validated prop as a shortcut). Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).

    Form libraries and server-rendered styles

    It's often beneficial (especially in React) to handle form validation via a library like Formik, or react-formal. In those cases, isValid and isInvalid props can be added to form controls to manually apply validation styles. Below is a quick example integrating with Formik.

    Tooltips

    If your form layout allows it, you can use the tooltip prop to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.

    Input group validation

    To properly show rounded corners in an <InputGroup> with validation, the <InputGroup> requires the hasValidation prop.

    API

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

    You can use a custom element type for this component.

    tooltip
    boolean
    false

    Display feedback as a tooltip.

    type
    'valid' | 'invalid'
    'valid'

    Specify whether the feedback is for valid or invalid fields