Select

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Use in form context

Import

Import the settings, the select and the fields scss files.


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

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

Usage

To use the select in your form, you must use the following css classes:

mc-field on a container
mc-field__label on label tag
and mc-field__input in addition of the mc-select class on the native select html tag:


<div class="mc-field">
  <label class="mc-field__label" for="foo"> Label </label>
  <select id="foo" class="mc-field__input mc-select">
    <option value="" selected disabled>-- Choose an option --</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

Variations

Available sizes

You can use one of the 2 available sizes:

Small: apply the modifier mc-select--s in addition of the mc-select class

Medium: this is the default style so you don't need to add a modifier class

Behaviors

Help text

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

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 select element and must refer to the id of the help text

Requirement

When the select 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 select is mandatory the required attribute must be added on the select element

States and Validation

Valid

To indicate that a field is valid, the is-valid class must be added to the select 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 select 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 select element and must refer to the id of the error message

Disabled

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

Use outside a form

In some cases you may need to use the select 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.select';

Usage

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

When you use a select outside of a form, you should not wrap it in the mc-field container


<select id="foo" class="mc-select" aria-label="The label of your Select">
  <option value="" selected disabled>-- Choose an option --</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Variations

Default option (as a placeholder)

By default, the first option is displayed. You can use it as a placeholder, but remember to distinguish it from the rest of options and to add an empty value attribute. Always use '--' before and after the first option with spaces between the dashes and the text.


<select class="mc-select">
  <option value="">-- Select one option --</option>
  <option value="option2">Option 1</option>
  <option value="option3">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Accessibility and semantic

Use <option> for elements of your list <select>.
Each <option> element should have a value attribute with data.

You must always use the native select element.

Never use the "multiple" attribute on a select, prefer checkboxes instead.

Don't use the "hidden" attribute on an option because it is not suproted by Safari.

Never add a "selected" attribute on an option.