Text Input
Beta

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
appearance
default | subtle
visual style (from TextInput.appearances)
default
disabled
boolean
standard input disable flag
false
error
boolean
error state flag
false
icon
Icon
Icon component
iconAlign
left | right
horizontal icon placement (from TextInput.iconAligns)
left
innerRef
DOM element => ()
input field react ref callback
label
string
identifying string for input
placeholder
string
in-field usage hint
subLabel
string
supporting text or error messaging

The normal React form-related props are also acceptable and expected.

Primary identification of a text input comes through the label. Usage hints are given in the placeholder. Supporting text and error messaging is set in the subLabel.

Text Inputs may include an icon to the left or right of the field. Read more in the icon docs.

When using the dark theme, a subtle appearance is available.

Disabled text inputs are unmodifiable and diminished visually.

Error states are engaged with the error flag. Error-related messaging is sent to the subLabel prop.