Components

Text input

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready

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.

Viewport: px
<div class="example">
<input type="text" class="mc-text-input" placeholder="Input default" name="example-medium" />
</div>
<div class="example">
<input type="text" class="mc-text-input mc-text-input--s" placeholder="Input small" name="example-small" />
</div>

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.