React Bootstrap Textarea Component
Form Textarea 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 style and enhance Bootstrap-style textarea fields in React using CoreUI components with custom sizing, disabled states, and validation feedback.
Other Frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
How to use React Bootstrap Textarea component#
Use <CFormTextarea> to create multi-line text inputs in your forms, styled to match Bootstrap’s design system.
Basic example#
Use the component with a label and help text for accessibility and usability.
You can also build the same structure manually using individual form components:
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel><CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea><CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>Disabled state#
Add the disabled prop to make the textarea inactive and visually grayed out.
Read-only#
Use the readOnly prop to prevent edits while still allowing text selection and copying.
API reference#
Refer to the API documentation below for a complete list of available props and subcomponents used to build Bootstrap-style textareas in React.