Text input

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Accessibility and semantic

Always use a label with an input.


<label for="myExample">My example</label>
<input
  id="myExample"
  type="text"
  class="mc-text-input"
  placeholder="Empty"
  name="example"
/>

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"
  id="example"
  aria-label="This is my label"
  name="example"
/>

Required field

If an input field is mandatory, then the required and aria-required attributes must be filled in.


<label for="requiredField">Required field</label>
<input
  id="requiredField"
  type="text"
  class="mc-text-input"
  placeholder="Is required"
  name="example"
  required
  aria-required="true"
/>

Invalid input

When a field is invalid, you must:

add the class is-invalid to the field in order to modify its appearance
add the aria-invalid attribute to indicate to the screenreaders that the field is invalid


<label for="invalidField">Invalid field</label>
<input
  id="invalidField"
  type="text"
  class="mc-text-input is-invalid"
  placeholder="Is invalid"
  name="example"
  aria-invalid="true"
/>