# Flux 2.0 — Segmented control

Two to five joined options, exactly one selected, that switch a view or a setting in place.

Reference: https://flux.kaptio.com/components/segmented-control/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
Chooses between a few short, mutually exclusive options that are all worth seeing at once: list, calendar or map; gross or net. It is a set of native radio buttons styled as one joined control, so arrow keys, form submission and the group label come from the platform. The selected option fills with surface-selected and its text turns teal.

## Do not use it when
Not for switching between panels of different content; use Tabs. Not for more than five options or long labels; use a Select. Not for an on or off setting; use a Switch, or a Checkbox in a form. Not for actions; use Buttons.

## Markup

### Default

<fieldset class="flux-segmented">
  <legend class="flux-visually-hidden">View</legend>
  <label class="flux-segmented__option"><input type="radio" name="view" value="list" checked />List</label>
  <label class="flux-segmented__option"><input type="radio" name="view" value="calendar" />Calendar</label>
  <label class="flux-segmented__option"><input type="radio" name="view" value="map" />Map</label>
</fieldset>

### With a visible label

<div class="flux-field">
  <span class="flux-field__label" id="price-label">Show prices</span>
  <fieldset class="flux-segmented" aria-labelledby="price-label">
    <label class="flux-segmented__option"><input type="radio" name="price" value="gross" checked />Gross</label>
    <label class="flux-segmented__option"><input type="radio" name="price" value="net" />Net</label>
  </fieldset>
</div>

### Small, with a disabled option

<fieldset class="flux-segmented flux-segmented--sm">
  <legend class="flux-visually-hidden">Period</legend>
  <label class="flux-segmented__option"><input type="radio" name="period" value="day" />Day</label>
  <label class="flux-segmented__option"><input type="radio" name="period" value="week" checked />Week</label>
  <label class="flux-segmented__option"><input type="radio" name="period" value="month" />Month</label>
  <label class="flux-segmented__option"><input type="radio" name="period" value="season" disabled />Season</label>
</fieldset>

## API
- flux-segmented (class): On the fieldset.
- flux-segmented__option (class): On each label. Put the radio first inside it, then the text.
- flux-segmented--sm (class): The small height, for toolbars.
- input type="radio" (element): One per option, sharing a name. checked and disabled work as usual.

## Accessibility
- Native radios provide the group role, the checked state and arrow-key selection.
- Give the fieldset a legend, or aria-labelledby pointing at a visible label.
- The change takes effect on selection; announce any resulting change in content with a live region.

## Keyboard
- Tab: Moves focus to the selected option, then out of the group.
- ← → ↑ ↓: Selects the previous or next option.

## Tokens
- --flux-segmented-height | -height-sm | -padding-x
- --flux-segmented-bg | -border | -text | -text-hover
- --flux-segmented-selected-bg | -selected-text

## Do
- Keep labels to one or two words.
- Apply the change immediately when the selection changes.

## Do not
- Do not use it in place of Tabs to switch between different panels of content.
- Do not put more than five options in one control.
- Do not leave the group with nothing selected.