The modern radio group — a sliding thumb, real radio semantics, and automatic light/dark. Every card below is live; try the arrow keys.
Array shorthand; arrows move and select.
new Segmented('#basic', {
options: ['List', 'Board', 'Calendar'],
onChange: v => render(v)
})
Icons ride next to labels; omit the label (it becomes the
aria-label) for icon-only.
{ value: 'grid', label: 'Grid', icon: SVG }
{ value: 'left', icon: SVG,
label: 'Align left', iconOnly: true }
fullWidth stretches segments evenly; the thumb
re-measures on resize.
new Segmented('#full', {
options: ['Day', 'Week', 'Month', 'Year'],
value: 'Week', fullWidth: true
})
Plain markup in, control out — destroy() gives the
original buttons back.
<div id="enhance">
<button data-value="dev">Dev</button> …
</div>
new Segmented('#enhance')
name renders a hidden input, so the value submits
like any field.
new Segmented('#plan', {
options: ['Free', 'Pro', 'Team'],
name: 'plan'
})
Disabled segments are skipped by clicks and arrows; the whole
control can be toggled too. size: 'sm' shrinks it.
options: [{ value: '4k', label: '4K',
disabled: true }, …]
size: 'sm'