React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
1<CForm>2 <CFormTextarea3 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>
Add the disabled
boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.
1<CFormTextarea2 className="mb-3"3 placeholder="Disabled textarea"4 aria-label="Disabled textarea example"5 disabled6></CFormTextarea>
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<CFormTextarea2 placeholder="Readonly textarea"3 aria-label="Readonly textarea example"4 disabled5 readOnly6></CFormTextarea>
1import { CFormTextarea } from '@coreui/react'2// or3import 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[] | - |
1import { CFormFeedback } from '@coreui/react'2// or3import 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 | - |
1import { CFormLabel } from '@coreui/react'2// or3import 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 | - |
1import { CFormText } from '@coreui/react'2// or3import 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> | - |