Preview
Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
Variations
Sizes
We have two different sizes of text inputs to answer differents needs. You can use both cases to suit your interface the best.
Just keep in mind touch devices when placing smaller elements near each others.
Input with icon
Use a left icon to inform about a specific information type or formatting you expect from the user.
Do's and don'ts
Input text must have an explicit label.
Use Input text for monoline text. For multiple lines, use a textarea instead.
Always use a label associated with an input, even using placeholders
Never use different text input sizes together.
Never use a medium input with a small button.