Select
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 containermc-field__label
on label tag- and
mc-field__input
in addition of themc-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 themc-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>
When using a help text you must comply with the following accessibility rules:
- the span
mc-field__help
must always have anid
- 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>
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 thearia-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
If you use an error message you must comply with the following accessibility rules:
- the span
mc-field__error-message
must always have anid
- 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.
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.