Date Time

The TextInput wrapper component is used when you need to let users enter the text of some kind, such as their name or phone number etc.

All TextInput could include visible labels, placeholder, hint text. Also, all standard form attributes are supported e.g. required, disabled, readonly. Input inside TextInput wrapper component has a transparent background but could be configured by props.

TextInput comes with three sizes: medium, large and xLarge, which are configured by required prop inputSize. TextInput medium and large sizes have an outside label view, while TextInput xLarge size has an inner label view.

For mobile, the usage of respected keyboards is recommended, f.e. if it's likely that the user will need to enter a number and you want to bring up the numeric keypad on a mobile device.

The TextInput support a range of input formats, some of which include automatic browser validation. These can be set by providing HTML input type attributte.

Label

Label RTL

Without Label

Hint message

Disabled

Error

Input with background color

Readonly

Props for TextInput component

NameTypeRequiredDefaultDescription
inputSizemedium | large | xlargeYesmediumInput size
typeTextInputTypesYestextDifferent types of input
labelJSX.Element | stringNoRequired for medium size
placeholderstringNoPlaceholder for input
idstringNo-Set input id
hintTextJSX.Element | stringNoInformative or error message under input
isErrorbooleanNoSet error state for input
showPasswordTextJSX.Element | stringNoOnly for input type password. Text for toggle button: show/hide password
backgroundColorColorPropsNotransparentBackground color