Morningstar Design System

Selects
updated

  • HTML/CSS Available
  • Web Component In Progress
  • Last Updated

    2.7.0

Selects afford a single selection from a predefined list of options.

See Forms for guidance on composing full forms.

Variations

Default

Use when affording a single selection from a predefined list of options.

Default 
<div class="mds-form__select">
    <select class="mds-form__select-input">
        <option class="mds-form__select-option" value="">Select an Expense Type</option>
        <option class="mds-form__select-option" value="vacation">Vacation</option>
        <option class="mds-form__select-option" value="public_college">Public College</option>
        <option class="mds-form__select-option" value="private_college">Private College</option>
        <option class="mds-form__select-option" value="medical">Medical</option>
    </select>
    <div class="mds-form__select-visual-wrap"></div>
    <span class="mds-form__select-open-indicator">
        <svg class="mds-icon mds-form__select-open-icon" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#caret-down--s">
            </use>
        </svg>
    </span>
</div>
Disabled 
<div class="mds-form__select">
    <select class="mds-form__select-input" disabled>
        <option class="mds-form__select-option" value="">Select an Expense Type</option>
        <option class="mds-form__select-option" value="vacation">Vacation</option>
        <option class="mds-form__select-option" value="public_college">Public College</option>
        <option class="mds-form__select-option" value="private_college">Private College</option>
        <option class="mds-form__select-option" value="medical">Medical</option>
    </select>
    <div class="mds-form__select-visual-wrap"></div>
    <span class="mds-form__select-open-indicator">
        <svg class="mds-icon mds-form__select-open-icon" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#caret-down--s">
            </use>
        </svg>
    </span>
</div>

Sizing

Sizing affects select size, text size and internal spacing. The default size is medium, and you can use modifier classes or props to make the button smaller or larger.

Small
Medium (Default)
Large 
<div class="mds-form__select mds-form__select--small">
    <select class="mds-form__select-input" id="small-select">
        <option class="mds-form__select-option" value="">Select an option</option>
        <option class="mds-form__select-option" value="option_1">Option 1</option>
        <option class="mds-form__select-option" value="option_2">Option 2</option>
    </select>
    <div class="mds-form__select-visual-wrap"></div>
    <span class="mds-form__select-open-indicator">
        <svg class="mds-icon mds-form__select-open-icon" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#caret-down--s">
            </use>
        </svg>
    </span>
</div>

Guidelines

Don’t Use When

Behaviors

  • Display a user’s selected option after a choice is made.

Editorial

  • Display either “Select an Option” or no text at all as the default selected option.
  • Start the text with a verb.
  • Don’t end text in a select with a period.
  • Keep option names as brief as possible - aim for under 5 words.
  • Use title case.

Accessibility

  • Include an aria-describedby attribute on each select that has an .mds-form__microcopy or an .mds-form__field-error component providing additional information. The value of the aria-describedby attribute must match the id attribute on the .mds-form__microcopy or .mds-form__field-error component.
  • Always pair a Label with a select. Include a for attribute on each label with a value matching the id attribute on the corresponding select.

Code Reference

  • Always wrap grouped form elements in a mds-form__field-group container.
<div class="mds-form__field-group">
    <label class="mds-form__label" for="expense-type">Expense Type</label>
    <select class="mds-form__select-input" id="expense-type">
        <option class="mds-form__select-option" value="">Select an Expense Type</option>
        <option class="mds-form__select-option" value="vacation">Vacation</option>
        <option class="mds-form__select-option" value="public_college">Public College</option>
        <option class="mds-form__select-option" value="private_college">Private College</option>
        <option class="mds-form__select-option" value="medical">Medical</option>
    </select>
</div>

CSS Class References

Class
 Applies to
 Outcome

mds-form__select--small

mds-form__select

Adjusts styling to render a small select.

mds-form__select--large

mds-form__select

Adjusts styling to render a large select.

Web Component

Props

Prop Type Validation Default Description

ariaDescribedby

String

––

––

A space separated list of element id, often microcopy or a field error, whose content contains additional information about the select.

ariaInvalid

Boolean

––

––

Adds aria-invalid attribute`. Use when a select is in an error state.

class

String

––

––

A space-separated list of class names that will be appended to the default mds-form__select class.

disabled

Boolean

––

false

If true, sets the disabled attribute on the select, rendering it non-interactive, and applies disabled styling.

id

String

––

mds-select--[random-number]

The id attribute for the HTML element.

placeholder

String

––

––

Adds an <option> with this text to display by default in the select.

options

Array

––

––

An array to be rendred as <option> elements in the select.

Format as follows:
{text, value, class, disabled}

Both class and disabled can be omitted. To enable optgroup, use children prop.

required

Boolean

––

false

If true, adds the required attribute.

size

String

Enum: ["small", "medium", "large"]

medium

Alters the size of the select.

value

String

––

––

The value of the option selected. Omitting this selects an empty value option. Set the text for this empty value option using the placeholder prop.
  • Use kebab-case when setting props in HTML. For example, ariaDescribedby would be written as aria-describedby.

Additional Behaviors

Automatic ID Generation

If no value is provided for the id prop the component will automatically generate one for you.

Usage Examples

Setting options and selected value:

<mds-select options=”[{‘Option 1’, ‘option_1’}, {‘Option 2’, ‘option_2’}, {‘Option 3’, ‘option_3’}]” value=”option_2”></mds-select>

Setting placeholder and options:

<mds-select placeholder=”Choose...” options=”[{‘Option 1’, ‘option_1’}, {‘Option 2’, ‘option_2’}, {‘Option 3’, ‘option_3’}]”></mds-select>

Browser Support

  • This component uses a box-shadow property to create an outline. Internet Explorer and Safari have known issues rendering these outlines when using the browser's zoom functionality. This visual defect doesn't affect the functionality of the component.
©2018 Morningstar, Inc. All rights reserved. Terms of Use