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' | undefined - Default
-
unknown
icon-
icon variant
- DOM Property
icon- Type
-
'calendar' | 'clock' | 'search' | undefined - Default
-
unknown
accessible-label-
Accessible label for the input when no
<label>element is provided.- DOM Property
accessibleLabel- Type
-
string | undefined - Default
-
unknown
custom-icon-url-
Custom icon url to set as the text input's background-image
- DOM Property
customIconUrl- Type
-
string | undefined - Default
-
unknown
custom-icon-dimensions-
Dimensions for the custom icon set as the text input's background-size
- DOM Property
customIconDimensions- Type
-
string | undefined - 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' | 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 input is required.
- DOM Property
required- Type
-
boolean - Default
-
false
pattern-
Validation pattern, like
<input>- DOM Property
pattern- Type
-
string | undefined - 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 | undefined - Default
-
unknown
validate-on-
If set to 'blur', will validate when focus leaves the input
- DOM Property
validateOn- Type
-
'blur' | undefined - Default
-
unknown
error-text-
Displayed when validation fails
- DOM Property
errorText- Type
-
string | undefined - Default
-
unknown
placeholder-
Input placeholder.
- DOM Property
placeholder- Type
-
string | undefined - Default
-
unknown
value-
Value of the input.
- DOM Property
value- Type
-
string - Default
-
''
Methods
formStateRestoreCallback(state: string, mode: string)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)
|
--pf-c-form-control--m-search--BackgroundUrl |
|
—
|
--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 |
|
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock)
|
--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))
|
--pf-c-form-control__error-text--m-status--Color |
|
var(--pf-global--danger-color--100, #c9190b)
|
CSS Shadow Parts
None
