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

Text Input

A text input is used to gather free-form text from a user. Use pf-v6-text-input for single-line text entry in forms. MUST have an accessible name via <label> or accessible-label attribute. Participates in native form submission via Form-Associated Custom Element (FACE). Keyboard: Press Enter to submit the parent form (when valid).

Overview

A text input gathers free-form text from a user.

Installation

npm install @patternfly/elements

Usage

Basic

View HTML Source 
<label for="basic-input">Name</label>
<pf-v6-text-input id="basic-input"></pf-v6-text-input>

Disabled

View HTML Source 
<pf-v6-text-input disabled accessible-label="disabled" value="disabled text input"></pf-v6-text-input>

Read only

View HTML Source 
<pf-v6-text-input readonly accessible-label="readonly" value="read only text"></pf-v6-text-input>

Plain read only

View HTML Source 
<pf-v6-text-input readonly plain accessible-label="plain readonly" value="plain read only text"></pf-v6-text-input>

Validation states

View HTML Source 
<pf-v6-text-input validated="success" accessible-label="success" value="valid input"></pf-v6-text-input>
<pf-v6-text-input validated="warning" accessible-label="warning" value="warning input"></pf-v6-text-input>
<pf-v6-text-input validated="error" accessible-label="error" value="invalid input"></pf-v6-text-input>

With custom icon

View HTML Source 
<pf-v6-text-input accessible-label="search">
  <svg slot="icon" role="presentation" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512"><path 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"/></svg>
</pf-v6-text-input>

Truncated at start

View HTML Source 
<pf-v6-text-input truncated="start" accessible-label="truncated" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit"></pf-v6-text-input>

Slots

icon

Attributes

type

Type that the input accepts.

DOM Property
type
Type
'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url'
Default
unknown
validated

Validation state indicator. When set to success, warning, or error, a status icon appears and the border color changes accordingly. error also sets aria-invalid.

DOM Property
validated
Type
'success' | 'warning' | 'error'
Default
unknown
accessible-label

Accessible label for the input when no <label> element is provided.

DOM Property
accessibleLabel
Type
string
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
readonly

Flag to show if the input is read only.

DOM Property
readonly
Type
boolean
Default
false
plain

When combined with readonly, renders with no visible border or background.

DOM Property
plain
Type
boolean
Default
false
truncated

Controls text truncation direction for overflowing content.

DOM Property
truncated
Type
'start'
Default
unknown
pattern

Validation pattern, like <input>.

DOM Property
pattern
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
''
maxlength

Maximum number of characters allowed.

DOM Property
maxLength
Type
number
Default
unknown
minlength

Minimum number of characters required.

DOM Property
minLength
Type
number
Default
unknown
inputmode

Hint for the virtual keyboard layout on touch devices.

DOM Property
inputMode
Type
string
Default
''

Methods

createRenderRoot()
formResetCallback()
setCustomValidity(message: string)
checkValidity()
reportValidity()
select()

Events

change

Fires when the input value changes (on blur or Enter). Cancelable: call preventDefault() to reject the value change.

Event Type: 
Event

CSS Custom Properties

CSS Property Description Default
--pf-v6-c-form-control--Width

Input container inline size

 100%
--pf-v6-c-form-control--FontSize

Input font size

 var(--pf-t--global--font--size--body--default, 1rem)
--pf-t--global--font--size--body--default 1rem
--pf-v6-c-form-control--LineHeight

Input line height

 var(--pf-t--global--font--line-height--body, 1.5)
--pf-t--global--font--line-height--body 1.5
--pf-v6-c-form-control--BackgroundColor

Input background color

 var(--pf-t--global--background--color--control--default, light-dark(#ffffff, #383838))
--pf-t--global--background--color--control--default light-dark(#ffffff, #383838)
--pf-v6-c-form-control--before--BorderWidth var(--pf-t--global--border--width--control--default, 1px)
--pf-v6-c-form-control--before--BorderColor var(--pf-t--global--border--color--control--default, light-dark(#c7c7c7, #a3a3a3))
--pf-t--global--border--color--control--default light-dark(#c7c7c7, #a3a3a3)
--pf-v6-c-form-control--after--BorderWidth var(--pf-t--global--border--width--control--default, 1px)
--pf-v6-c-form-control--after--BorderColor transparent
--pf-v6-c-form-control--hover--after--BorderColor var(--pf-t--global--border--color--hover, light-dark(#151515, #ffffff))
--pf-t--global--border--color--hover light-dark(#151515, #ffffff)
--pf-v6-c-form-control--hover--after--BorderWidth var(--pf-t--global--border--width--control--hover, 1px)
--pf-t--global--border--width--control--hover 1px
--pf-v6-c-form-control--m-disabled--BackgroundColor var(--pf-t--global--background--color--disabled--default, light-dark(#c7c7c7, #a3a3a3))
--pf-t--global--background--color--disabled--default light-dark(#c7c7c7, #a3a3a3)
--pf-v6-c-form-control--m-disabled--Color var(--pf-t--global--text--color--on-disabled, light-dark(#4d4d4d, #383838))
--pf-t--global--text--color--on-disabled light-dark(#4d4d4d, #383838)
--pf-v6-c-form-control--m-readonly--BackgroundColor var(--pf-t--global--background--color--control--read-only, light-dark(#f0f0f0, #292929))
--pf-t--global--background--color--control--read-only light-dark(#f0f0f0, #292929)
--pf-v6-c-form-control--m-readonly--BorderColor var(--pf-t--global--border--color--control--read-only, light-dark(#c7c7c7, #707070))
--pf-t--global--border--color--control--read-only light-dark(#c7c7c7, #707070)
--pf-v6-c-form-control--m-success--after--BorderColor var(--pf-t--global--border--color--status--success--default, light-dark(#3e8635, #63ba59))
--pf-t--global--border--color--status--success--default light-dark(#3e8635, #63ba59)
--pf-v6-c-form-control--m-success--after--BorderWidth var(--pf-t--global--border--width--control--default, 1px)
--pf-v6-c-form-control--m-success--hover--after--BorderColor var(--pf-t--global--border--color--status--success--hover, light-dark(#1e4f18, #7ccc6f))
--pf-t--global--border--color--status--success--hover light-dark(#1e4f18, #7ccc6f)
--pf-v6-c-form-control--m-success__icon--m-status--Color

Status icon color (success)

 var(--pf-t--global--icon--color--status--success--default, light-dark(#3e8635, #63ba59))
--pf-t--global--icon--color--status--success--default light-dark(#3e8635, #63ba59)
--pf-v6-c-form-control--m-warning--after--BorderColor var(--pf-t--global--border--color--status--warning--default, light-dark(#f0ab00, #f4c145))
--pf-t--global--border--color--status--warning--default light-dark(#f0ab00, #f4c145)
--pf-v6-c-form-control--m-warning--after--BorderWidth var(--pf-t--global--border--width--control--default, 1px)
--pf-v6-c-form-control--m-warning--hover--after--BorderColor var(--pf-t--global--border--color--status--warning--hover, light-dark(#c58c00, #f9d67a))
--pf-t--global--border--color--status--warning--hover light-dark(#c58c00, #f9d67a)
--pf-v6-c-form-control--m-warning__icon--m-status--Color

Status icon color (warning)

 var(--pf-t--global--icon--color--status--warning--default, light-dark(#f0ab00, #f4c145))
--pf-t--global--icon--color--status--warning--default light-dark(#f0ab00, #f4c145)
--pf-v6-c-form-control--m-error--after--BorderColor var(--pf-t--global--border--color--status--danger--default, light-dark(#c9190b, #fe5142))
--pf-t--global--border--color--status--danger--default light-dark(#c9190b, #fe5142)
--pf-v6-c-form-control--m-error--after--BorderWidth var(--pf-t--global--border--width--control--default, 1px)
--pf-t--global--border--width--control--default 1px
--pf-v6-c-form-control--m-error--hover--after--BorderColor var(--pf-t--global--border--color--status--danger--hover, light-dark(#a30000, #ff7468))
--pf-t--global--border--color--status--danger--hover light-dark(#a30000, #ff7468)
--pf-v6-c-form-control--m-error__icon--m-status--Color

Status icon color (error)

 var(--pf-t--global--icon--color--status--danger--default, light-dark(#c9190b, #fe5142))
--pf-t--global--icon--color--status--danger--default light-dark(#c9190b, #fe5142)
--pf-v6-c-form-control--PaddingBlockStart

Block-start padding

 var(--pf-t--global--spacer--control--vertical--default, 0.375rem)
--pf-v6-c-form-control--PaddingBlockEnd

Block-end padding

 var(--pf-t--global--spacer--control--vertical--default, 0.375rem)
--pf-t--global--spacer--control--vertical--default 0.375rem
--pf-v6-c-form-control--PaddingInlineStart

Inline-start padding

 var(--pf-t--global--spacer--control--horizontal--default, 0.5rem)
--pf-v6-c-form-control--Color

Input text color

 var(--pf-t--global--text--color--regular, light-dark(#151515, #ffffff))
--pf-t--global--text--color--regular light-dark(#151515, #ffffff)
--pf-v6-c-form-control--BorderRadius

Border radius

 var(--pf-t--global--border--radius--control--form-element, 6px)
--pf-t--global--border--radius--control--form-element 6px
--pf-v6-c-form-control--m-placeholder--Color var(--pf-t--global--text--color--placeholder, light-dark(#707070, #a3a3a3))
--pf-t--global--text--color--placeholder light-dark(#707070, #a3a3a3)
--pf-v6-c-form-control__utilities--Gap var(--pf-t--global--spacer--gap--group--horizontal, 0.5rem)
--pf-t--global--spacer--gap--group--horizontal 0.5rem
--pf-v6-c-form-control--PaddingInlineEnd

Inline-end padding

 var(--pf-t--global--spacer--control--horizontal--default, 0.5rem)
--pf-t--global--spacer--control--horizontal--default 0.5rem
--pf-v6-c-form-control__icon--FontSize var(--pf-t--global--icon--size--font--body--default, 1em)
--pf-t--global--icon--size--font--body--default 1em
--pf-v6-c-form-control__icon--Color var(--pf-t--global--icon--color--regular, light-dark(#4d4d4d, #c7c7c7))
--pf-v6-c-form-control__icon--m-status--Color var(--pf-t--global--icon--color--regular, light-dark(#4d4d4d, #c7c7c7))
--pf-t--global--icon--color--regular light-dark(#4d4d4d, #c7c7c7)

CSS Shadow Parts

None

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