Design system

Input Text

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

Bundle size: NaN undefined
Install:
npm install @washingtonpost/wpds-input-text
|Copy
Usage:
import { InputText } from "@washingtonpost/wpds-input-text"
|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

PropTypeDefaultRequired
buttonIconText
string
----False
label
string
----
True
disabled
enum
boolean
----False
error
enum
boolean
----False
success
enum
boolean
----False
icon
enum
none | left | right
none False
name
string
----
True
required
enum
boolean
----False
type
enum
text | search | email | password | tel | url
text False
value
string
----False
onChange
(event: ChangeEvent<HTMLInputElement>) => void
----False
defaultValue
string
----False
id
string
----
True
children
enum
ReactNode
----False
onFocus
FocusEventHandler<HTMLInputElement>
----False
onBlur
FocusEventHandler<HTMLInputElement>
----False
errorMessage
enum
ReactNode
----False
helperText
enum
ReactNode
----False
onButtonIconClick
(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
----False