Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

import Form from 'react-bootstrap/Form'; function NoLabelExample () { return ( <> <Form.Check aria-label="option 1" /> <Form.Check type="radio" aria-label="radio 1" /> </> ); } export default …

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

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 …

Block-level help text in forms can be created using <Form.Text>. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

import Form from 'react-bootstrap/Form'; function SelectBasicExample() { return ( <Form.Select aria-label="Default select example">

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 …