Text inputs allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.
Text inputs usage in Otillia
|
Component |
Usage |
User Actions |
|---|---|---|
|
Text input |
Allow users to provide information. They typically appear in forms and dialogs. |
The user needs to add information. Some of these inputs are mandatory. |
Anatomy
Structure
|
|
|
label |
Indicates the name of the information asked to the user. |
|
required |
Indicates that the field is required in order to proceed or submit. |
|
input |
The box where the interaction happens. |
|
placeholder |
The inner text should display a short instruction to the user. |
|
hint |
Used to show assistive information or any requirement that causes failure/success. |
Sizes and spaces
|
The width of the element is flexible and they can vary accordingly to the need and the context.
Paddings and margins should be respected. |
Properties
|
Property |
Values |
|---|---|
|
Size |
medium large |
|
State |
default disabled hover active error success read-only |
|
Filled |
true false |
|
Hint |
true false |
Guidelines
|
|
|
|