Drop-down List

On this page we will go through our Select input component

We have defined two different drop-down list. One default which is the large version and one small. Below you will find the way to integrate our select element component into your implementations.

Table of contents

Overview

Each select input component is based on a global CSS class called “msds-select-input”. It is important to include it first as it is the main CSS class. Without it, the UI of the component won’t work. You can find mainly 2 types of drop-down lists, the default drop-down lists which is the large version and a smaller version.

In order the drop-down lists to work, you need to create a variable from the window.msds.select-input object defined in our select-input.js then call the init function specifying the id of element it is linked to which represents the instance of the select input well. The options represents the different values availble in the select dropdown, validationMsg is a string that should be shown if the component is not validated. placeholder represents the placeholder in the initial load of the component and finally the isRequired is a boolean that determins whether or not the component is required to be filled out.

Also, note that the drop-down lists width is adaptive which means that it is based on the parent placeholder width.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-5">
                <div id="input-1" class="msds-select-input">
                    <select name="color" class="msds-select-input__select" aria-placeholder="test">
                    </select>
                    <div class="msds-select-input__icon">
                        <svg title="flat-icon">
                            <use href="../../msds-spritemap.svg#right-arrow" />
                        </svg>
                    </div>
                    <div class="msds-select-input__validation-msg msds-text-body-4 msds-text-danger-red-1"></div>
                </div>
            </div>
        </div>
    </div>
</form>

    //Initialize the select input with the element id, an object of countries, a validation message, a place holder and required is true.
    const input = new SelectInput('input-1',{ dk: 'Denmark', en: 'England', po: 'Poland' },'validationMsg','Select Country',true)
    input.init()

Sizes

Our select input can be rendered in 2 different sizes, large (default) and small.

<div class="col-12 col-md-6">
    <h3>Large Size (default)</h3>
    <div id="input-default" class="msds-select-input">
        <select name="color" class="msds-select-input__select" aria-placeholder="test">
        </select>
        <div class="msds-select-input__icon">
            <svg title="flat-icon">
                <use href="../../msds-spritemap.svg#right-arrow" />
            </svg>
        </div>
        <div class="msds-select-input__validation-msg msds-text-body-4 msds-text-danger-red-1"></div>
    </div>
</div>

<div class="col-12 col-md-6">
    <h3>Small Size</h3>
    <div id="input-small" class="msds-select-input">
        <select class="msds-select-input__select msds-select-input__select--small" aria-placeholder="test"></select>
        <div class="msds-select-input__icon">
            <svg title="flat-icon"><use href="../../msds-spritemap.svg#right-arrow" /></svg>
        </div>
        <div class="msds-select-input__validation-msg msds-text-body-4 msds-text-danger-red-1"></div>
    </div>
</div>

Features

By default our select input is not set to requried. However, its possible to set the required flag when creating the object. The required input is resembled by adding a star to the placeholder

Validation

when an error occurs, the following look and feel will be applied.

    //Initialize the select input with the element id, an object of countries, a validation message, a place holder and required is true.
    const input = new SelectInput('input-1',{ dk: 'Denmark', en: 'England', po: 'Poland' },'Error message','Select Country',true)
    input.init()
    input.isValid()