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

No variants exists yet but if you use this component within a Form-control you can add c-form-control--small or c-form-control--large on that wrapper to adjust the select’s visual size.

TIP

To override the default border radius, set --input-radius to a different value.

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 (multiple)

<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">
            <option value="1" selected>Option 1</option>
            <option value="2">Option with a long name 2</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="7">Option with a long name 7</option>
            <option value="8">Option with a long name 8</option>
        </optgroup>
    </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).
• Keep the native <select> where possible for reliable keyboard, focus, and screen reader behavior.