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: 6.08 kB
Install: 
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage: 
import { InputText } from "@washingtonpost/wpds-ui-kit"
|Copy
Source: View on Github

Table of Contents

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

Edit this page on GitHub.