Components

Text area

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
freemarker
:Ready
webComponent
:Ready
Usage
Code
Specs
Design

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>
Viewport: px 
<div class="example">
  <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>
</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
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
    </label>
    <span id="helptext" class="mc-field__help">
      Help text
    </span>
    
    <textarea
      aria-describedby="helptext"
      class="mc-field__input mc-textarea"
      name="foo"
      id="foo"
      rows="4"
      placeholder="Textarea with help text"
    ></textarea>
  </div>
</div>

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

Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
      <span class="mc-field__requirement">
        mandatory
      </span>
    </label>
    
    <textarea
      required
      class="mc-field__input mc-textarea"
      name="foo"
      id="foo"
      rows="4"
      placeholder="Required textarea"
    ></textarea>
  </div>
</div>

States and Validation

Valid

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

Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
    </label>
    
    <textarea
      class="mc-field__input mc-textarea is-valid"
      name="foo"
      id="foo"
      rows="4"
      placeholder="This is a VALID textarea"
    ></textarea>
  </div>
</div>

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
Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
    </label>
    
    <textarea
      aria-invalid="true"
      aria-describedBy="err_1"
      class="mc-field__input mc-textarea is-invalid"
      name="foo"
      id="foo"
      rows="4"
      placeholder="This is an INVALID textarea"
    ></textarea>


    <span id="err_1" class="mc-field__error-message">
      Error: A mistake has been made. Please try again.
    </span>
  </div>
</div>

Disabled

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

Viewport: px 
<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
    </label>
    
    <textarea
      disabled
      class="mc-field__input mc-textarea"
      name="foo"
      id="foo"
      rows="4"
      placeholder="This field is disabled"
    ></textarea>
  </div>
</div>

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"
></textarea>
Viewport: px 
<div class="example">
  <textarea
    class="mc-textarea"
    name="single"
    id="single"
    rows="4"
    placeholder="placeholder"
  ></textarea>
</div>

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