Text Input

Accepts variable amounts of freeform user input.

Examples

Default Text Input

Label

Required

Label

Required

<TextInput 
  required
  label="Label"
  placeholder="Placeholder"
  id="default-input"
  size="small|medium(default)" 
/>

With Helper Text

Label

Helper Text

Label

Helper Text

<TextInput 
  ... 
  helperText="Helper Text" 
/>

With Critical, Warning, Success, and Disabled States

Label

Some kind of error

Label

Some kind of error

Label

Some kind of warning

Label

Some kind of warning

Label

Some kind of success

Label

Some kind of success

Label

No touching!

Label

No touching!

<TextInput 
  ...
  state="critical|warning|success"
/>

With a Multiline Input

Label

Label

<TextInput 
  ...
  multiline
  rows="5"
/>

With Icons

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

<TextInput 
  ...
  iconStart={"placeholder" | <Icon name="placeholder" />}
  iconEnd={"placeholder" | <Icon name="placeholder" />}
/>

Controlled Text Input

Label

Required

Label

Required

<TextInput 
  value={someValue}
  onChange={(evt, value) => ...}
/>

Props

Name	Type	Default Value	Required	Description
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
iconEnd	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null		No	An icon to render at the end of the input.
iconStart	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null		No	An icon to render at the front of the input.
label	ReactNode		No	A string or component to display as a label above the input
multiline	boolean	false	No	Should a textarea be used instead of an input?
onChange	FormControlChangeEventHandler<InputType, string | number | readonly string[] | (string | number | readonly string[])[]> | undefined		No	Emit a new value when the input's selected value changes.
required	boolean	false	No	Is the field required?
resize	boolean	false	No	Can the textarea be resized?
rows	string | number		No	How many rows call should the multiline input be?
size	"small" | FormControlSize | "medium"	FormControlSize.Medium	No	The size of the field
state	"" | FormControlState | "critical" | "warning" | "success"	FormControlState.Default	No	The state of the field

Enums

FormControlSize

Key	Value
Small	"small"
Medium	"medium"

FormControlState

Key	Value
Default	""
Critical	"critical"
Warning	"warning"
Success	"success"