Design system

Input Text

Note: This component status is in draft and indicates the component is actively being worked on.

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

Install:

npm install @washingtonpost/wpds-input-text|Copy

Usage:

import { InputText } from "@washingtonpost/wpds-input-text"|Copy

Table of Contents

Anatomy

Note: Image is not to scale

Input value
Label/Placeholder
Border
Button Icon
Contextual Icon (non-actionable)
Optional Helper text

Options

Icon

Icon has two placements left or right.


Open in Playroom

Types

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


Open in Playroom

Helper Text

Input text supports an optional help text.


Open in Playroom

Behavior

Focus

Click input text component to demostrate focus.


Open in Playroom

Error


Open in Playroom

Success


Open in Playroom

Required


Open in Playroom

Disabled


Open in Playroom

Text Overflow

Overflow of the input value is indicated by an ellipse.


Open in Playroom

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.


Open in Playroom

API Reference

Prop	Description	Type	Default	Required
buttonIconText	Accessible text for button icon, required for right icons	string	----	False
label	The input's label text, required for accessibility	string	----	True
disabled	The underlying input element disabled attribute	enum boolean	----	False
error	Indicates there is an error	enum boolean	----	False
success	indicates there is a success	enum boolean	----	False
icon	The position of the icon in the input	enum none \| left \| right	none	False
name	The name for the underlying input element	string	----	True
required	The input elements required attribute	enum boolean	----	False
type	Supported input element types	enum text \| search \| email \| password \| tel \| url	text	False
value	The input element value for controlled components	string	----	False
onChange	Callback executed when the input fires a change event	(event: ChangeEvent<HTMLInputElement>) => void	----	False
defaultValue	The initial input element value for uncontrolled components	string	----	False
id	The id for the underlying input element. Required for accessibility	string	----	True
children	Used to insert Icons in the input, only a single child is accepted	enum ReactNode	----	False
onFocus	Callback executed when the input fires a focus event	FocusEventHandler<HTMLInputElement>	----	False
onBlur	Callback executed when the input fires a blur event	FocusEventHandler<HTMLInputElement>	----	False
errorMessage	Text displayed below the input to describe the cause of the error	enum ReactNode	----	False
helperText	Text displayed below the input to provide additional context	enum ReactNode	----	False
onButtonIconClick	Callback executed when the button icon on the right is click to perform an action	(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void	----	False