React

Text area

A text area component is used for entering a paragraph of text. Related design guidelines: Forms

ExamplesPropsCSS Variables

Examples

Simple text area

Copied to clipboard

Invalid text area

Copied to clipboard

Props

TextArea Props

The TextArea component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the TextArea.
isRequiredboolfalseFlag to show if the TextArea is required.
isValidbooltrueFlag to show if the TextArea is valid or invalid.
valueunionnullValue of the TextArea.
onChangefunc() => undefinedA callback for when the TextArea value changes.
aria-labelcustomnullCustom flag to show that the TextArea requires an associated id or aria-label.
anyAdditional props are spread to the container <textarea>

CSS Variables

--pf-c-form-control--BackgroundColorc_form_control_BackgroundColor#ededed
--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor#c9190b
--pf-c-form-control--BorderLeftColorc_form_control_BorderLeftColor#ededed
--pf-c-form-control--BorderRadiusc_form_control_BorderRadius0
--pf-c-form-control--BorderRightColorc_form_control_BorderRightColor#ededed
--pf-c-form-control--BorderTopColorc_form_control_BorderTopColor#ededed
--pf-c-form-control--BorderWidthc_form_control_BorderWidth1px
--pf-c-form-control--Colorc_form_control_Color#72767b
--pf-c-form-control--FontSizec_form_control_FontSize1rem
--pf-c-form-control--Heightc_form_control_Heightcalc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
--pf-c-form-control--LineHeightc_form_control_LineHeight1.5
--pf-c-form-control--PaddingBottomc_form_control_PaddingBottomcalc(0.375rem - 1px)
--pf-c-form-control--PaddingLeftc_form_control_PaddingLeft0.5rem
--pf-c-form-control--PaddingRightc_form_control_PaddingRightcalc(0.5rem + 3rem)
--pf-c-form-control--PaddingTopc_form_control_PaddingTopcalc(0.375rem - 1px)
--pf-c-form-control__select--Backgroundc_form_control__select_Background#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--BackgroundPositionc_form_control__select_BackgroundPositioncalc(100% - 0.5rem) center
--pf-c-form-control__select--BackgroundSizec_form_control__select_BackgroundSize0.875rem
--pf-c-form-control__select--BackgroundUrlc_form_control__select_BackgroundUrlurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E")
--pf-c-form-control__select--PaddingRightc_form_control__select_PaddingRight1.5rem
--pf-c-form-control__select--arrow--Backgroundc_form_control__select_arrow_Background#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--invalid--Backgroundc_form_control__select_invalid_Backgroundurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--invalid--PaddingRightc_form_control__select_invalid_PaddingRightcalc(0.5rem + 3rem)
--pf-c-form-control--disabled--BackgroundColorc_form_control_disabled_BackgroundColor#ededed
--pf-c-form-control--disabled--BorderColorc_form_control_disabled_BorderColortransparent
--pf-c-form-control--disabled--Colorc_form_control_disabled_Color#72767b
--pf-c-form-control--focus--BorderBottomColorc_form_control_focus_BorderBottomColor#06c
--pf-c-form-control--focus--BorderBottomWidthc_form_control_focus_BorderBottomWidth2px
--pf-c-form-control--focus--PaddingBottomc_form_control_focus_PaddingBottomcalc(0.375rem - 2px)
--pf-c-form-control--hover--BorderBottomColorc_form_control_hover_BorderBottomColor#06c
--pf-c-form-control--invalid--Backgroundc_form_control_invalid_Backgroundurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control--invalid--BackgroundPositionc_form_control_invalid_BackgroundPositioncalc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--invalid--BackgroundSizec_form_control_invalid_BackgroundSize1rem 1rem
--pf-c-form-control--invalid--BackgroundUrlc_form_control_invalid_BackgroundUrlurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E")
--pf-c-form-control--invalid--BorderBottomColorc_form_control_invalid_BorderBottomColor#c9190b
--pf-c-form-control--invalid--BorderBottomWidthc_form_control_invalid_BorderBottomWidth2px
--pf-c-form-control--invalid--PaddingBottomc_form_control_invalid_PaddingBottomcalc(0.375rem - 2px)
--pf-c-form-control--invalid--PaddingRightc_form_control_invalid_PaddingRight2rem
--pf-c-form-control--invalid--exclamation--Backgroundc_form_control_invalid_exclamation_Backgroundurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat
--pf-c-form-control--placeholder--Colorc_form_control_placeholder_Color#72767b
--pf-c-form-control--readonly--focus--BackgroundColorc_form_control_readonly_focus_BackgroundColor#ededed
--pf-c-form-control--readonly--focus--BorderBottomColorc_form_control_readonly_focus_BorderBottomColor#72767b
--pf-c-form-control--readonly--focus--BorderBottomWidthc_form_control_readonly_focus_BorderBottomWidth1px
--pf-c-form-control--readonly--focus--PaddingBottomc_form_control_readonly_focus_PaddingBottomcalc(0.375rem - 1px)