Segmented Control

#Installation & usage

Use a segmented control for a small, fixed set of options where one is always chosen and the choice changes a view in place: a time range, a billing period, a layout. It's a thin wrapper over Toggle Group's segmented look (plain labels on a hairline, a 2px accent bar under the pressed one) with a simpler contract: the value is one string, and it can't be emptied.

Reach for something else when the shape is different:

• Toggle Group when several options can be on at once (bold, italic, underline), or when the choice may be cleared.
• Tabs when each option owns a panel of content that the others hide.
• Radio Group for a choice inside a form that's submitted later.
• Select when there are more options than fit in a row.

import { SegmentedControl, SegmentedControlItem } from '@youj/react'

export function RangePicker() {
  const [range, setRange] = useState('7d')
  return (
    <SegmentedControl aria-label="Range" value={range} onValueChange={setRange}>
      <SegmentedControlItem value="24h">24h</SegmentedControlItem>
      <SegmentedControlItem value="7d">7d</SegmentedControlItem>
      <SegmentedControlItem value="30d">30d</SegmentedControlItem>
    </SegmentedControl>
  )
}

onValueChange receives the pressed segment's value as a string. Pressing the segment that's already pressed does nothing, so there's always a choice. variant="pill" sets the segments in a recessed track with a raised key instead, which suits a control that sits inside a capsule or on a well. Leave defaultValue out to start with nothing pressed; the first press picks one.

#Description

#Code