React Form Textarea Component

Form Textarea

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

Available in Other JavaScript Frameworks

CoreUI React Form Textarea Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

Example

import React from 'react'
import { CForm, CFormTextarea } from '@coreui/react'

export const FormTextareaExample = () => {
  return (
    <CForm>
      <CFormTextarea
        id="exampleFormControlTextarea1"
        label="Example textarea"
        rows={3}
        text="Must be 8-20 words long."
      ></CFormTextarea>
    </CForm>
  )
}

import React from 'react'
import { CForm, CFormTextarea } from '@coreui/react'

export const FormTextareaExample = () => {
  return (
    <CForm>
      <CFormTextarea
        id="exampleFormControlTextarea1"
        label="Example textarea"
        rows={3}
        text="Must be 8-20 words long."
      ></CFormTextarea>
    </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.

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

With form field

Wrap the control in <CFormField> to lay it out with its label and description, and to get validation feedback in the right place.

import React from 'react'
import { CFormField, CFormLabel, CFormText, CFormTextarea } from '@coreui/react'

export const FormTextareaFormFieldExample = () => {
  return (
    <CFormField>
      <CFormLabel htmlFor="textareaField">Message</CFormLabel>
      <CFormTextarea id="textareaField" rows={3} />
      <CFormText>Be sure to include the relevant details.</CFormText>
    </CFormField>
  )
}

import React from 'react'
import { CFormField, CFormLabel, CFormText, CFormTextarea } from '@coreui/react'

export const FormTextareaFormFieldExample = () => {
  return (
    <CFormField>
      <CFormLabel htmlFor="textareaField">Message</CFormLabel>
      <CFormTextarea id="textareaField" rows={3} />
      <CFormText>Be sure to include the relevant details.</CFormText>
    </CFormField>
  )
}

Disabled

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

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaDisabledExample = () => {
  return (
    <CFormTextarea
      className="mb-4"
      placeholder="Disabled textarea"
      aria-label="Disabled textarea example"
      disabled
    ></CFormTextarea>
  )
}

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaDisabledExample = () => {
  return (
    <CFormTextarea
      className="mb-4"
      placeholder="Disabled textarea"
      aria-label="Disabled textarea example"
      disabled
    ></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.

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaReadonlyExample = () => {
  return (
    <CFormTextarea
      placeholder="Readonly textarea"
      aria-label="Readonly textarea example"
      disabled
      readOnly
    ></CFormTextarea>
  )
}

import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaReadonlyExample = () => {
  return (
    <CFormTextarea
      placeholder="Readonly textarea"
      aria-label="Readonly textarea example"
      disabled
      readOnly
    ></CFormTextarea>
  )
}

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.