Segmented control

A SegmentedControl is a radio group drawn as a strip, with the same props and the same keys. The chosen segment is aria-checked.

It looks like a row of tabs, but it means something different: tabs choose which panel is shown, and a segmented control chooses a value. Use Tabs when something below changes, and this when a field is being filled in.

Day

Week

Month

Showing one week.

SegmentedControlDemo.tsx

import { Text, View } from '@hozo/core'
import { SegmentedControl } from '@hozo/ui'
import { useState } from 'react'

const RANGES = [
  { value: 'day', label: 'Day' },
  { value: 'week', label: 'Week' },
  { value: 'month', label: 'Month' },
]

export function SegmentedControlDemo() {
  const [range, setRange] = useState('week')
  return (
    <View className="gap-3">
      <SegmentedControl
        options={RANGES}
        accessibilityLabel="Range"
        value={range}
        onValueChange={setRange}
      />
      <Text className="text-sm text-hozo-text-muted">Showing one {range}.</Text>
    </View>
  )
}

• options, value, onValueChange, defaultValue and accessibilityLabel are the radio group’s.
• The strip is as wide as its segments, not as wide as the form.