Text area

Most commonly used in forms, a text area allows users to enter a longer paragraph of text.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-form-control--pf-v6-c-form-control--ColumnGap
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control--Color
(In light theme) #151515
.pf-v6-c-form-control--pf-v6-c-form-control--FontSize
0.875rem
.pf-v6-c-form-control--pf-v6-c-form-control--LineHeight
1.5
.pf-v6-c-form-control--pf-v6-c-form-control--Resize
none
.pf-v6-c-form-control--pf-v6-c-form-control--OutlineOffset
-6px
.pf-v6-c-form-control--pf-v6-c-form-control--BorderRadius
6px
.pf-v6-c-form-control--pf-v6-c-form-control--before--BorderWidth
1px
.pf-v6-c-form-control--pf-v6-c-form-control--before--BorderStyle
solid
.pf-v6-c-form-control--pf-v6-c-form-control--before--BorderColor
(In light theme) #8c8c8c
.pf-v6-c-form-control--pf-v6-c-form-control--before--BorderRadius
6px
.pf-v6-c-form-control--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control--pf-v6-c-form-control--after--BorderStyle
solid
.pf-v6-c-form-control--pf-v6-c-form-control--after--BorderColor
transparent
.pf-v6-c-form-control--pf-v6-c-form-control--after--BorderRadius
6px
.pf-v6-c-form-control--pf-v6-c-form-control--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-form-control--pf-v6-c-form-control--Width
100%
.pf-v6-c-form-control--pf-v6-c-form-control--inset--base
1rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingBlockStart--base
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingBlockEnd--base
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingInlineEnd--base
1rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingInlineStart--base
1rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingBlockStart
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingBlockEnd
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control--PaddingInlineStart
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__utilities--input--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__utilities--select--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__input--PaddingBlockStart
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control__input--PaddingBlockEnd
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control__input--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__input--PaddingInlineStart
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__select--PaddingBlockStart
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control__select--PaddingBlockEnd
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control__select--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__select--PaddingInlineStart
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__textarea--PaddingBlockStart
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control__textarea--PaddingBlockEnd
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control__textarea--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__textarea--PaddingInlineStart
1rem
.pf-v6-c-form-control--pf-v6-c-form-control--hover--after--BorderWidth
1px
.pf-v6-c-form-control--pf-v6-c-form-control--hover--after--BorderColor
(In light theme) #4394e5
.pf-v6-c-form-control--pf-v6-c-form-control--m-success--hover--after--BorderColor
(In light theme) #204d00
.pf-v6-c-form-control--pf-v6-c-form-control--m-warning--hover--after--BorderColor
(In light theme) #b98412
.pf-v6-c-form-control--pf-v6-c-form-control--m-error--hover--after--BorderColor
(In light theme) #731f00
.pf-v6-c-form-control--pf-v6-c-form-control--m-expanded--after--BorderWidth
2px
.pf-v6-c-form-control--pf-v6-c-form-control--m-expanded--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-form-control--pf-v6-c-form-control--m-placeholder--Color
(In light theme) #4d4d4d
.pf-v6-c-form-control--pf-v6-c-form-control--m-placeholder--child--Color
(In light theme) #151515
.pf-v6-c-form-control--pf-v6-c-form-control--m-disabled--Color
(In light theme) #707070
.pf-v6-c-form-control--pf-v6-c-form-control--m-disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-form-control--pf-v6-c-form-control--m-disabled--after--BorderColor
transparent
.pf-v6-c-form-control--pf-v6-c-form-control--m-readonly--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-form-control--pf-v6-c-form-control--m-readonly--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-form-control--pf-v6-c-form-control--m-readonly--hover--after--BorderColor
revert
.pf-v6-c-form-control--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor
transparent
.pf-v6-c-form-control--pf-v6-c-form-control--m-readonly--m-plain--BorderColor
transparent
.pf-v6-c-form-control--pf-v6-c-form-control--m-readonly--m-plain--inset--base
0
.pf-v6-c-form-control--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset
0
.pf-v6-c-form-control--pf-v6-c-form-control--icon--width
0.875rem
.pf-v6-c-form-control--pf-v6-c-form-control--m-success--after--BorderWidth
1px
.pf-v6-c-form-control--pf-v6-c-form-control--m-success--after--BorderColor
(In light theme) #3d7317
.pf-v6-c-form-control--pf-v6-c-form-control--m-success--PaddingInlineEnd
initial
.pf-v6-c-form-control--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd
initial
.pf-v6-c-form-control--pf-v6-c-form-control__input--m-success--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control__select--m-success--PaddingInlineEnd
calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control--m-warning--after--BorderWidth
1px
.pf-v6-c-form-control--pf-v6-c-form-control--m-warning--after--BorderColor
(In light theme) #dca614
.pf-v6-c-form-control--pf-v6-c-form-control--m-warning--PaddingInlineEnd
initial
.pf-v6-c-form-control--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd
initial
.pf-v6-c-form-control--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd
calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control--m-error--after--BorderWidth
1px
.pf-v6-c-form-control--pf-v6-c-form-control--m-error--after--BorderColor
(In light theme) #b1380b
.pf-v6-c-form-control--pf-v6-c-form-control--m-error--PaddingInlineEnd
initial
.pf-v6-c-form-control--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd
initial
.pf-v6-c-form-control--pf-v6-c-form-control--m-error--icon--width
0.875rem
.pf-v6-c-form-control--pf-v6-c-form-control__input--m-error--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control__select--m-error--PaddingInlineEnd
calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control--m-icon--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control--m-icon--icon--width
0.875rem
.pf-v6-c-form-control--pf-v6-c-form-control--m-icon--icon--spacer
calc(1rem / 2)
.pf-v6-c-form-control--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd
calc(0.875rem + 1rem + 0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control--pf-v6-c-form-control--textarea--Width
100%
.pf-v6-c-form-control--pf-v6-c-form-control--textarea--Height
auto
.pf-v6-c-form-control--pf-v6-c-form-control--textarea--PaddingBlockStart--offset
calc(-1 * -6px)
.pf-v6-c-form-control--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset
calc(-1 * -6px)
.pf-v6-c-form-control--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset
calc(-1 * -6px)
.pf-v6-c-form-control--pf-v6-c-form-control--textarea--PaddingInlineStart--offset
calc(-1 * -6px)
.pf-v6-c-form-control--pf-v6-c-form-control__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-form-control--pf-v6-c-form-control__icon--FontSize
0.875rem
.pf-v6-c-form-control--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #1f1f1f
.pf-v6-c-form-control--pf-v6-c-form-control--m-success__icon--m-status--Color
(In light theme) #3d7317
.pf-v6-c-form-control--pf-v6-c-form-control--m-warning__icon--m-status--Color
(In light theme) #dca614
.pf-v6-c-form-control--pf-v6-c-form-control--m-error__icon--m-status--Color
(In light theme) #b1380b
.pf-v6-c-form-control--pf-v6-c-form-control__utilities--Gap
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__utilities--PaddingBlockStart
0.5rem
.pf-v6-c-form-control--pf-v6-c-form-control__utilities--PaddingInlineEnd
1rem
.pf-v6-c-form-control--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart
calc(0.5rem - calc(-1 * -6px))
.pf-v6-c-form-control--pf-v6-c-form-control__toggle-icon--PaddingInlineStart
0
.pf-v6-c-form-control--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd
0
.pf-v6-c-form-control--pf-v6-c-form-control__toggle-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-form-control--pf-v6-c-form-control__toggle-icon--FontSize
0.875rem
.pf-v6-c-form-control--pf-v6-c-form-control--m-disabled__toggle-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-form-control:has(input)--pf-v6-c-form-control--PaddingBlockStart
0.5rem
.pf-v6-c-form-control:has(input)--pf-v6-c-form-control--PaddingBlockEnd
0.5rem
.pf-v6-c-form-control:has(input)--pf-v6-c-form-control--PaddingInlineStart
1rem
.pf-v6-c-form-control:has(input)--pf-v6-c-form-control--PaddingInlineEnd
1rem
.pf-v6-c-form-control:has(input)--pf-v6-c-form-control__utilities--PaddingInlineEnd
1rem
.pf-v6-c-form-control.pf-m-textarea.pf-m-success--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset
calc(0.875rem + 0.5rem)
.pf-v6-c-form-control.pf-m-textarea:has(textarea)--pf-v6-c-form-control--PaddingBlockStart
calc(0.5rem - calc(-1 * -6px))
.pf-v6-c-form-control.pf-m-textarea:has(textarea)--pf-v6-c-form-control--PaddingBlockEnd
calc(0.5rem - calc(-1 * -6px))
.pf-v6-c-form-control.pf-m-textarea:has(textarea)--pf-v6-c-form-control--PaddingInlineStart
calc(1rem - calc(-1 * -6px))
.pf-v6-c-form-control.pf-m-textarea:has(textarea)--pf-v6-c-form-control--PaddingInlineEnd
calc(1rem - calc(-1 * -6px) + calc(0.875rem + 0.5rem), 0px)
.pf-v6-c-form-control.pf-m-textarea:has(textarea)--pf-v6-c-form-control__utilities--PaddingInlineEnd
1rem
.pf-v6-c-form-control.pf-m-readonly--pf-v6-c-form-control--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-form-control.pf-m-readonly--pf-v6-c-form-control--before--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-form-control.pf-m-readonly:hover--pf-v6-c-form-control--hover--after--BorderColor
revert
.pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error)--pf-v6-c-form-control--hover--after--BorderColor
revert
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain--pf-v6-c-form-control--m-readonly--BackgroundColor
transparent
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain--pf-v6-c-form-control--m-readonly--BorderColor
transparent
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain--pf-v6-c-form-control--inset--base
0
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain--pf-v6-c-form-control--before--BorderStyle
none
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain--pf-v6-c-form-control--after--BorderStyle
none
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain--pf-v6-c-form-control--OutlineOffset
0
.pf-v6-c-form-control.pf-m-expanded--pf-v6-c-form-control--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-form-control.pf-m-expanded--pf-v6-c-form-control--after--BorderWidth
2px
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--Color
(In light theme) #707070
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--m-placeholder--Color
(In light theme) #707070
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control__toggle-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--before--BorderStyle
none
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--after--BorderStyle
none
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control--after--BorderColor
(In light theme) #b1380b
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control--hover--after--BorderColor
(In light theme) #731f00
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #b1380b
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status--pf-v6-c-form-control--TransitionDuration--Opacity
200ms
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status--pf-v6-c-form-control--TransitionTimingFunction--Opacity
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control--after--BorderColor
(In light theme) #3d7317
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control--hover--after--BorderColor
(In light theme) #204d00
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #3d7317
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control--after--BorderColor
(In light theme) #dca614
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control--hover--after--BorderColor
(In light theme) #b98412
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #dca614
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control:hover--pf-v6-c-form-control--after--BorderColor
(In light theme) #4394e5
.pf-v6-c-form-control:hover--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control.pf-m-icon--pf-v6-c-form-control--PaddingInlineEnd
calc(0.875rem + 0.5rem + 1rem)
.pf-v6-c-form-control:has(select)--pf-v6-c-form-control--PaddingBlockStart
0.5rem
.pf-v6-c-form-control:has(select)--pf-v6-c-form-control--PaddingBlockEnd
0.5rem
.pf-v6-c-form-control:has(select)--pf-v6-c-form-control--PaddingInlineStart
1rem
.pf-v6-c-form-control:has(select)--pf-v6-c-form-control--PaddingInlineEnd
calc(1rem + 0.875rem)
.pf-v6-c-form-control:has(select)--pf-v6-c-form-control__utilities--PaddingInlineEnd
1rem
.pf-v6-c-form-control.pf-m-placeholder > select--pf-v6-c-form-control--Color
(In light theme) #4d4d4d
.pf-v6-c-form-control.pf-m-resize-vertical--pf-v6-c-form-control--Resize
vertical
.pf-v6-c-form-control.pf-m-resize-horizontal--pf-v6-c-form-control--Resize
horizontal
.pf-v6-c-form-control.pf-m-resize-both--pf-v6-c-form-control--Resize
both
.pf-v6-c-form-control__icon.pf-m-status--pf-v6-c-form-control__icon--Color
(In light theme) #1f1f1f