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

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
errorIndicates there is an error
enum
boolean
----False
successindicates there is a success
enum
boolean
----False
disabledThe underlying input element disabled attribute
enum
boolean
----False
iconThe position of the icon in the input
enum
left | right | none
none False
nameThe name for the underlying input element
string
----
True
placeholderplaceholder text
string
----False
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
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS
----False
buttonIconTypeExplicit button icon typing for use in forms
enum
button | reset | submit
button 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
Edit this page on GitHub.