Components

Fields

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
: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>