Skip to main contentSkip to site searchSkip to component search
Honeycomb

Select

The select allows users to select a single option from a list.

Modifiers list

Here is a list of available modifiers for an element:

flix-select--active
triggers visual active state
flix-select--valid
triggers visual valid state
flix-select--error
triggers visual error state
flix-select--disabled
triggers visual disabled state
flix-select--no-label
use if select without label is needed (this makes sure all the icons and other elements still placed properly)
flix-select--multiple
applies correct styles for select with `multiple` attribute

Normal and active states

Select boxes have same style options as normal inputs with a similar approach.

<div class="flix-form-row">
    <div class="flix-select">
        <label class="flix-select__label flix-label" for="select-simple">Countries</label>
        <select id="select-simple" class="flix-select__field">
            <option value="1">Germany</option>
            <option value="2">France</option>
            <option value="3">Austria</option>
            <option value="4">The Netherlands</option>
        </select>
    </div>
</div>
Additional info text for this field, if needed 
<div class="flix-form-row">
    <div class="flix-select flix-select--active">
        <label class="flix-select__label flix-label" for="select-active">Countries</label>
        <select id="select-active" class="flix-select__field" aria-describedby="select-active-info">
            <option value="1">Germany</option>
            <option value="2">France</option>
            <option value="3">Austria</option>
            <option value="4">The Netherlands</option>
        </select>
        <span class="flix-select__info" id="select-active-info">Additional info text for this field, if needed</span>
    </div>
</div>

Validation and errors

To display an error state with meaningful error messages you must:

  • If the field is required remember to add the required attribute to the select element;
  • Add flix-select--error modifier to component to enable the error appearance;
  • Add aria-invalid="true" to inform assistive technologies of the invalid input;
  • Add an id and aria-live="assertive" to the info element that contains the error message;
  • Connect the error message with the select element using aria-errormessage attribute.

When the validation passes and the select is no longer invalid:

  • Switch --error modifier to --valid to update the visual appearance;
  • Switch aria-invalid to "false" to update the element valid status.
An error occurred Additional info text for this field, if needed 
<div class="flix-form-row">
    <div class="flix-select flix-select--error">
        <label class="flix-select__label flix-label" for="select-error">Countries</label>
        <select id="select-error" class="flix-select__field" required="" aria-invalid="true" aria-errormessage="select-error-message" aria-describedby="select-error-info">
            <option disabled="" selected="">Please select something</option>
            <option value="1">Germany</option>
            <option value="2">France</option>
            <option value="3">Austria</option>
            <option value="4">The Netherlands</option>
        </select>
        <span class="flix-select__info" id="select-error-message" aria-live="assertive">An error occurred</span>
        <span class="flix-select__info" id="select-error-info">Additional info text for this field, if needed</span>
    </div>
</div>

For displaying a visual valid state add flix-select--valid modifier and ensure aria-invalid="false" attribute is correctly set.

<div class="flix-form-row">
    <div class="flix-select flix-select--valid">
        <label class="flix-select__label flix-label" for="select-valid">Countries</label>
        <select id="select-valid" class="flix-select__field" aria-invalid="false">
            <option disabled="" selected="">Please select something</option>
            <option value="1">Germany</option>
            <option value="2">France</option>
            <option value="3">Austria</option>
            <option value="4">The Netherlands</option>
        </select>
    </div>
</div>

Disabled

Add the flix-select--disabled modifier to trigger the visual disabled state and add the disabled attribute to the field to effectively disable any interaction.

<div class="flix-form-row">
    <div class="flix-select flix-select--disabled">
        <label class="flix-select__label flix-label" for="select-disabled">Countries</label>
        <select id="select-disabled" class="flix-select__field" disabled="">
            <option value="1">Germany</option>
            <option value="2">France</option>
            <option value="3">Austria</option>
            <option value="4">The Netherlands</option>
        </select>
    </div>
</div>

Select with multiple choices

To add the correct styles for a select with multiple choices add the flix-select--multiple modifier to the wrapper.

<div class="flix-select flix-select--multiple">
    <label class="flix-select__label flix-label" for="select-multiple">Countries</label>
    <select id="select-multiple" class="flix-select__field" multiple="" size="8">
        <option value="1">Antarctica</option>
        <option value="2">Brazil</option>
        <option value="3">Chile</option>
        <option value="4">Peru</option>
        <option value="5">Venezuela</option>
        <option value="6">Austria</option>
        <option value="7">France</option>
        <option value="8">Germany</option>
        <option value="9">Ukraine</option>
        <optgroup label="Out of Reach" disabled="">
            <option value="10">Indonesia</option>
            <option value="11">Japan</option>
            <option value="12">South Korea</option>
            <option value="13">Taiwan</option>
        </optgroup>
    </select>
</div>

Select without visible label

Certain cases and design decisions require you to use form fields without visible label. If the case there are 2 things you need to make sure doing:

  • Add an aria-label attribute to the input to preserve basic accessibility guidelines;
  • Add a flix-select--no-label modifier class to component.
<div class="flix-form-row">
    <div class="flix-select flix-select--no-label">
        <select aria-label="Country" id="select-no-label" class="flix-select__field">
            <option disabled="" selected="">Please select something</option>
            <optgroup label="America">
                <option value="1">Brazil</option>
                <option value="2">Chile</option>
                <option value="3">Peru</option>
                <option value="4">Venezuela</option>
            </optgroup>
            <optgroup label="Europe" disabled="">
                <option value="5">Germany</option>
                <option value="6">France</option>
                <option value="7">Austria</option>
                <option value="8">The Netherlands</option>
            </optgroup>
        </select>
    </div>
</div>

Placeholder options

Placeholder options should have disabled and selected attributes on them in order to remove them from the available selection list, and yet still show them as the initial placeholder option.

Made with 🍯 by FlixMobility 2023