Text Input
A text input is used to gather free-form text from a user.
Overview
Installation
npm install @patternfly/elementsUsage
Basic
View HTML Source
<label for="input-box">Input: </label>
<pf-text-input id="input-box" type="text" placeholder="Placeholder"></pf-text-input>
Slots
None
Attributes
left-truncated-
Trim text on left
- DOM Property
leftTruncated- Type
-
boolean - Default
-
false
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' - Default
-
unknown
icon-
icon variant
- DOM Property
icon- Type
-
'calendar' | 'clock' | 'search' - Default
-
unknown
accessible-label-
Accessible label for the input when no
<label>element is provided.- DOM Property
accessibleLabel- Type
-
string - Default
-
unknown
custom-icon-url-
Custom icon url to set as the text input's background-image
- DOM Property
customIconUrl- Type
-
string - Default
-
unknown
custom-icon-dimensions-
Dimensions for the custom icon set as the text input's background-size
- DOM Property
customIconDimensions- Type
-
string - Default
-
unknown
plain-
- DOM Property
plain- Type
-
boolean - Default
-
false
type-
Type that the input accepts.
- DOM Property
type- Type
-
| 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' - Default
-
unknown
disabled-
Flag to show if the input is disabled.
- DOM Property
disabled- Type
-
boolean - Default
-
false
required-
Flag to show if the input is required.
- DOM Property
required- Type
-
boolean - Default
-
false
pattern-
Validation pattern, like
<input>- DOM Property
pattern- Type
-
string - Default
-
unknown
readonly-
Flag to show if the input is read only.
- DOM Property
readonly- Type
-
boolean - Default
-
false
helper-text-
Helper text is text below a form field that helps a user provide the right information, like "Enter a unique name".
- DOM Property
helperText- Type
-
string - Default
-
unknown
validate-on-
If set to 'blur', will validate when focus leaves the input
- DOM Property
validateOn- Type
-
'blur' - Default
-
unknown
error-text-
Displayed when validation fails
- DOM Property
errorText- Type
-
string - Default
-
unknown
placeholder-
Input placeholder.
- DOM Property
placeholder- Type
-
string - Default
-
unknown
value-
Value of the input.
- DOM Property
value- Type
-
string - Default
-
''
Methods
setCustomValidity(message: string)checkValidity()reportValidity()
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-global--FontSize--md |
1rem
|
|
--pf-global--LineHeight--md |
1.5
|
|
--pf-global--BorderColor--300 |
#f0f0f0
|
|
--pf-global--BackgroundColor--100 |
#fff
|
|
--pf-c-form-control--focus--PaddingBottom |
Form control focus bottom padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))
|
--pf-c-form-control--focus--BorderBottomColor |
Form control focus bottom border color |
var(--pf-global--primary-color--100, #06c)
|
--pf-c-form-control--m-expanded--BorderBottomWidth |
Form control expanded bottom border width |
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--m-expanded--PaddingBottom |
Form control expanded bottom padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))
|
--pf-c-form-control--focus--BorderBottomWidth |
Form control focus bottom border width |
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--m-expanded--BorderBottomColor |
Form control expanded bottom border color |
var(--pf-global--primary-color--100, #06c)
|
--pf-global--primary-color--100 |
#06c
|
|
--pf-global--Color--dark-200 |
#6a6e73
|
|
--pf-c-form-control--placeholder--child--Color |
Form control placeholder child color |
var(--pf-global--Color--100, #151515)
|
--pf-global--Color--100 |
#151515
|
|
--pf-global--disabled-color--100 |
#6a6e73
|
|
--pf-global--disabled-color--300 |
#f0f0f0
|
|
--pf-c-form-control--readonly--hover--BorderBottomColor |
Form control readonly hover bottom border color |
var(--pf-global--BorderColor--200, #8a8d90)
|
--pf-c-form-control--readonly--focus--PaddingBottom |
Form control readonly focus bottom padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
--pf-c-form-control--readonly--focus--BorderBottomWidth |
Form control readonly focus bottom border width |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-c-form-control--readonly--focus--BorderBottomColor |
Form control readonly focus bottom border color |
var(--pf-global--BorderColor--200, #8a8d90)
|
--pf-global--BorderColor--200 |
#8a8d90
|
|
--pf-global--success-color--100 |
#3e8635
|
|
--pf-c-form-control--success--BackgroundPositionX |
Form control success background X position |
calc(100% - var(--pf-c-form-control--PaddingLeft))
|
--pf-c-form-control--success--BackgroundPositionY |
Form control success background Y position |
center
|
--pf-c-form-control--success--BackgroundSizeX |
Form control success background X size |
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--success--BackgroundSizeY |
Form control success background Y size |
var(--pf-c-form-control--FontSize)
|
--pf-global--warning-color--100 |
#f0ab00
|
|
--pf-c-form-control--m-warning--BackgroundPositionX |
Form control warning background X position |
calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))
|
--pf-c-form-control--m-warning--BackgroundPositionY |
Form control warning background Y position |
center
|
--pf-c-form-control--m-warning--BackgroundSizeX |
Form control warning background X size |
1.25rem
|
--pf-c-form-control--m-warning--BackgroundSizeY |
Form control warning background Y size |
var(--pf-c-form-control--FontSize)
|
--pf-global--BorderWidth--md |
2px
|
|
--pf-global--spacer--form-element |
0.375rem
|
|
--pf-c-form-control--invalid--BackgroundPositionX |
Form control invalid background X position |
calc(100% - var(--pf-c-form-control--PaddingLeft))
|
--pf-c-form-control--invalid--BackgroundPositionY |
Form control invalid background Y position |
center
|
--pf-c-form-control--invalid--BackgroundSizeY |
Form control invalid background Y size |
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--invalid--Background |
Form control invalid background |
var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)
|
--pf-c-form-control--invalid--exclamation--Background |
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--m-search--PaddingLeft |
Form control search left padding |
var(--pf-global--spacer--xl, 2rem)
|
--pf-global--spacer--xl |
2rem
|
|
--pf-c-form-control--m-search--BackgroundPosition |
Form control search background position |
var(--pf-c-form-control--PaddingRight)
|
--pf-c-form-control--m-search--BackgroundSize |
Form control search background size |
var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-search--BackgroundUrl |
Form control search background URL |
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' 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--m-icon--icon--PaddingRight |
Form control icon right padding with validation |
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--inset--base |
Form control base inset |
var(--pf-global--spacer--sm, 0.5rem)
|
--pf-c-form-control--m-icon--icon--spacer |
Form control icon spacer |
var(--pf-global--spacer--sm, 0.5rem)
|
--pf-c-form-control--invalid--BackgroundSizeX |
Form control invalid background X size |
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-icon--invalid--BackgroundUrl |
Form control icon invalid background URL |
var(--pf-c-form-control--invalid--BackgroundUrl)
|
--pf-c-form-control--m-icon--invalid--BackgroundPosition |
Form control icon invalid background position |
var(--pf-c-form-control--invalid--BackgroundPosition)
|
--pf-c-form-control--m-icon--invalid--BackgroundSize |
Form control icon invalid background size |
var(--pf-c-form-control--invalid--BackgroundSize)
|
--pf-c-form-control--m-icon--success--BackgroundUrl |
Form control icon success background URL |
var(--pf-c-form-control--success--BackgroundUrl)
|
--pf-c-form-control--m-icon--success--BackgroundPosition |
Form control icon success background position |
var(--pf-c-form-control--success--BackgroundPosition)
|
--pf-c-form-control--m-icon--success--BackgroundSize |
Form control icon success background size |
var(--pf-c-form-control--success--BackgroundSize)
|
--pf-c-form-control--m-icon--m-warning--BackgroundUrl |
Form control icon warning background URL |
var(--pf-c-form-control--m-warning--BackgroundUrl)
|
--pf-c-form-control--m-icon--m-warning--BackgroundPosition |
Form control icon warning background position |
var(--pf-c-form-control--m-warning--BackgroundPosition)
|
--pf-c-form-control--m-icon--icon--BackgroundPositionX |
Form control icon background X position with validation |
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--m-warning--BackgroundSize |
Form control icon warning background size |
var(--pf-c-form-control--m-warning--BackgroundSize)
|
--pf-c-form-control__select--PaddingRight |
Select right padding |
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 |
Select left padding |
calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-c-form-control__select--BackgroundUrl |
Select background URL |
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__select--BackgroundSize |
Select background size |
.625em
|
--pf-c-form-control__select--BackgroundPosition |
Select background position |
var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)
|
--pf-c-form-control__select--BackgroundPositionY |
Select background Y position |
center
|
--pf-c-form-control__select--success--PaddingRight |
Select success right padding |
var(--pf-global--spacer--3xl, 4rem)
|
--pf-c-form-control__select--success--BackgroundPosition |
Select success background position |
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))
|
--pf-c-form-control__select--m-warning--PaddingRight |
Select warning right padding |
var(--pf-global--spacer--3xl, 4rem)
|
--pf-c-form-control__select--m-warning--BackgroundPosition |
Select warning background position |
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)
|
--pf-c-form-control__select--invalid--PaddingRight |
Select invalid right padding |
var(--pf-global--spacer--3xl, 4rem)
|
--pf-global--spacer--3xl |
4rem
|
|
--pf-c-form-control__select--invalid--BackgroundPosition |
Select invalid background position |
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))
|
--pf-c-form-control__select--BackgroundPositionX |
Select background X position |
calc(100% - var(--pf-global--spacer--md, 1rem) + 1px)
|
--pf-c-form-control--textarea--Width |
Textarea width |
var(--pf-c-form-control--Width)
|
--pf-c-form-control--textarea--Height |
Textarea height |
auto
|
--pf-c-form-control--textarea--success--BackgroundPositionY |
Textarea success background Y position |
var(--pf-c-form-control--PaddingLeft)
|
--pf-c-form-control--textarea--m-warning--BackgroundPositionY |
Textarea warning background Y position |
var(--pf-c-form-control--PaddingLeft)
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY |
Textarea invalid background Y position |
var(--pf-c-form-control--PaddingLeft)
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl |
Icon sprite success background URL |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success
|
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl |
Icon sprite warning background URL |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning
|
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl |
Icon sprite invalid background URL |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl |
Icon sprite select background URL |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl |
Icon sprite search background URL |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl |
Icon sprite calendar background URL |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar
|
--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl |
Icon sprite clock background URL |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock
|
--pf-c-form-control--m-icon-sprite__select--BackgroundSize |
Icon sprite select background size |
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX |
Icon sprite select background X position |
calc(100% - var(--pf-global--spacer--md, 1rem) + 7px)
|
--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition |
Icon sprite select success background position |
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 |
Icon sprite select warning background position |
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 |
Icon sprite select invalid background position |
calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))
|
--pf-global--spacer--md |
1rem
|
|
--pf-global--spacer--lg |
1.5rem
|
|
--pf-global--danger-color--100 |
#c9190b
|
|
--pf-c-form-control--Color |
Form control text color |
var(--pf-global--Color--100, #151515)
|
--pf-c-form-control--Width |
Form control width |
100%
|
--pf-c-form-control--PaddingTop |
Form control top padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
--pf-c-form-control--PaddingBottom |
Form control bottom padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
--pf-c-form-control--PaddingLeft |
Form control left padding |
var(--pf-c-form-control--inset--base)
|
--pf-c-form-control--FontSize |
Form control font size |
var(--pf-global--FontSize--md, 1rem)
|
--pf-c-form-control--LineHeight |
Form control line height |
var(--pf-global--LineHeight--md, 1.5)
|
--pf-c-form-control--BackgroundColor |
Form control background color |
var(--pf-global--BackgroundColor--100, #fff)
|
--pf-c-form-control--BorderWidth |
Form control border width |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-form-control--BorderTopColor |
Form control top border color |
var(--pf-global--BorderColor--300, #f0f0f0)
|
--pf-c-form-control--BorderRightColor |
Form control right border color |
var(--pf-global--BorderColor--300, #f0f0f0)
|
--pf-c-form-control--BorderBottomColor |
Form control bottom border color |
var(--pf-global--BorderColor--200, #8a8d90)
|
--pf-c-form-control--BorderLeftColor |
Form control left border color |
var(--pf-global--BorderColor--300, #f0f0f0)
|
--pf-c-form-control--BorderRadius |
Form control border radius |
0
|
--pf-c-form-control--Height |
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--disabled--BackgroundColor |
Form control disabled background color |
var(--pf-global--disabled-color--300, #f0f0f0)
|
--pf-c-form-control--disabled--Color |
Form control disabled color |
var(--pf-global--disabled-color--100, #6a6e73)
|
--pf-c-form-control--disabled--BorderColor |
Form control disabled border color |
transparent
|
--pf-c-form-control--hover--BorderBottomColor |
Form control hover bottom border color |
var(--pf-global--primary-color--100, #06c)
|
--pf-c-form-control--placeholder--Color |
Form control placeholder color |
var(--pf-global--Color--dark-200, #6a6e73)
|
--pf-c-form-control__error-text--m-status--Color |
Error text status color |
var(--pf-global--danger-color--100, #c9190b)
|
--pf-c-form-control--readonly--BackgroundColor |
Form control readonly background color |
var(--pf-c-form-control--readonly--m-plain--BackgroundColor)
|
--pf-c-form-control--readonly--m-plain--BackgroundColor |
Form control readonly plain background color |
transparent
|
--pf-c-form-control--readonly--m-plain--inset--base |
Form control readonly plain base inset |
0
|
--pf-c-form-control--invalid--PaddingRight |
Form control invalid right padding |
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-form-control--invalid--BorderBottomColor |
Form control invalid bottom border color |
var(--pf-global--danger-color--100, #c9190b)
|
--pf-c-form-control--invalid--PaddingBottom |
Form control invalid bottom padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))
|
--pf-c-form-control--invalid--BackgroundUrl |
Form control invalid background URL |
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' 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--BackgroundPosition |
Form control invalid background position |
var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)
|
--pf-c-form-control--invalid--BackgroundSize |
Form control invalid background size |
var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)
|
--pf-c-form-control--invalid--BorderBottomWidth |
Form control invalid bottom border width |
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--m-icon--PaddingRight |
Form control icon right padding |
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--BackgroundPositionX |
Form control icon background X position |
calc(100% - var(--pf-c-form-control--inset--base))
|
--pf-c-form-control--m-icon--BackgroundPositionY |
Form control icon background Y position |
center
|
--pf-c-form-control--m-icon--BackgroundSizeX |
Form control icon background X size |
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-icon--BackgroundSizeY |
Form control icon background Y size |
var(--pf-c-form-control--FontSize)
|
--pf-c-form-control--m-calendar--BackgroundUrl |
Form control calendar background URL |
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E")
|
--pf-c-form-control--m-icon--BackgroundUrl |
Form control icon background URL |
var(--pf-c-form-control--m-clock--BackgroundUrl)
|
--pf-c-form-control--m-clock--BackgroundUrl |
Form control clock background URL |
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E")
|
--pf-c-form-control--success--PaddingRight |
Form control success right padding |
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-form-control--success--BorderBottomColor |
Form control success bottom border color |
var(--pf-global--success-color--100, #3e8635)
|
--pf-c-form-control--success--PaddingBottom |
Form control success bottom padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))
|
--pf-c-form-control--success--BackgroundUrl |
Form control success background URL |
url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%235ba352" 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--success--BackgroundPosition |
Form control success background position |
var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)
|
--pf-c-form-control--success--BackgroundSize |
Form control success background size |
var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)
|
--pf-c-form-control--success--BorderBottomWidth |
Form control success bottom border width |
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-form-control--PaddingRight |
Form control right padding |
var(--pf-c-form-control--m-warning--PaddingRight)
|
--pf-c-form-control--m-warning--PaddingRight |
Form control warning right padding |
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-form-control--m-warning--BorderBottomColor |
Form control warning bottom border color |
var(--pf-global--warning-color--100, #f0ab00)
|
--pf-c-form-control--m-warning--PaddingBottom |
Form control warning bottom padding |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))
|
--pf-c-form-control--m-warning--BackgroundUrl |
Form control warning background URL |
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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--m-warning--BackgroundPosition |
Form control warning background position |
var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)
|
--pf-c-form-control--m-warning--BackgroundSize |
Form control warning background size |
var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)
|
--pf-c-form-control--m-warning--BorderBottomWidth |
Form control warning bottom border width |
var(--pf-global--BorderWidth--md, 2px)
|
CSS Shadow Parts
None
