Fields

figma:ready

scss:ready

freemarker:ready

vue:ready

Accessibility and semantic

Always use field inside a form


<form>
  <div class="mc-field">
    ...
  </div>
</form>

Always use a label with an input.


<div class="mc-field">
  <label class="mc-field__label" for="myExample">
    My example
  </label>
  <input
    type="text"
    class="mc-text-input mc-field__input"
    id="myExample"
    placeholder="Example field"
    name="example"
  />
</div>

About the aria-label attribute

In case you are not able to use a label tag in association with your input tag, you must imperatively make up for the lack of the label tag by adding an attribute aria-label="content-of-your-label" on your input tag.


<input
  type="text"
  class="mc-text-input mc-field__input"
  id="example"
  aria-label="This is my label"
  name="example"
/>

Help field

The instructions should be ref by aria-describedby in input


<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>

Required field

If an input field is mandatory, then the required and aria-required attributes must be filled in on the text input field. And so the aria-hidden attribute must be field on requirement message.


<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>

Invalid field

A text field is invalid when its value does not match the expected type. When a field is invalid, the aria-invalid attribute and the aria-describedBy must be added dynamically to the input field in order to indicate it to screen readers.


<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>