Select

This component styles native <select> elements and integrates with the Form control wrapper for consistent spacing, error presentation, sizes, and grouping. Use the c-select class to apply the visual treatment and behavior to dropdowns, including single and multiple selects with optional optgroup support.

When to use it

Use <select class="c-select"> for native dropdowns when you:

• Want a consistent styling across all browsers, even without JavaScript
• Don’t need searchable dropdowns (see Form-control for when you do)
• Best possible performance and screen reader support (since we don't hijack anything with JavaScript)

Variants

Use c-select--small to get a smaller variant.

Use multiple size="1" when a native select should support several selected options while keeping the dropdown picker shape. Browser support varies for the closed value: Chromium currently shows a count such as "2 selected" in plain HTML/CSS, while the picker itself can still show a checkmark on each selected option.

TIP

To override the default border radius, set --input-radius to a different value. This also affects the Datepicker surface.

WARNING

Make sure your code does not hijack the behavior of the <select> elements using a third-party library like ChosenJS. If you do, you must disable searchability with data-disable-search or similar.

What it looks like

Code examples

Normal

<select name="select" id="allornothing" class="c-select">
    <option value="">Nothing</option>
    <option value="all">All</option>
</select>

Custom markup

<select name="select" id="allornothing0" class="c-select">
    <button>
        <selectedcontent></selectedcontent>
    </button>
    <option value="">
        <div class="o-flex">
            <span>Nothing</span>
            <span>(0)</span>
        </div>
    </option>
    <option value="all">
        <div class="o-flex">
            <span>All</span>
            <span>(100)</span>
        </div>
    </option>
</select>

With label

<div class="c-form-control">
    <label class="c-label" for="allornothing1">Select menu</label>
    <select name="select" id="allornothing1" class="c-select">
        <option value="">Nothing</option>
        <option value="all">All</option>
    </select>
</div>

With error

<div class="c-form-control has-error">
    <label class="c-label" for="allornothing2">Select menu, error</label>
    <select name="select" id="allornothing2" class="c-select" aria-invalid="true" aria-describedby="allornothing2-error">
        <option value="">Nothing</option>
        <option value="all">All</option>
    </select>
    <span id="allornothing2-error" class="c-box c-box--small c-box--negative">Form error message</span>
</div>

Grouped

<div class="c-form-control">
    <label class="c-label" for="optgroup-menu1">Select menu, grouped</label>
    <select name="select" id="optgroup-menu1" class="c-select">
        <optgroup label="Group 1">
            <option value="1" selected>Option 1</option>
            <option value="2">Option 2</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </optgroup>
    </select>
</div>

Grouped (with legends)

<div class="c-form-control">
    <label class="c-label" for="optgroup-menu2">Select menu, grouped</label>
    <select name="select" id="optgroup-menu2" class="c-select">
        <optgroup label="Group 1">
            <legend>Group 1</legend>
            <option value="1" selected>Option 1</option>
            <option value="2">Option 2</option>
        </optgroup>
        <optgroup label="Group 2">
            <legend>Group 2</legend>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </optgroup>
    </select>
</div>

Multiple options

<div class="c-form-control">
    <label class="c-label" for="countries">Countries</label>
    <select name="countries" id="countries" class="c-select" multiple size="1">
        <button>
            <selectedcontent></selectedcontent>
        </button>
        <option value="dk" selected>Denmark</option>
        <option value="se" selected>Sweden</option>
        <option value="no">Norway</option>
        <option value="fi">Finland</option>
    </select>
</div>

Accessibility notes

• Always associate the <label> with the <select> via for and id.
• For errors, set aria-invalid="true" on the <select> and link an error message with aria-describedby.
• Use <optgroup> with clear labels to structure long lists.
• For multiple selects, consider helper text to explain multi-selection (e.g., Ctrl/Cmd to select).
• multiple size="1" keeps the browser's dropdown picker shape where customizable selects are supported. In browsers without that support, prefer Select search, which falls back to a visible multi-row native listbox instead of a broken pseudo-dropdown.
• Keep the native <select> where possible for reliable keyboard, focus, and screen reader behavior.