Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

Text Input

A text input is used to gather free-form text from a user.

Overview

Installation

npm install @patternfly/elements

Usage

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

© 2018-2024 Red Hat, Inc. Deploys by Netlify