Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
Give us a star ⭐️ on Github.

React Form Text Component

React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

Example#

Example textarea

Must be 8-20 words long.

1<CForm>
2  <CFormTextarea
3    id="exampleFormControlTextarea1"
4    label="Example textarea"
5    rows="3"
6    text="Must be 8-20 words long."
7  ></CFormTextarea>
8</CForm>

If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.

1<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
2<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
3<CFormText component="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>

Disabled#

Add the disabled boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.

1<CFormTextarea
2  className="mb-3"
3  placeholder="Disabled textarea"
4  aria-label="Disabled textarea example"
5  disabled
6></CFormTextarea>

Readonly#

Add the readOnly boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.

1<CFormTextarea
2  placeholder="Readonly textarea"
3  aria-label="Readonly textarea example"
4  disabled
5  readOnly
6></CFormTextarea>

API#

CFormTextarea#

1import { CFormTextarea } from '@coreui/react'
2// or
3import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
feedback 4.2.0+	Provide valuable, actionable feedback.	`ReactNode`	-
feedbackInvalid 4.2.0+	Provide valuable, actionable feedback.	`ReactNode`	-
feedbackValid 4.2.0+	Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.	`ReactNode`	-
floatingLabel 4.2.0+	Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.	`ReactNode`	-
invalid	Set component validation state to invalid.	`boolean`	-
label 4.2.0+	Add a caption for a component.	`ReactNode`	-
onChange	Method called immediately after the `value` prop changes.	`ChangeEventHandler<HTMLTextAreaElement>`	-
plainText	Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.	`boolean`	-
readOnly	Toggle the readonly state for the component.	`boolean`	-
text 4.2.0+	Add helper text to the component.	`ReactNode`	-
tooltipFeedback 4.2.0+	Display validation feedback in a styled tooltip.	`boolean`	-
valid	Set component validation state to valid.	`boolean`	-
value	The `value` attribute of component.	`string` \| `number` \| `string[]`	-

CFormFeedback#

1import { CFormFeedback } from '@coreui/react'
2// or
3import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
component	Component used for the root node. Either a string to use a HTML element or a component.	`string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>`	-
invalid	Method called immediately after the `value` prop changes.	`boolean`	-
tooltip	If your form layout allows it, you can display validation feedback in a styled tooltip.	`boolean`	-
valid	Set component validation state to valid.	`boolean`	-

CFormLabel#

1import { CFormLabel } from '@coreui/react'
2// or
3import CFormLabel from '@coreui/react/src/components/form/CFormLabel'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
customClassName	A string of all className you want to be applied to the component, and override standard className value.	`string`	-

CFormText#

1import { CFormText } from '@coreui/react'
2// or
3import CFormText from '@coreui/react/src/components/form/CFormText'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
component	Component used for the root node. Either a string to use a HTML element or a component.	`string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0.CoreUI PRO requires a commercial license.