Text input

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Import

Import the settings, the text-input and the field scss files.


@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.fields';

Usage

Supported input types

text
email
date
password
number
tel
number
search

Note that if you try to apply those CSS classes to an unsupported input type. It could work but you should find something which better suits to your needs in the documentation.

To insert an input text on a form field is to apply the following elements:

add the mc-field class on a html container element
add the mc-field__label class on a label
add the mc-field__inputclass in addition of the mc-text-input class on an input element


<div class="mc-field">
  <label class="mc-field__label" for="default"> Label </label>
  <input
    type="text"
    class="mc-text-input mc-field__input"
    id="default"
    placeholder="Text input"
    name="default"
  />
</div>

Variations

Available sizes

You can use one of the 2 available sizes :

Small : mc-text-input--s
Medium : this is the default style so you don't need to add a modifier class

Responsive classes

Breakpoint	`mc-text-input--s`	`mc-text-input--m`
From breakpoint m	`mc-text-input--s@from-m`	`mc-text-input--m@from-m`
From breakpoint l	`mc-text-input--s@from-l`	`mc-text-input--m@from-l`
From breakpoint xl	`mc-text-input--s@from-xl`	`mc-text-input--m@from-xl`
From breakpoint xxl	`mc-text-input--s@from-xxl`	`mc-text-input--m@from-xxl`

Using a left icon

To add a left icon, you need to import components/c.left-icon-input after the components/c.text-input.


@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.left-icon-input';
@import 'components/c.fields';

Wrap your input and use a 24px icon size :


<div class="mc-field">
  <label class="mc-field__label" for="withIcon"> Label </label>
  <div class="mc-left-icon-input">
    <svg class="mc-left-icon-input__icon">
      <use xlink:href="#iconS" />
    </svg>
    <input
      type="text"
      class="mc-text-input mc-left-icon-input__input mc-field__input"
      id="withIcon"
      placeholder="Input with an icon"
      name="withIcon"
    />
  </div>
</div>

Standard input size with left icon

Form validation

When using a form, you often need to validate the fields in the form to ensure that the data entered by the user complies with the validation criteria you expect.

To indicate to the user that the field he filled in is valid or not, Mozaic provides you with two dedicated CSS classes: is-valid and is-invalid.

CSS pseudo-classes :valid or :invalid

The CSS specification provides two pseudo-classes :valid and :invalid that can be used to style a field according to its validation state.

On Mozaïc we made the decision not to use these pseudo-classes because of the bad user experience it produces when loading the form.