Component documentation

Basics

Components

Objects

Utilities

Select Input

A dropdown with options. Uses the standard HTML select element. Don't forget the .c-select-holder wrapper element.

Label

<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group">
        <label class="o-form-group__label" for="selectId">Label</label>
        <div class="o-form-group__controls">
            <div class="c-select-holder">
                <select class="c-select" id="selectId">
                    <option>Option A</option>
                    <option>Option B</option>
                    <option>Option C</option>
                </select>
            </div>
        </div>
    </div>
</div>

.o-form-group-layout.o-form-group-layout--standard
    .o-form-group
        label.o-form-group__label(for="selectId") Label
        .o-form-group__controls
            .c-select-holder
                select.c-select(id="selectId")
                    option Option A
                    option Option B
                    option Option C

Select with optgroups

Example of select element with option groups.

Label

<div class="o-form-group-layout o-form-group-layout--standard">
    <div class="o-form-group">
        <label class="o-form-group__label" for="selectId2">Label</label>
        <div class="o-form-group__controls">
            <div class="c-select-holder">
                <select class="c-select" id="selectId2">
                    <optgroup label="Group 1">
                        <option>Item 1</option>
                        <option>Item 2</option>
                        <option>Item 3</option>
                    </optgroup>
                    <optgroup label="Group 2">
                        <option>Item 1</option>
                        <option>Item 2</option>
                    </optgroup>
                </select>
            </div>
        </div>
    </div>
</div>

.o-form-group-layout.o-form-group-layout--standard
    .o-form-group
        label.o-form-group__label(for="selectId2") Label
        .o-form-group__controls
            .c-select-holder
                select.c-select#selectId2
                    optgroup(label="Group 1")
                        option Item 1
                        option Item 2
                        option Item 3
                    optgroup(label="Group 2")
                        option Item 1
                        option Item 2