Text Fields

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

Filled Input

Plain Text

Password

Image & Button

img

Logo + Icon

img

Icon + Button

Multi-line

Outlined Input

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.

Plain Text

Password

Image & Button

img

Logo + Icon

img

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