Components

Fields

scss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
Usage
Code
Accessibility
Specs

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>
Viewport: px 
<div class="example">
  <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>
</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>
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="requiredField">
      Label
      <span class="mc-field__requirement" aria-hidden="true">
        mandatory
      </span>
    </label>


    <input
      required
      aria-required="true"
      type="text"
      class="mc-text-input mc-field__input"
      placeholder="Required field"
      name="example-requirement"
      id="requiredField"
    />
  </div>
</div>

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>
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="helpField">
      Label
    </label>


    <span id="helptext" class="mc-field__help">
      Help text
    </span>


    <input
      aria-describedby="helptext"
      type="text"
      class="mc-text-input mc-field__input"
      id="helpField"
      placeholder="Field with help text"
      name="example-help"
    />
  </div>
</div>

Behaviors

Standard input states

  • :disabled
  • .is-valid
  • .is-invalid
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="disabledField">
      Label
    </label>


    <input
      disabled
      type="text"
      class="mc-text-input mc-field__input"
      id="disabledField"
      placeholder="Disabled"
      name="example-disabled"
    />
  </div>
</div>


<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="validField">
      Label
    </label>


    <input
      type="text"
      class="mc-text-input mc-field__input is-valid"
      id="validField"
      placeholder="Valid"
      name="example-valid"
    />
  </div>
</div>


<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="invalidField">
      Label
    </label>


    <input
      aria-invalid="true"
      aria-describedBy="err_1"
      type="text"
      class="mc-text-input mc-field__input is-invalid"
      id="invalidField"
      placeholder="Invalid"
      name="example-invalid"
    />


    <span id="err_1" class="mc-field__error-message">
      Error: the adress field should be at least 32 characters long
    </span>
  </div>
</div>