Mozaic

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>

Viewport: px

<div class="example">
  <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>
</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

Viewport: px

<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="defaultSelect">
      Label
    </label>
    
    <select id="defaultSelect" 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>
</div>

<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="smallSelect">
      Label
    </label>
    
    <select id="smallSelect" class="mc-field__input mc-select mc-select--s">
      <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>
</div>

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

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>
    
    <select 
      aria-describedby="helptext"
      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>
</div>

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

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>
    
    <select 
      required
      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>
</div>

States and Validation

Valid

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

Viewport: px

<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
    </label>
    
    <select 
      id="foo"
      class="mc-field__input mc-select is-valid">
      <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>
</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 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

Viewport: px

<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
    </label>
    
    <select 
      aria-invalid="true"
      aria-describedby="err_1"
      id="foo"
      class="mc-field__input mc-select is-invalid">
      <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>

    <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 the select is disabled, the disabled attribute must be added to the select element.

Viewport: px

<div class="example">
  <div class="mc-field">
    <label class="mc-field__label" for="foo">
      Label
    </label>
    
    <select 
      disabled
      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>
</div>

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 class="mc-select">
  <option value="">-- Choose an option --</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Viewport: px

<div class="example">
  <select id="foo" class="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

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.