TextInput

In progress

Indeed, forms require input from all users, including astronauts. Text input fields help to gather both short and long-form information. The size of the text field should correspond to the length of information that's required.

Text input fields can contain various rules to ensure the right information is obtained from users. Users should also be given prompts to guide them on what's needed, or if they've made an error while doing so.

Default

Sizes

Disabled

Error

Readonly

Without Label

Hint message

Custom background colour

TextInput types

TextInput props

NameTypeRequiredDefaultDescription
bgColorstringNotransparentBackground colour
dirltr | rtl | autoNo-RTL/LTR direction of label
hintTextJSX.Element | stringNo-Informative/error message below input
idstringNo-Sets input id
inputSizesm | md | lg | xlNomdInput size
isErrorbooleanNofalseSets error state for input
isFirstbooleanNofalseSets input styles as the first in a group
isSharpBottomSidebooleanNofalseRemoves border roundness from the bottom
isSharpLeftSidebooleanNofalseRemoves border roundness from the left
isSharpRightSidebooleanNofalseRemoves border roundness from the right
isSharpTopSidebooleanNofalseRemoves border roundness from the top
isSideBorderHiddenbooleanNofalseRemoves vertical borders
isTopBottomBorderHiddenbooleanNofalseRemoves horizontal borders
labelJSX.Element | stringNo-Label for input
placeholderstringNo-Placeholder for input
showPasswordTextJSX.Element | stringNo-Input type password only. Text for show/hide password
typedate | datetime-local | email | number | password | search | tel | text | time | url | stringNotextInput type