React Form Text Component

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

Example#

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'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
disabledToggle 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-
invalidSet component validation state to invalid.boolean-
label
4.2.0+
Add a caption for a component.ReactNode-
onChangeMethod called immediately after the value prop changes.ChangeEventHandler<HTMLTextAreaElement>-
plainTextRender 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-
readOnlyToggle 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-
validSet component validation state to valid.boolean-
valueThe value attribute of component.string | number | string[]-

CFormFeedback#

1import { CFormFeedback } from '@coreui/react'
2// or
3import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-
invalidMethod called immediately after the value prop changes.boolean-
tooltipIf your form layout allows it, you can display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-

CFormLabel#

1import { CFormLabel } from '@coreui/react'
2// or
3import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
customClassNameA 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'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-