Text area

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Use in a form context

Import

Import the settings, the text area and the fields scss files.


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

Note that the import order is important to get the right rendering of the component.

Usage

To use the text area in your form, you must use the following 3 CSS classes:

mc-field on container
mc-field__label on label
and mc-field__input in addition of the mc-textarea class on the standard textarea html tag:


<div class="mc-field">
  <label class="mc-field__label" for="foo"> Label </label>
  <textarea
    class="mc-field__input mc-textarea"
    name="foo"
    id="foo"
    rows="4"
    placeholder="placeholder"
  ></textarea>
</div>

Behaviors

Help text

You have the possibility to define a help text when using your text area.

For this you have to add a span with the mc-field__help class below the label.


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

Accessibility rules

When using a help text you must comply with the following accessibility rules:

the span mc-field__help must always have an id
the aria-describedby attribute must be added on the text area element and must refer to the id of the help text

Requirement

When the text area is mandatory you must specify it to the user.

For this you have to 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>

Semantic rule

When the text area is mandatory the required attribute must be added on the text area element

States and Validation

Valid

To indicate that a field is valid, the is-valid class must be added to the text area element.

Invalid

To indicate that a field is not valid several steps are to be implemented:

Add the is-invalid class and the aria-invalid attribute to the text area element
You can add in addition a text detailing the error. This text must be added in a span with the class mc-field__error-message and positioned below the field

Accessibility rules

If you use an error message you must comply with the following accessibility rules:

the span mc-field__error-message must always have an id
the aria-describedby attribute must be added on the text area element and must refer to the id of the error message

Disabled

To indicate that text area is disabled, the disabled attribute must be added to the text area element.

Use outside a form

In some cases you may need to use the text field outside of a form. To do this, the way to implement it is as follows:

Import


@import 'settings-tools/all-settings';
@import 'components/c.textarea';

Usage

Apply the classes mc-textarea on a standard textarea html tag:


<textarea
  class="mc-textarea"
  name="single"
  id="single"
  rows="4"
  placeholder="placeholder"
  aria-label="The label of your textarea"
></textarea>

Accessibility and semantic

Always use text area html tag for multi-line text

Use the rows attribute to set the text area height

Use a minimum of 3 rows

Provide minlength and/or maxlength attributes if a text length is required from the user

Never use the resize: none attribute for standards forms

Never use vertical-align: baseline