Subcomponents

This component has 3 subcomponents:

Control

The control subcomponent is required to render the Control of the TextInput component. Because of this, this component extends the native <input> component props. Because of this, you can use all of the native props. This is a required children.

Control API

Notice that there is a difference between using hasError, isDisabled, isReadOnly here or in the parent component. It is not recommended to change this props in the Control subcomponent, because this props can be inherited from the Wrapper. If you use it in the Control subcomponent, you will get the state only in the field.

Props	Type	Required
defaultValue	string | number | readonly string[] | undefined;	❌
hasError	boolean	❌
isDisabled	boolean	❌
isReadOnly	boolean	❌
prefix	string	❌
sufix	string	❌
maxLength	number	❌
lettersOnly	boolean	❌
alphanumericOnly	boolean	❌
icon	AvailableTelicon	❌
hasClearAction	boolean	❌
clearActionVisibility	'auto' | 'always'	❌
customFilter	(value: string) => string;	❌
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void;	❌
onClean	() => void;	❌

value

The value of the TextInput when using a controlled approach.

defaultValue

This sets a default value for the input when the DOM is rendered. This should be used when having an uncontrolled approach.

prefix

Adds extra information on the left side of the Input. Usually value unities.

sufix

Adds extra information on the right side of the Input. Usually value unities.

icon

To render a custom icon in the TextInput.

hasClearAction

To render an 'x' icon, that if, uncontrolled, will clean the input.

clearActionVisibility

The behavior to show the 'x' icon in the input.

onClean

Function executed when the 'x' button is clicked.

maxLength

Indicates a max length value to write in the input component

customFilter

Function where developers can create their own filters

HelpText

The helptext subcomponent renders the children passed below the field as a string. This is made like this so you can have full control over the component.

Helptext API

The control subcomponent is required to render the HelpText of the TextInput component. Because of this, this component extends the native span component props.

Props	Type	Required
children	ReactNode	✅

Label

The Label subcomponent extends the SDS label component. See for reference: Label