Skip to main contentSkip to site searchSkip to component search
Honeycomb

Select Group

The select group can be used when users need to select single or multiple options from the vertical list. It is a direct alternative to radios and checkboxes in order to save space.

Multiple choice

Weekdays 
<div class="flix-form-row">
    <fieldset class="flix-select-group">
        <legend class="flix-label flix-select-group__label">Weekdays</legend>
        <ul class="flix-select-group__items">
            <li class="flix-select-group__item">
                <input id="weekday-mon" type="checkbox" name="weekday" value="Mon"/>
                <label for="weekday-mon">Mon</label>
            </li>
            <li class="flix-select-group__item">
                <input id="weekday-tue" type="checkbox" name="weekday" checked="" value="Tue"/>
                <label for="weekday-tue">Tue</label>
            </li>
            <li class="flix-select-group__item">
                <input id="weekday-wed" type="checkbox" name="weekday" value="Wed"/>
                <label for="weekday-wed">Wed</label>
            </li>
            <li class="flix-select-group__item">
                <input id="weekday-thu" type="checkbox" name="weekday" value="Thu"/>
                <label for="weekday-thu">Thu</label>
            </li>
            <li class="flix-select-group__item">
                <input id="weekday-fri" type="checkbox" name="weekday" checked="" value="Fri"/>
                <label for="weekday-fri">Fri</label>
            </li>
            <li class="flix-select-group__item">
                <input id="weekday-sat" type="checkbox" name="weekday" value="Sat"/>
                <label for="weekday-sat">Sat</label>
            </li>
            <li class="flix-select-group__item">
                <input id="weekday-sun" type="checkbox" name="weekday" value="Sun"/>
                <label for="weekday-sun">Sun</label>
            </li>
        </ul>
    </fieldset>
</div>

Single choice using radios

Are you sure? 
<div class="flix-form-row">
    <fieldset class="flix-select-group">
        <legend class="flix-label flix-select-group__label">Are you sure?</legend>
        <ul class="flix-select-group__items">
            <li class="flix-select-group__item">
                <input id="choice-yes" type="radio" name="choice" value="Yes"/>
                <label for="choice-yes">Yes</label>
            </li>
            <li class="flix-select-group__item">
                <input id="choice-no" type="radio" name="choice" checked="" value="No"/>
                <label for="choice-no">No</label>
            </li>
            <li class="flix-select-group__item">
                <input id="choice-maybe" type="radio" name="choice" value="Maybe"/>
                <label for="choice-maybe">Maybe</label>
            </li>
        </ul>
    </fieldset>
</div>

State variations

Error select group
You need to make your choice
Disabled select group 
<div class="flix-form-row">
    <fieldset class="flix-select-group flix-select-group--error">
        <legend class="flix-label flix-select-group__label">Error select group</legend>
        <ul class="flix-select-group__items">
            <li class="flix-select-group__item">
                <input id="error-choice-yes" type="radio" name="error-choice" required="" aria-invalid="true" value="Yes"/>
                <label for="error-choice-yes">Yes</label>
            </li>
            <li class="flix-select-group__item">
                <input id="error-choice-no" type="radio" name="error-choice" required="" aria-invalid="true" value="No"/>
                <label for="error-choice-no">No</label>
            </li>
            <li class="flix-select-group__item">
                <input id="error-choice-maybe" type="radio" name="error-choice" required="" aria-invalid="true" value="Maybe"/>
                <label for="error-choice-maybe">Maybe</label>
            </li>
        </ul>
        <div class="flix-select-group__info" aria-live="assertive" id="error-choice-error-message">You need to make your choice</div>
    </fieldset>
</div>
<div class="flix-form-row">
    <fieldset class="flix-select-group flix-select-group--disabled">
        <legend class="flix-label flix-select-group__label">Disabled select group</legend>
        <ul class="flix-select-group__items">
            <li class="flix-select-group__item">
                <input id="disabled-choice-yes" disabled="" type="radio" name="disabled-choice" value="Yes"/>
                <label for="disabled-choice-yes">Yes</label>
            </li>
            <li class="flix-select-group__item">
                <input id="disabled-choice-no" disabled="" type="radio" name="disabled-choice" value="No"/>
                <label for="disabled-choice-no">No</label>
            </li>
            <li class="flix-select-group__item">
                <input id="disabled-choice-maybe" disabled="" type="radio" name="disabled-choice" value="Maybe"/>
                <label for="disabled-choice-maybe">Maybe</label>
            </li>
        </ul>
    </fieldset>
</div>

Details

Select group can be switched between single choice and multiple choice options please use either radio or checkbox inputs respectively inside of the element.

Pay attention on HTML elements inside the choice items, usage of respective input types, label elements and their order is mandatory in for element to work properly:

<li class="flix-select-group__item">
    <input id="weekday-tue" type="checkbox" name="weekday" value="Tue"/>
    <label for="weekday-tue">Tue</label>
</li>

There are 2 modifiers available:

  • flix-select-group--disabled modifier, use it if you wanna disable something but don't forget to add a disabled attribute to inputs inside.
  • flix-select-group--error modifier, this triggers an error appearance, use to highlight validation errors;

Optional flix-select-group__info element can be used inside a fieldset to provide a useful information on the input.