TextInput Component Playground

Interactive playground to test all TextInput props and variants

Props

Text displayed above the input

Visual state of the input

Current State

State: default

Required: Yes

Preview

*
Hint or Helper Text
<TextInput label="Label Text" required supportingText="Hint or Helper Text" placeholder="Placeholder Text" onChange={(e) => { /* handle change */ }} />
{
  "label": "Label Text",
  "required": true,
  "state": "default",
  "value": "",
  "onChange": "(function)",
  "placeholder": "Placeholder Text",
  "supportingText": "Hint or Helper Text"
}

Default

*

Focus

*

Typing

*

Filled

*

Disabled

*

Success

*

Error

*