React Form Text Component

Form control

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#

Must be 8-20 words long.
<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>

Disabled#

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

<CFormTextarea
className="mb-3"
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.

<CFormTextarea
placeholder="Readonly textarea"
aria-label="Readonly textarea example"
disabled
readOnly
></CFormTextarea>

Customizing#

SASS variables#

$input-* are shared across most of our form controls (and not buttons).

$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: var(--cui-body-bg) !default;
$input-disabled-color: var(--cui-body-color) !default;
$input-disabled-bg: var(--cui-secondary-bg) !default;
$input-disabled-border-color: var(--cui-border-color) !default;
$input-color: var(--cui-body-color) !default;
$input-border-color: var(--cui-border-color) !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: var(--cui-box-shadow-inset) !default;
$input-border-radius: var(--cui-border-radius) !default;
$input-border-radius-sm: var(--cui-border-radius-sm) !default;
$input-border-radius-lg: var(--cui-border-radius-lg) !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: tint-color($primary, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: var(--cui-secondary-color) !default;
$input-plaintext-color: var(--cui-body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;

$form-label-* and $form-text-* are for our <CFormLabel />s and <CFormText /> component.

$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: null !default;
$form-label-color: null !default;
$form-text-margin-top: .25rem !default;
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: var(--cui-secondary-color) !default;

API#

CFormTextarea#

import { CFormTextarea } from '@coreui/react'
// or
import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
Property Default Type
className# - string

A string of all className you want applied to the component.

disabled# - boolean

Toggle the disabled state for the component.

feedback#4.2.0+ - ReactNode

Provide valuable, actionable feedback.

feedbackInvalid#4.2.0+ - ReactNode

Provide valuable, actionable feedback.

feedbackValid#4.2.0+ - ReactNode

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.

floatingClassName#4.5.0+ - string

A string of all className you want applied to the floating label wrapper.

floatingLabel#4.2.0+ - ReactNode

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.

invalid# - boolean

Set component validation state to invalid.

label#4.2.0+ - ReactNode

Add a caption for a component.

onChange# - ChangeEventHandler\

Method called immediately after the value prop changes.

plainText# - boolean

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.

readOnly# - boolean

Toggle the readonly state for the component.

text#4.2.0+ - ReactNode

Add helper text to the component.

tooltipFeedback#4.2.0+ - boolean

Display validation feedback in a styled tooltip.

valid# - boolean

Set component validation state to valid.

value# - string, number, string[]

The value attribute of component.

CFormFeedback#

import { CFormFeedback } from '@coreui/react'
// or
import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
Property Default Type
as# div (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent\<...>)

Component used for the root node. Either a string to use a HTML element or a component.

className# - string

A string of all className you want applied to the component.

invalid# - boolean

Method called immediately after the value prop changes.

tooltip# - boolean

If your form layout allows it, you can display validation feedback in a styled tooltip.

valid# - boolean

Set component validation state to valid.

CFormLabel#

import { CFormLabel } from '@coreui/react'
// or
import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
Property Default Type
className# - string

A string of all className you want applied to the component.

customClassName# - string

A string of all className you want to be applied to the component, and override standard className value.

CFormText#

import { CFormText } from '@coreui/react'
// or
import CFormText from '@coreui/react/src/components/form/CFormText'
Property Default Type
as# div (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent\<...>)

Component used for the root node. Either a string to use a HTML element or a component.

className# - string

A string of all className you want applied to the component.