Segmented control

Overview

A segmented control is the dense way to switch the interpretationof one surface. The user is not navigating to a new page — the panel they’re looking at is changing how it reads the same underlying state. Quick charge or Itemised sale. Preview or Code. Daily, weekly, or monthly. One binding, N options, one always selected.

In context

A preview switcher is the canonical case — same template, two modes. The control sits in the toolbar, and the body below swaps its rendering without any layout shift.

Sizes

Three sizes. md at 32 px is the default — the height of a Button md, so the control sits comfortably in any toolbar that already has buttons. Reach for sm when the row is dense; reach for lg only when the control is the dominant element on the surface.

• size="sm"28 px

  Inline beside dense filters.

  DayWeekMonth
• size="md"32 px

  Default — toolbar strip, preview switcher.

  DayWeekMonth
• size="lg"40 px

  Standalone, top of a panel.

  DayWeekMonth

With icons

Full width

Disabled

Anatomy

Three named parts. The track holds the segments; the active segment is elevated onto a white surface; the inactive segments sit transparent on the track.

Behavior

• 01One option is always selected. There is no “none” state — the control is fully controlled and the parent must supply a valid initial value. If the underlying data has a meaningful absent state, use a switch or a checkbox group instead.
• 02Selection is immediate. Clicking a segment fires onChange right away. No commit step, no Save button — the surface should update on the same paint.
• 03Two to four options. The pattern stops working past four — labels truncate, the track grows past comfortable scan width, and the options stop feeling parallel. For five-plus, reach for a Select.
• 04Arrow keys move the selection. Tab takes focus into the group, then Left/Right (or Up/Down) advances through options, wrapping at the ends. Home / End jump to first / last. Selection follows focus, matching the radiogroup pattern users already know from RadioCard and Choice list.
• 05Body should swap, not reflow. The surface below the control should keep its dimensions across modes. If the new mode genuinely needs more space, you probably want Tabs.

Accessibility

• Radiogroup semantics. The container is a role="radiogroup"; each segment is a role="radio" with aria-checked. Screen readers announce “X of N selected, [label]” on focus.
• Roving tabindex.Only the selected segment is in the tab order; arrow keys move focus and selection together through the rest. This is the standard pattern from WAI-ARIA APG’s radio group example.
• ariaLabel is required.Without it, the group has no announced purpose. Pass a short noun phrase that names the binding: “View mode”, “Sale type”, “Time range”.
• Focus is visible. The focused segment carries a 2 px blurple ring (#9EB7FF) offset by 1 px from the track — so the focus marker reads against the grey track and the white active surface alike.

Code

import { useState } from "react";
import { SegmentedControl } from "@flatpay-dk/ui";

type Mode = "preview" | "code";

export function ReceiptPanel() {
  const [mode, setMode] = useState<Mode>("preview");

  return (
    <div>
      <SegmentedControl
        ariaLabel="View mode"
        options={[
          { value: "preview", label: "Preview" },
          { value: "code", label: "Code" },
        ]}
        value={mode}
        onChange={setMode}
      />
      {mode === "preview" ? <ReceiptPreview /> : <ReceiptCode />}
    </div>
  );
}

Best practices

Props

Related