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 — sm · default · lg

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

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>

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.