Skip to Content
Patternfly Logo

Text area

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

ExamplesPropsCSS Variables

Examples

Basic

Invalid

Validated

You must have something to say

Vertically resizable text area

Horizontally resizable text area

Uncontrolled

Props

TextArea properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the TextArea.
isRequiredbooleanNofalseFlag to show if the TextArea is required.
isValidbooleanNotrueFlag to show if the TextArea is valid or invalid. This prop will be deprecated. You should use validated instead.
validated'success' | 'error' | 'default'No'default'Value to indicate if the textarea is modified to show that validation state. If set to success, textarea will be modified to indicate valid state. If set to error, textarea will be modified to indicate error state.
valuestring | numberNoValue of the TextArea.
onChange(value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => voidNoA callback for when the TextArea value changes.
resizeOrientation'horizontal' | 'vertical' | 'both'No'both'Sets the orientation to limit the resize to
aria-labelstringNonullCustom flag to show that the TextArea requires an associated id or aria-label.

CSS Variables

.pf-c-form-control--pf-global--Color--100global_Color_100
#151515
.pf-c-form-control--pf-global--Color--200global_Color_200
#737679
.pf-c-form-control--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-form-control--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-form-control--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-form-control--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-form-control--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-form-control--pf-c-form-control--FontSizec_form_control_FontSize
1rem
.pf-c-form-control--pf-c-form-control--LineHeightc_form_control_LineHeight
1.5
.pf-c-form-control--pf-c-form-control--BorderWidthc_form_control_BorderWidth
1px
.pf-c-form-control--pf-c-form-control--BorderTopColorc_form_control_BorderTopColor
#ededed
.pf-c-form-control--pf-c-form-control--BorderRightColorc_form_control_BorderRightColor
#ededed
.pf-c-form-control--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#8a8d90
.pf-c-form-control--pf-c-form-control--BorderLeftColorc_form_control_BorderLeftColor
#ededed
.pf-c-form-control--pf-c-form-control--BorderRadiusc_form_control_BorderRadius
0
.pf-c-form-control--pf-c-form-control--BackgroundColorc_form_control_BackgroundColor
#fff
.pf-c-form-control--pf-c-form-control--Heightc_form_control_Height
calc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
.pf-c-form-control--pf-c-form-control--PaddingTopc_form_control_PaddingTop
calc(0.375rem - 1px)
.pf-c-form-control--pf-c-form-control--PaddingBottomc_form_control_PaddingBottom
calc(0.375rem - 1px)
.pf-c-form-control--pf-c-form-control--PaddingRightc_form_control_PaddingRight
0.5rem
.pf-c-form-control--pf-c-form-control--PaddingLeftc_form_control_PaddingLeft
0.5rem
.pf-c-form-control--pf-c-form-control--hover--BorderBottomColorc_form_control_hover_BorderBottomColor
#06c
.pf-c-form-control--pf-c-form-control--focus--BorderBottomWidthc_form_control_focus_BorderBottomWidth
2px
.pf-c-form-control--pf-c-form-control--focus--PaddingBottomc_form_control_focus_PaddingBottom
calc(0.375rem - 2px)
.pf-c-form-control--pf-c-form-control--focus--BorderBottomColorc_form_control_focus_BorderBottomColor
#06c
.pf-c-form-control--pf-c-form-control--placeholder--Colorc_form_control_placeholder_Color
#737679
.pf-c-form-control--pf-c-form-control--disabled--Colorc_form_control_disabled_Color
#737679
.pf-c-form-control--pf-c-form-control--disabled--BackgroundColorc_form_control_disabled_BackgroundColor
#ededed
.pf-c-form-control--pf-c-form-control--disabled--BorderColorc_form_control_disabled_BorderColor
transparent
.pf-c-form-control--pf-c-form-control--readonly--focus--BackgroundColorc_form_control_readonly_focus_BackgroundColor
#ededed
.pf-c-form-control--pf-c-form-control--readonly--focus--PaddingBottomc_form_control_readonly_focus_PaddingBottom
calc(0.375rem - 1px)
.pf-c-form-control--pf-c-form-control--readonly--focus--BorderBottomWidthc_form_control_readonly_focus_BorderBottomWidth
1px
.pf-c-form-control--pf-c-form-control--readonly--focus--BorderBottomColorc_form_control_readonly_focus_BorderBottomColor
#737679
.pf-c-form-control--pf-c-form-control--invalid--BorderBottomWidthc_form_control_invalid_BorderBottomWidth
2px
.pf-c-form-control--pf-c-form-control--invalid--PaddingBottomc_form_control_invalid_PaddingBottom
calc(0.375rem - 2px)
.pf-c-form-control--pf-c-form-control--invalid--BorderBottomColorc_form_control_invalid_BorderBottomColor
#c9190b
.pf-c-form-control--pf-c-form-control--invalid--PaddingRightc_form_control_invalid_PaddingRight
2rem
.pf-c-form-control--pf-c-form-control--invalid--BackgroundPositionc_form_control_invalid_BackgroundPosition
calc(100% - 0.5rem) 0.5rem
.pf-c-form-control--pf-c-form-control--invalid--BackgroundSizec_form_control_invalid_BackgroundSize
1rem 1rem
.pf-c-form-control--pf-c-form-control--invalid--BackgroundUrlc_form_control_invalid_BackgroundUrl
url("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--pf-c-form-control--invalid--exclamation--Backgroundc_form_control_invalid_exclamation_Background
url("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--pf-c-form-control--invalid--Backgroundc_form_control_invalid_Background
#fff url("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--pf-c-form-control--success--BorderBottomWidthc_form_control_success_BorderBottomWidth
2px
.pf-c-form-control--pf-c-form-control--success--PaddingBottomc_form_control_success_PaddingBottom
calc(0.375rem - 2px)
.pf-c-form-control--pf-c-form-control--success--BorderBottomColorc_form_control_success_BorderBottomColor
#92d400
.pf-c-form-control--pf-c-form-control--success--PaddingRightc_form_control_success_PaddingRight
2rem
.pf-c-form-control--pf-c-form-control--success--BackgroundPositionc_form_control_success_BackgroundPosition
calc(100% - 0.5rem) 0.5rem
.pf-c-form-control--pf-c-form-control--success--BackgroundSizec_form_control_success_BackgroundSize
1rem 1rem
.pf-c-form-control--pf-c-form-control--success--BackgroundUrlc_form_control_success_BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E")
.pf-c-form-control--pf-c-form-control--success--check--Backgroundc_form_control_success_check_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem / 1rem 1rem no-repeat
.pf-c-form-control--pf-c-form-control--success--Backgroundc_form_control_success_Background
#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem / 1rem 1rem no-repeat
.pf-c-form-control--pf-c-form-control--m-search--PaddingLeftc_form_control_m_search_PaddingLeft
2rem
.pf-c-form-control--pf-c-form-control--m-search--BackgroundPositionc_form_control_m_search_BackgroundPosition
0.5rem
.pf-c-form-control--pf-c-form-control--m-search--BackgroundSizec_form_control_m_search_BackgroundSize
1rem 1rem
.pf-c-form-control--pf-c-form-control--m-search--BackgroundUrlc_form_control_m_search_BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23737679' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E")
.pf-c-form-control--pf-c-form-control--m-search--Backgroundc_form_control_m_search_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23737679' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") 0.5rem / 1rem 1rem no-repeat
.pf-c-form-control--pf-c-form-control__select--PaddingRightc_form_control__select_PaddingRight
1.5rem
.pf-c-form-control--pf-c-form-control__select--BackgroundUrlc_form_control__select_BackgroundUrl
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")
.pf-c-form-control--pf-c-form-control__select--BackgroundSizec_form_control__select_BackgroundSize
0.875rem
.pf-c-form-control--pf-c-form-control__select--BackgroundPositionc_form_control__select_BackgroundPosition
calc(100% - 0.5rem) center
.pf-c-form-control--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--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--pf-c-form-control__select--invalid--Backgroundc_form_control__select_invalid_Background
url("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--pf-c-form-control__select--invalid--PaddingRightc_form_control__select_invalid_PaddingRight
calc(0.5rem + 3rem)
.pf-c-form-control--pf-c-form-control__select--success--Backgroundc_form_control__select_success_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%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--pf-c-form-control__select--success--PaddingRightc_form_control__select_success_PaddingRight
calc(0.5rem + 3rem)
.pf-c-form-control::placeholder--pf-c-form-control--Colorc_form_control_Color
#737679
.pf-c-form-control[readonly]--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#737679
.pf-c-form-control.pf-m-hover--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#06c
.pf-c-form-control.pf-m-focus--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#06c
.pf-c-form-control:disabled--pf-c-form-control--Colorc_form_control_Color
#737679
.pf-c-form-control:disabled--pf-c-form-control--BackgroundColorc_form_control_BackgroundColor
#ededed
.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--PaddingRightc_form_control_PaddingRight
2rem
.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#c9190b
.pf-c-form-control.pf-m-success--pf-c-form-control--PaddingRightc_form_control_PaddingRight
2rem
.pf-c-form-control.pf-m-success--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#92d400
select.pf-c-form-control--pf-c-form-control--PaddingRightc_form_control_PaddingRight
1.5rem
select.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--PaddingRightc_form_control_PaddingRight
calc(0.5rem + 3rem)
select.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--invalid--BackgroundPositionc_form_control_invalid_BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
select.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--invalid--Backgroundc_form_control_invalid_Background
url("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 - 1.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
select.pf-c-form-control.pf-m-success--pf-c-form-control--PaddingRightc_form_control_PaddingRight
calc(0.5rem + 3rem)
select.pf-c-form-control.pf-m-success--pf-c-form-control--success--BackgroundPositionc_form_control_success_BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
select.pf-c-form-control.pf-m-success--pf-c-form-control--success--Backgroundc_form_control_success_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") calc(100% - 0.5rem - 1.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