Skip to content
STYLESCAPE

Segmented control

Examples for the ss-c-segmented module: a row of mutually exclusive options. The base markup is a radio group, so it works without JavaScript, submits with the form and gets arrow-key navigation from the browser. The selected segment is filled and bold.

Radio group

View
HTML 
<fieldset class="ss-c-segmented">
            <legend class="ss-c-segmented__legend">View</legend>
            <label class="ss-c-segmented__option">
                <input class="ss-c-segmented__input" type="radio" name="seg-view" value="list" checked>
                <span class="ss-c-segmented__label">List</span>
            </label>
            <label class="ss-c-segmented__option">
                <input class="ss-c-segmented__input" type="radio" name="seg-view" value="grid">
                <span class="ss-c-segmented__label">Grid</span>
            </label>
            <label class="ss-c-segmented__option">
                <input class="ss-c-segmented__input" type="radio" name="seg-view" value="map">
                <span class="ss-c-segmented__label">Map</span>
            </label>
        </fieldset>

Sizes

The legend can be hidden with ss-u-visually-hidden; it still names the group.

Speed (small)
Speed (large)
HTML 
<div style="display: grid; gap: 16px; justify-items: start">
            <fieldset class="ss-c-segmented ss-c-segmented--sm">
                <legend class="ss-u-visually-hidden">Speed (small)</legend>
                <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-sm" checked><span class="ss-c-segmented__label">0.5×</span></label>
                <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-sm"><span class="ss-c-segmented__label">1×</span></label>
                <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-sm"><span class="ss-c-segmented__label">2×</span></label>
            </fieldset>
            <fieldset class="ss-c-segmented ss-c-segmented--lg">
                <legend class="ss-u-visually-hidden">Speed (large)</legend>
                <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-lg"><span class="ss-c-segmented__label">0.5×</span></label>
                <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-lg" checked><span class="ss-c-segmented__label">1×</span></label>
                <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-lg"><span class="ss-c-segmented__label">2×</span></label>
            </fieldset>
        </div>

Full width and disabled

Units
HTML 
<fieldset class="ss-c-segmented ss-c-segmented--block" style="max-width: 480px">
            <legend class="ss-c-segmented__legend">Units</legend>
            <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-units" checked><span class="ss-c-segmented__label">Metric</span></label>
            <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-units"><span class="ss-c-segmented__label">Imperial</span></label>
            <label class="ss-c-segmented__option"><input class="ss-c-segmented__input" type="radio" name="seg-units" disabled><span class="ss-c-segmented__label">Nautical</span></label>
        </fieldset>

Buttons (aria-pressed)

For actions rather than a form value, use buttons in a role="group"; your script keeps exactly one aria-pressed="true".

HTML 
<div class="ss-c-segmented" role="group" aria-label="Text alignment">
            <button type="button" class="ss-c-segmented__button" aria-pressed="true">Left</button>
            <button type="button" class="ss-c-segmented__button" aria-pressed="false">Center</button>
            <button type="button" class="ss-c-segmented__button" aria-pressed="false">Right</button>
        </div>

Links (aria-current)

For navigation between pages or views, use links in a nav. The current one carries aria-current="page" and is filled and bold; links keep the segment colour and are not underlined.

HTML 
<nav class="ss-c-segmented" aria-label="Report period">
            <a class="ss-c-segmented__link" href="#day">Day</a>
            <a class="ss-c-segmented__link" href="#week" aria-current="page">Week</a>
            <a class="ss-c-segmented__link" href="#month">Month</a>
        </nav>