Skip to main content
Design system

Input Text

A text field is an input that allows a user to write or edit text.

Bundle size: 5.64 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { InputText } from "@washingtonpost/wpds-ui-kit"
|Copy

Anatomy

Note: Image is not to scale

  1. Input value
  2. Label/Placeholder
  3. Border
  4. Button Icon
  5. Contextual Icon (non-actionable)
  6. Optional Helper text

Options

Icon

Icon has two placements left or right.

Types

Text input supports the following text inputs: text search url tel email.

Helper Text

Input text supports an optional help text.


Behavior

Focus

Click input text component to demostrate focus.

Error

Success

Required

Disabled

Text Overflow

Overflow of the input value is indicated by an ellipse.


Guidance

Actionable inputs

Inputs that require user to take action and include an icon should have the icon be right. A left icon is meant for contextualizing the input.

API Reference

InputText

PropDescriptionTypeDefaultRequired
buttonIconTextAccessible text for button icon, required for right icons
string
----False
labelThe input's label text, required for accessibility
string
----
True
disabledThe underlying input element disabled attribute
enum
boolean
----False
errorIndicates there is an error
enum
boolean
----False
successindicates there is a success
enum
boolean
----False
iconThe position of the icon in the input
enum
none | left | right
none False
nameThe name for the underlying input element
string
----
True
requiredThe input elements required attribute
enum
boolean
----False
typeSupported input element types
enum
text | search | email | password | tel | url
text False
valueThe input element value for controlled components
string
----False
onChangeCallback executed when the input fires a change event
(event: ChangeEvent<HTMLInputElement>) => void
----False
defaultValueThe initial input element value for uncontrolled components
string
----False
idThe id for the underlying input element. Required for accessibility
string
----
True
childrenUsed to insert Icons in the input, only a single child is accepted
enum
ReactNode
----False
onFocusCallback executed when the input fires a focus event
FocusEventHandler<HTMLInputElement>
----False
onBlurCallback executed when the input fires a blur event
FocusEventHandler<HTMLInputElement>
----False
errorMessageText displayed below the input to describe the cause of the error
enum
ReactNode
----False
helperTextText displayed below the input to provide additional context
enum
ReactNode
----False
onButtonIconClickCallback executed when the button icon on the right is click to perform an action
(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
----False