Select

Select

draft

Select boxes (drop-down lists) allow users to select a value from a list.

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="select">What option?</label>
            <select class="ds-select" id="select">
                <option value="option-1">Option 1</option>
                <option value="option-2">Option 2</option>
                <option value="option-3">Option 3</option>
                <option value="option-4">Option 4</option>
            </select>
        </div>

    </form>

</div>

Hint Text

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="select">What option?</label>
            <select class="ds-select" id="select">
                <option value="option-1">Option 1</option>
                <option value="option-2">Option 2</option>
                <option value="option-3">Option 3</option>
                <option value="option-4">Option 4</option>
            </select>
            <small class="ds-hint" id="text-hint">We need this to provide you the best advice.</small>
        </div>

    </form>

</div>

Required

draft

Add required attribute to input and <abbr class="ds-label__required" title="required">*</abbr> tag after label text

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="select">What option? <abbr class="ds-label__required" title="required">*</abbr></label>
            <select class="ds-select" id="select" required>
                <option value="option-1">Option 1</option>
                <option value="option-2">Option 2</option>
                <option value="option-3">Option 3</option>
                <option value="option-4">Option 4</option>
            </select>
        </div>

    </form>

</div>

Disabled

draft

Disabled select boxes are unusable and can not be clicked. This prevents a user from interacting with the input element until another action is complete. Disabled input elements in a form will not be submitted.

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="name">What option?</label>
            <select class="ds-select" id="select" disabled>
                <option value="option-1">Option 1</option>
                <option value="option-2">Option 2</option>
                <option value="option-3">Option 3</option>
                <option value="option-4">Option 4</option>
            </select>
        </div>

</form>

Invalid state

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="select">What option?</label>
            <select class="ds-select ds-select--invalid">
                <option value="option-1">Option 1</option>
                <option value="option-2">Option 2</option>
                <option value="option-3">Option 3</option>
                <option value="option-4">Option 4</option>
            </select>
            <small class="ds-hint" id="text-hint">We need this to provide you the best advice.</small>
            <small class="ds-hint ds-hint--invalid">Invalid message</small>
        </div>

    </form>

</div>

Valid state

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="select">What option?</label>
            <select class="ds-select ds-select--valid">
                <option value="option-1">Option 1</option>
                <option value="option-2">Option 2</option>
                <option value="option-3">Option 3</option>
                <option value="option-4">Option 4</option>
            </select>
            <small class="ds-hint" id="text-hint">We need this to provide you the best advice.</small>
            <small class="ds-hint ds-hint--valid">Invalid message</small>
        </div>

    </form>

</div>

Select small

draft

use `ds-select--small` modifier for a compact version

<div class="ds-block">

    <form class="ds-form">
        
        <div class="ds-form-group">
            <label class="ds-label" for="student-type">Student type</label>
            <select class="ds-select ds-select--small" id="student-type">
                <option value="option-1">Domestic students</option>
                <option value="option-2">International students</option>
            </select>
        </div>

    </form>

</div>