Fields

figma:ready

scss:ready

freemarker:ready

vue:ready

Import

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


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

Basic usage

To create a field you have three main class to apply:

mc-field on container
mc-field__label on label
and mc-field__input in addition of the mc-text-input class on the text-input field


<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="Input default"
    name="example-default"
  />
</div>

Variations

Input variations

You can use any of the existing text-input component variations.

Read the Text input component documentation for more information.

Requirement

Add a span with the class mc-field__requirement right after the label


<label class="mc-field__label">
  Label
  <span class="mc-field__requirement"> mandatory </span>
</label>

Help

Add a span with the class mc-field__help below the label


<label class="mc-field__label"> Label </label>
<span class="mc-field__help"> Help text </span>

Behaviors

Standard input states

:disabled
.is-valid
.is-invalid