Text Fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Filled Input Plain text

Password

Image & Button

Logo + Icon

Icon + Button

Multi-line

Note

There is a design difference here. During the development process, we came to the conclusion that we find this outlined view more consistent and universal.

Outlined Input Plain text

Password

Image & Button

Logo + Icon

Icon + Button

Multi-line

Component props

Name
Type
Description
leftElementNodeSpecify the left element
rightElementNodeSpecify the right element
idStringSpecify input id
onChangeFunctionSpecify onChange function
onSubmitFunctionSpecify onSubmit function
nameStringSpecify the name of the input
typeStringSpecify input type
childrenNodeSpecify input placeholder
placeholderStringSpecify input placeholder
rowsNumberSpecify text field rows
colsNumberSpecify text field cols