Segmented Control

The one toggle treatment: Cash / Shares, Price / Yield, chart type, theme, document type. A 32px --secondary track with a 4px inset; the thumb lifts to --card on light and mixes the track toward the foreground on dark. The selected option is --foreground (ink); the rest are --muted-foreground. The thumb slides between options and honours prefers-reduced-motion.

Underneath it is a radio group: one option is always selected and the arrow keys move the selection. Use Tabs only for a real tab bar, such as Buy / Sell or the settings nav.

To switch views in a card header or toolbar, use View Switch: it renders a Segmented Control when there is room and a chip Select when there is not.

Usage

import {
  SegmentedControl,
  SegmentedControlItem,
} from "@sophic/portal-ui/components/ui/segmented-control";

<SegmentedControl
  aria-label="Amount or shares"
  value={mode}
  onValueChange={setMode}
>
  <SegmentedControlItem value="cash">Cash</SegmentedControlItem>
  <SegmentedControlItem value="shares" tooltip="Buy in shares">
    Shares
  </SegmentedControlItem>
</SegmentedControl>

To switch a panel, render it from the same value: {mode === "cash" ? <CashPanel /> : <SharesPanel />}.

Props

SegmentedControl passes every prop to the Radix RadioGroup.Root (value, defaultValue, onValueChange, disabled, ...). SegmentedControlItem passes every prop to RadioGroup.Item and adds: