Segmented control

wu-segmented shows a radio group as connected segments of equal width. The radios stay native and visually hidden, so arrow keys move the choice and a form submits the value.

Class or attribute	Effect
`wu-segmented`	Root, on `<fieldset>` or a `<div role="radiogroup">`. Alternate track, no border
`wu-segmented-item`	Part, on `<label>`. One segment
`wu-segmented-input`	Part, on `<input type="radio">`. Visually hidden, still focusable and announced
`checked` on an input	Its segment is raised: surface, edge and shadow, so color is not the only signal
`disabled` on an input	Its segment is dimmed with a not-allowed cursor
`sm`, `lg`	Small and large height and type size
`animated`	One thumb slides to the checked segment, opt-in, up to six segments

Default

Day Week Month

<fieldset class="wu-segmented">
  <legend class="sr-only">View</legend>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-view" checked> Day</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-view"> Week</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-view"> Month</label>
</fieldset>

Sizes

<div class="flex col x-start gap-3">
  <fieldset class="wu-segmented sm">
    <legend class="sr-only">Small</legend>
    <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-sm" checked> List</label>
    <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-sm"> Board</label>
  </fieldset>
  <fieldset class="wu-segmented">
    <legend class="sr-only">Default</legend>
    <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-md" checked> List</label>
    <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-md"> Board</label>
  </fieldset>
  <fieldset class="wu-segmented lg">
    <legend class="sr-only">Large</legend>
    <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-lg" checked> List</label>
    <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-lg"> Board</label>
  </fieldset>
</div>

Disabled segment

Free Team Enterprise

<fieldset class="wu-segmented">
  <legend class="sr-only">Plan</legend>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-plan" checked> Free</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-plan"> Team</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-plan" disabled> Enterprise</label>
</fieldset>

Without a fieldset

A <div> with role="radiogroup" and an aria-label works too.

Newest Oldest

<div class="wu-segmented" role="radiogroup" aria-label="Sort by">
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-sort" checked> Newest</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-sort"> Oldest</label>
</div>

Animation

The animated word draws one thumb that slides to the checked segment with a spring. It works with up to six segments; with more, each segment keeps its own raised look. wu-animated on an ancestor turns it on for every segmented control inside. The slide runs only under prefers-reduced-motion: no-preference.

7 days 30 days 90 days Year

<fieldset class="wu-segmented animated">
  <legend class="sr-only">Range</legend>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-range" checked> 7 days</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-range"> 30 days</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-range"> 90 days</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-range"> Year</label>
</fieldset>

Accessibility

Each segment is a native radio button: Tab reaches the group, arrow keys move the choice.
Name the group with a <legend> (here visually hidden with core’s sr-only) or an aria-label.
Keyboard focus draws the focus ring around the segment. In forced colors mode the checked segment uses the highlight colors.

Right to left

Segments run from the right, and the animated thumb follows.

يوم أسبوع شهر

<fieldset class="wu-segmented animated">
  <legend class="sr-only">العرض</legend>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-rtl" checked> يوم</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-rtl"> أسبوع</label>
  <label class="wu-segmented-item"><input class="wu-segmented-input" type="radio" name="segmented-rtl"> شهر</label>
</fieldset>

Load only the segmented control

@use "@wovenui/components/segmented";

The segmented control needs no other component.