Segmented control

Basic

Each option is a real radio input inside a label, so the value posts with the form and the arrow keys move the choice. No script is needed. Give the group role="radiogroup" and an aria-label.

Day Week Month

<div class="segmented" role="radiogroup" aria-label="Range">
  <label><input type="radio" name="range1" value="day" /><span>Day</span></label>
  <label><input type="radio" name="range1" value="week" checked /><span>Week</span></label>
  <label><input type="radio" name="range1" value="month" /><span>Month</span></label>
</div>

Small and disabled

data-size="sm" on the group makes it 24px tall. disabled on an input dims that option.

List Board Map

<div class="segmented" role="radiogroup" aria-label="Range" data-size="sm">
  <label><input type="radio" name="range2" value="list" checked /><span>List</span></label>
  <label><input type="radio" name="range2" value="board" /><span>Board</span></label>
  <label><input type="radio" name="range2" value="map" disabled /><span>Map</span></label>
</div>

In a field

Use a .field with a label above, like any other input.

Group sales by

Day Week Month Year

<div class="field">
  <label for="seg-group">Group sales by</label>
  <div class="segmented" id="seg-group" role="radiogroup" aria-label="Group sales by">
    <label><input type="radio" name="group" value="day" checked /><span>Day</span></label>
    <label><input type="radio" name="group" value="week" /><span>Week</span></label>
    <label><input type="radio" name="group" value="month" /><span>Month</span></label>
    <label><input type="radio" name="group" value="year" /><span>Year</span></label>
  </div>
</div>

Attributes

Attribute / element	Values	Description
`.segmented`		The group. Inline, with a neutral track and a raised selected option.
`> label > input[type=radio]`		One option. The radio is invisible and fills the label. Share a `name` in the group.
`> label > span`		The visible text. An `.icon` may go before it.
`data-size`	`sm`	24px tall. The default is 28px.
`disabled`	on an input	Dims the option and blocks it.

Events

No Tsunami event: it is a native form control, so the save bar and form code see it as usual.

Name	Values	Description
`change`	native	Fires from the radio that became checked, and bubbles. Read `event.target.value`.

Accessibility

Arrow keys move and select inside the group; Tab enters and leaves it. This is native radio behaviour.
The focus ring is drawn on the focused option.
Name the group with aria-label or a visible label.
Use two to four short options. For more, use a select.