Segmented control

Component

Label Hint is an accessible way to provide additional information that might help the user Render errors here if there is an issue with the input.

Value 1 Value 2 Value 3

Segmented control

- html

<!-- COMPONENT-START: nc-segmented-control -->
<fieldset class="nc-fieldset nc-input-field nc-segmented-control-group">
    <legend class="nc-legend nc-stack">
        <span class="nc-input-label">Label</span>
        <span class="nc-hint"
        >Hint is an accessible way to provide additional information that might help the user</span>
        <span class="nc-input-error">Render errors here if there is an issue with the input.</span>
    </legend>

    <div class="nc-segmented-control">
        <label>
            <input type="radio" name="test" value="Value 1" checked />
            <span class="nc-input-label">Value 1</span>
        </label>
        <label>
            <input type="radio" name="test" value="Value 2" />
            <span class="nc-input-label">Value 2</span>
        </label>
        <label>
            <input type="radio" name="test" value="Value 3" />
            <span class="nc-input-label">Value 3</span>
        </label>
    </div>
</fieldset>
<!-- COMPONENT-END: nc-segmented-control -->

Link to section titled: CSS Variables

CSS Variables

--segmented-control-border-radius: Controls the border radius of the segmented control. Defaults to --_input-border-radius.
--segmented-control-checked-text-color: Controls the text color of the selected segment. Defaults to ---color-brand-primary-contrast.
--segmented-control-checked-surface-color: Controls the background color of the selected segment. Defaults to --color-brand-primary-base.
--segmented-control-min-height: Controls the height of each segment. Defaults to --control-height-base.

Link to section titled: Examples

Examples

Horizontal Segmented Control

You can also force a horizontal layout by using either -horizontal as class or a style query if full browser support is not relevant to you.

2 4 8

Horizontal Segmented Control

- html

<!-- COMPONENT-START: nc-segmented-control -->
<fieldset class="nc-fieldset nc-input-field nc-segmented-control-group -horizontal" style="--horizontal: true">
    <legend class="sr-only">
        Items per column
    </legend>
    <div class="nc-cluster -centered full-width">
        <span class="nc-input-label" aria-hidden="true">Items per column</span>

        <div class="nc-segmented-control">
            <label>
                <input type="radio" name="horizontal-test" value="2" checked />
                <span class="nc-input-label">2</span>
            </label>
            <label>
                <input type="radio" name="horizontal-test" value="4" />
                <span class="nc-input-label">4</span>
            </label>
            <label>
                <input type="radio" name="horizontal-test" value="8" />
                <span class="nc-input-label">8</span>
            </label>
        </div>
    </div>
</fieldset>
<!-- COMPONENT-END: nc-segmented-control -->

Notes

Pay attention to the modified markup: the legend is made visually hidden, the visual label has aria-hidden and an extra wrapper is added, since fieldsets can not be set to flex containers.

Button Group

The same segmented control can be used to create a sort of button group.

Items per column

Button Group

- html

<!-- COMPONENT-START: nc-segmented-control button-group -->
<div class="nc-fieldset nc-input-field nc-segmented-control-group -horizontal" style="--horizontal: true">
    <div class="nc-cluster -centered full-width">
        <span class="nc-input-label" id="label">Items per column</span>

        <div class="nc-segmented-control" aria-labelledby="label">
            <button type="button" aria-pressed="true">
                Left align
            </button>
            <button type="button">
                Center align
            </button>
            <button type="button">
                Right align
            </button>
        </div>
    </div>
</div>
<!-- COMPONENT-END: nc-segmented-control button-group -->