If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️Star🙏

React Form Text Component

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

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.

Code licensed MIT, docs CC BY 3.0.