React Bootstrap Form Input Component
Form Input with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use CoreUI’s React input components styled with Bootstrap to create accessible, styled, and responsive form inputs.
How to use React Bootstrap Form Input component#
Use CoreUI’s <CFormInput> and related components styled with Bootstrap to create customizable and accessible form inputs in React. Easily control size, disabled state, readonly fields, file uploads, color pickers, and more.
Basic usage#
To build more complex form controls with labels and help text, you can compose the form manually using CoreUI components:
<CForm> <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel> <CFormInput type="email" id="exampleFormControlInput1" aria-describedby="exampleFormControlInputHelpInline" /> <CFormText as="span" id="exampleFormControlInputHelpInline"> Must be 8–20 characters long. </CFormText></CForm>Input sizing#
Change input sizes using the size prop ("sm" or "lg").
Disabled inputs#
Add the disabled prop to visually disable the input and remove pointer events.
Read-only inputs#
Use the readOnly prop to prevent editing while maintaining focus and tab behavior.
Plaintext read-only inputs#
Add plainText for inputs that appear as plain text but retain layout spacing.
File input#
Use CoreUI's <CFormInput type="file" /> for custom-styled file upload fields.
Color input#
Color inputs are supported using type="color".
API reference#
Refer to the API documentation for detailed descriptions of all the props and configuration options.