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.
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
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| buttonIconText | Accessible text for button icon, required for right icons | string | ---- | False |
| icon | The position of the icon in the input | "left" | "right" | "none" | none | False |
| error | Indicates there is an error | boolean | ---- | False |
| success | indicates there is a success | boolean | ---- | False |
| disabled | The underlying input element disabled attribute | boolean | ---- | False |
| label | The input's label text, required for accessibility | string | ---- | True |
| name | The name for the underlying input element | string | ---- | True |
| placeholder | placeholder text | string | ---- | False |
| required | The input elements required attribute | boolean | ---- | False |
| type | Supported input element types | "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 | 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 |
| css | WPDS 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 |
| buttonIconType | Explicit button icon typing for use in forms | "button" | "reset" | "submit" | button | False |
| errorMessage | Text displayed below the input to describe the cause of the error | ReactNode | ---- | False |
| helperText | Text displayed below the input to provide additional context | ReactNode | ---- | False |
| onButtonIconClick | Callback executed when the button icon on the right is click to perform an action | (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void | ---- | False |