ButtonGroup — HTML & CSS

A segmented control — a styled radio group. Single selection, full ARIA radio keyboard support (←/→/↑/↓ move and select, skipping disabled options).

Wiring it up in JS (init, events, API, Vue) is on the JavaScript page.

Live example

Theme:

Color

OnOff

OnOff

OnOff

OnOff

OnOff

OnOff

Size — xsm · sm · default · lg

xsmB

smB

defaultB

lgB

Shape (no color) — r-0 · default · r-round

r-0B

defaultB

r-roundB

Gap & border — g-0 (joined) · no border

DayWeekMonth

no borderBC

Caption — shared .UIlabel above the group

View mode Switch how items are laid out.ListGridTable

Last ui-button-group-change: —

Markup

A .UIbg container holds pairs of .UIbg-input (radio) + .UIbg-btn (its label). Set checked on the default option, disabled on any you want inert:

<div class="UIbg primary border" role="radiogroup" aria-label="View mode">
  <input type="radio" class="UIbg-input" value="list" name="view" id="v-list" checked />
  <label class="UIbg-btn" for="v-list">List</label>

  <input type="radio" class="UIbg-input" value="grid" name="view" id="v-grid" />
  <label class="UIbg-btn" for="v-grid">Grid</label>

  <input type="radio" class="UIbg-input" value="table" name="view" id="v-table" disabled />
  <label class="UIbg-btn" for="v-table">Table</label>
</div>

Caption label

The group has no built-in caption. Add the shared .UIlabel class as the first child to put a title above it — it floats out of flow, so it never becomes a grid cell and the group reserves the room above it:

<div class="UIbg primary border" role="radiogroup" aria-labelledby="view-cap">
  <span class="UIlabel" id="view-cap">View mode</span>
  <input type="radio" class="UIbg-input" value="list" name="view" id="v-list" checked />
  <label class="UIbg-btn" for="v-list">List</label>

  <input type="radio" class="UIbg-input" value="grid" name="view" id="v-grid" />
  <label class="UIbg-btn" for="v-grid">Grid</label>
</div>

A nested .UIql help icon inherits the group's theme. Point the group at the caption with aria-labelledby for screen readers.

Minimal markup

The smallest working group — no color, no border:

<div class="UIbg" role="radiogroup" aria-label="Choice">
  <input type="radio" class="UIbg-input" value="a" name="choice" id="c-a" checked />
  <label class="UIbg-btn" for="c-a">A</label>

  <input type="radio" class="UIbg-input" value="b" name="choice" id="c-b" />
  <label class="UIbg-btn" for="c-b">B</label>
</div>

Each group needs its own name + unique ids

Radio inputs that share a name form one group, and duplicate ids break the label[for] links. Give every ButtonGroup a distinct name and unique ids.