Radio group

A RadioGroup is one tab stop for the whole group, and the arrow keys choose within it. That is what makes it a radio group rather than a column of checkboxes. Each option is role="radio", and its ring and dot are drawn from aria-checked.

Standard, two days

Express, tomorrow

By pigeon

Shipping: standard

RadioGroupDemo.tsx

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

const SHIPPING = [
  { value: 'standard', label: 'Standard, two days' },
  { value: 'express', label: 'Express, tomorrow' },
  { value: 'pigeon', label: 'By pigeon', disabled: true },
]

export function RadioGroupDemo() {
  const [shipping, setShipping] = useState('standard')
  return (
    <View className="gap-3">
      <RadioGroup
        options={SHIPPING}
        accessibilityLabel="Shipping"
        value={shipping}
        onValueChange={setShipping}
      />
      <Text className="text-sm text-hozo-text-muted">Shipping: {shipping}</Text>
    </View>
  )
}

• options: { value, label, disabled? } for each option. A disabled option is skipped by the arrows rather than stopped on.
• value and onValueChange, or defaultValue for an uncontrolled group. The value can be any type, not only a string.
• accessibilityLabel: the group’s name. A group without one is a list of answers to a question nobody asked.
• orientation: vertical (the default) or horizontal, which also changes which arrows move the choice.