Text input

A text input components allows users to input short text.

Examples

Basic

Disabled

Truncated at start

Read only

Invalid

Select text using ref

Custom icon



Custom icon and invalid

Props

TextInput

*required
NameTypeDefaultDescription
aria-labelstringAria-label. The text input requires an associated id or aria-label.
classNamestringAdditional classes added to the text input.
customIconReact.ReactNodeCustom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon.
expandedPropsTextInputExpandedObjProp to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable.
isDisabledbooleanFlag to show if the text input is disabled.
Deprecated: isExpandedbooleanFlag to apply expanded styling. expandedProps should now be used instead.
Deprecated: isLeftTruncatedbooleanUse isStartTruncated instead. Trim text at start
isRequiredbooleanFlag indicating whether the input is required
isStartTruncatedbooleanTrim text at start
onBlur(event?: any) => voidCallback function when text input is blurred (focus leaves)
onChange(event: React.FormEvent<HTMLInputElement>, value: string) => voidA callback for when the text input value changes.
onFocus(event?: any) => voidCallback function when text input is focused
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
placeholderstringPlaceholder of the text input when there is no value
readOnlyVariant'plain' | 'default'Sets the input as readonly and determines the readonly styling.
type| 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url'Type that the text input accepts.
validated'success' | 'warning' | 'error' | 'default'Value to indicate if the text input is modified to show that validation state. If set to success, text input will be modified to indicate valid state. If set to error, text input will be modified to indicate error state.
valuestring | numberValue of the text input.

TextInputExpandedObj

*required
NameTypeDefaultDescription
ariaControlsrequiredstringId of the element that the text input is controlling expansion of.
isExpandedrequiredbooleanFlag to apply expanded styling.

CSS variables

Expand or collapse columnSelectorVariableValue