Text Area
A text area component is used for entering a paragraph of text that is longer than one line.
Overview
Installation
npm install @patternfly/elementsUsage
Basic
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text"></pf-text-area>
With Placeholder
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder"></pf-text-area>
Required
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" required="true" ></pf-text-area>
Disabled state
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" disabled="true" ></pf-text-area>
Resize Vertical
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" resize='vertical'></pf-text-area>
Resize Horizontal
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" resize='horizontal'></pf-text-area>
Slots
None
Attributes
accessible-label-
Accessible label for the input when no
<label>element is provided.- DOM Property
accessibleLabel- Type
-
string | undefined - Default
-
unknown
validated-
Value to indicate if the input is modified to show that validation state. If set to success, input will be modified to indicate valid state. If set to warning, input will be modified to indicate warning state. Invalid inputs will display an error state
- DOM Property
validated- Type
-
'success' | 'warning' | undefined - Default
-
unknown
disabled-
Flag to show if the input is disabled.
- DOM Property
disabled- Type
-
boolean - Default
-
false
required-
Flag to show if the text area is required.
- DOM Property
required- Type
-
boolean - Default
-
false
readonly-
Flag to show if the input is read only.
- DOM Property
readonly- Type
-
boolean - Default
-
false
placeholder-
Input placeholder.
- DOM Property
placeholder- Type
-
string | undefined - Default
-
unknown
value-
Value of the input.
- DOM Property
value- Type
-
string - Default
-
''
resize-
Sets the orientation to limit the resize to
- DOM Property
resize- Type
-
'horizontal' | 'vertical' | 'both' | undefined - Default
-
unknown
auto-resize-
Flag to modify height based on contents.
- DOM Property
autoResize- Type
-
boolean - Default
-
false
Methods
formDisabledCallback()setCustomValidity(message: string)checkValidity()reportValidity()
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-form-control--Color |
|
var(--pf-global--Color--100, #151515)
|
--pf-c-form-control--FontSize |
|
var(--pf-global--FontSize--md, 1rem)
|
--pf-c-form-control--LineHeight |
|
var(--pf-global--LineHeight--md, 1.5)
|
--pf-c-form-control--BorderWidth |
|
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-form-control--BorderTopColor |
|
var(--pf-global--BorderColor--300, #f0f0f0)
|
--pf-c-form-control--BorderRightColor |
|
var(--pf-global--BorderColor--300, #f0f0f0)
|
--pf-c-form-control--BorderBottomColor |
|
var(--pf-global--BorderColor--200, #8a8d90)
|
--pf-c-form-control--BorderLeftColor |
|
var(--pf-global--BorderColor--300, #f0f0f0)
|
--pf-c-form-control--BorderRadius |
|
0
|
--pf-c-form-control--BackgroundColor |
|
var(--pf-global--BackgroundColor--100, #fff)
|
--pf-c-form-control--Width |
|
100
|
--pf-c-form-control--Height |
|
calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom))
|
--pf-c-form-control--inset--base |
|
var(--pf-global--spacer--sm, 0.5rem)
|
--pf-c-form-control--PaddingTop |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
--pf-c-form-control--PaddingBottom |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
--pf-c-form-control--PaddingRight |
|
var(--pf-c-form-control--inset--base)
|
--pf-c-form-control--PaddingLeft |
|
var(--pf-c-form-control--inset--base)
|
--pf-c-form-control--hover--BorderBottomColor |
|
var(--pf-global--primary-color--100, #06c)
|
--pf-c-form-control--focus--BorderBottomWidth |
|
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--focus--PaddingBottom |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))
|
--pf-c-form-control--focus--BorderBottomColor |
|
var(--pf-global--primary-color--100, #06c)
|
--pf-c-form-control--m-expanded--BorderBottomWidth |
|
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--m-expanded--PaddingBottom |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))
|
--pf-c-form-control--m-expanded--BorderBottomColor |
|
var(--pf-global--primary-color--100, #06c)
|
--pf-c-form-control--placeholder--Color |
|
var(--pf-global--Color--dark-200, #6a6e73)
|
--pf-c-form-control--placeholder--child--Color |
|
var(--pf-global--Color--100, #151515)
|
--pf-c-form-control--disabled--Color |
|
var(--pf-global--disabled-color--100, #6a6e73)
|
--pf-c-form-control--disabled--BackgroundColor |
|
var(--pf-global--disabled-color--300, #f0f0f0)
|
--pf-c-form-control--disabled--BorderColor |
|
transparent
|
--pf-c-form-control--readonly--BackgroundColor |
|
var(--pf-global--disabled-color--300, #f0f0f0)
|
--pf-c-form-control--readonly--hover--BorderBottomColor |
|
var(--pf-global--BorderColor--200, #8a8d90)
|
--pf-c-form-control--readonly--focus--PaddingBottom |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
--pf-c-form-control--readonly--focus--BorderBottomWidth |
|
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-form-control--readonly--focus--BorderBottomColor |
|
var(--pf-global--BorderColor--200, #8a8d90)
|
--pf-c-form-control--readonly--m-plain--BackgroundColor |
|
transparent
|
--pf-c-form-control--readonly--m-plain--inset--base |
|
0
|
--pf-c-form-control--success--BorderBottomWidth |
|
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--success--PaddingBottom |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))
|
--pf-c-form-control--success--BorderBottomColor |
|
var(--pf-global--success-color--100, #3e8635)
|
--pf-c-form-control--success--PaddingRight |
|
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-form-control--success--BackgroundPositionX |
|
calc(100 - var(--pf-c-form-control--PaddingLeft))
|
--pf-c-form-control--success--BackgroundPositionY |
|
center
|
--pf-c-form-control--success--BackgroundPosition |
|
var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)
|
--pf-c-form-control--success--BackgroundSizeX |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--success--BackgroundSizeY |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--success--BackgroundSize |
|
var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)
|
--pf-c-form-control--success--BackgroundUrl |
—
|
|
--pf-c-form-control--m-warning--BorderBottomWidth |
|
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--m-warning--PaddingBottom |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))
|
--pf-c-form-control--m-warning--BorderBottomColor |
|
var(--pf-global--warning-color--100, #f0ab00)
|
--pf-c-form-control--m-warning--PaddingRight |
|
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-form-control--m-warning--BackgroundPositionX |
|
calc(100 - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))
|
--pf-c-form-control--m-warning--BackgroundPositionY |
|
center
|
--pf-c-form-control--m-warning--BackgroundPosition |
|
var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)
|
--pf-c-form-control--m-warning--BackgroundSizeX |
|
1.25rem
|
--pf-c-form-control--m-warning--BackgroundSizeY |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-warning--BackgroundSize |
|
var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)
|
--pf-c-form-control--m-warning--BackgroundUrl |
|
—
|
--pf-c-form-control--invalid--BorderBottomWidth |
|
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--invalid--PaddingBottom |
|
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))
|
--pf-c-form-control--invalid--BorderBottomColor |
|
var(--pf-global--danger-color--100, #c9190b)
|
--pf-c-form-control--invalid--PaddingRight |
|
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-form-control--invalid--BackgroundPositionX |
|
calc(100 - var(--pf-c-form-control--PaddingLeft))
|
--pf-c-form-control--invalid--BackgroundPositionY |
|
center
|
--pf-c-form-control--invalid--BackgroundPosition |
|
var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)
|
--pf-c-form-control--invalid--BackgroundSizeX |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--invalid--BackgroundSizeY |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--invalid--BackgroundSize |
|
var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)
|
--pf-c-form-control--invalid--BackgroundUrl |
|
—
|
--pf-c-form-control--invalid--exclamation--Background |
|
var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat
|
--pf-c-form-control--invalid--Background |
|
var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)
|
--pf-c-form-control--m-search--PaddingLeft |
|
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-form-control--m-search--BackgroundPosition |
|
var(--pf-c-form-control--PaddingRight)
|
--pf-c-form-control--m-search--BackgroundSize |
|
var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)
|
undefined |
—
|
|
--pf-c-form-control--m-icon--PaddingRight |
|
calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))
|
--pf-c-form-control--m-icon--BackgroundUrl |
|
none
|
--pf-c-form-control--m-icon--BackgroundPositionX |
|
calc(100 - var(--pf-c-form-control--inset--base))
|
--pf-c-form-control--m-icon--BackgroundPositionY |
|
center
|
--pf-c-form-control--m-icon--BackgroundSizeX |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-icon--BackgroundSizeY |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-icon--icon--spacer |
|
var(--pf-global--spacer--sm, 0.5rem)
|
--pf-c-form-control--m-icon--icon--PaddingRight |
|
calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))
|
--pf-c-form-control--m-icon--icon--BackgroundPositionX |
|
calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))
|
--pf-c-form-control--m-icon--invalid--BackgroundUrl |
|
var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)
|
--pf-c-form-control--m-icon--invalid--BackgroundPosition |
|
var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)
|
--pf-c-form-control--m-icon--invalid--BackgroundSize |
|
var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)
|
--pf-c-form-control--m-icon--success--BackgroundUrl |
|
var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)
|
--pf-c-form-control--m-icon--success--BackgroundPosition |
|
var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)
|
--pf-c-form-control--m-icon--success--BackgroundSize |
|
var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)
|
--pf-c-form-control--m-icon--m-warning--BackgroundUrl |
|
var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)
|
--pf-c-form-control--m-icon--m-warning--BackgroundPosition |
|
var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)
|
--pf-c-form-control--m-icon--m-warning--BackgroundSize |
|
var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)
|
--pf-c-form-control--m-calendar--BackgroundUrl |
|
—
|
--pf-c-form-control--m-clock--BackgroundUrl |
|
—
|
--pf-c-form-control__select--PaddingRight |
|
calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))
|
--pf-c-form-control__select--PaddingLeft |
|
calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))
|
--pf-c-form-control__select--BackgroundUrl |
|
—
|
--pf-c-form-control__select--BackgroundSize |
|
.625em
|
--pf-c-form-control__select--BackgroundPositionX |
|
calc(100 - var(--pf-global--spacer--md, 1rem) + 1px)
|
--pf-c-form-control__select--BackgroundPositionY |
|
center
|
--pf-c-form-control__select--BackgroundPosition |
|
var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)
|
--pf-c-form-control__select--success--PaddingRight |
|
var(--pf-global--spacer--3xl, 4rem)
|
--pf-c-form-control__select--success--BackgroundPosition |
|
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))
|
--pf-c-form-control__select--m-warning--PaddingRight |
|
var(--pf-global--spacer--3xl, 4rem)
|
--pf-c-form-control__select--m-warning--BackgroundPosition |
|
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)
|
--pf-c-form-control__select--invalid--PaddingRight |
|
var(--pf-global--spacer--3xl, 4rem)
|
--pf-c-form-control__select--invalid--BackgroundPosition |
|
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))
|
--pf-c-form-control--textarea--Width |
|
var(--pf-c-form-control--Width)
|
--pf-c-form-control--textarea--Height |
|
auto
|
--pf-c-form-control--textarea--success--BackgroundPositionY |
|
var(--pf-c-form-control--PaddingLeft)
|
--pf-c-form-control--textarea--m-warning--BackgroundPositionY |
|
var(--pf-c-form-control--PaddingLeft)
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY |
|
var(--pf-c-form-control--PaddingLeft)
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl |
|
—
|
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl |
|
—
|
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl |
|
—
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl |
|
—
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl |
|
—
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl |
|
—
|
--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl |
|
—
|
--pf-c-form-control--m-icon-sprite__select--BackgroundSize |
|
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX |
|
calc(100 - var(--pf-global--spacer--md, 1rem) + 7px)
|
--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition |
|
calc(100 - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem))
|
--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition |
|
calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)
|
--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition |
|
calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))
|
CSS Shadow Parts
None
