Radio Group

import * as React from 'react'
import { Checkbox } from '@hamur/react/checkbox'
import { Radio } from '@hamur/react/radio'
import { RadioGroup } from '@hamur/react/radio-group'

const plans = ['free', 'pro', 'team']

export default function RadioGroupExample() {
  const [plan, setPlan] = React.useState('pro')
  const [locked, setLocked] = React.useState(false)
  return (
    <div className="stack">
      <RadioGroup
        className="stack"
        name="plan"
        value={plan}
        readOnly={locked}
        onValueChange={setPlan}
      >
        {plans.map((name) => (
          <label className="row" key={name}>
            <Radio.Root className="radio" value={name}>
              <Radio.Indicator className="radio-indicator" />
            </Radio.Root>
            {name}
          </label>
        ))}
      </RadioGroup>
      <label className="row">
        <Checkbox.Root className="checkbox" onCheckedChange={setLocked}>
          <Checkbox.Indicator className="checkbox-indicator">✓</Checkbox.Indicator>
        </Checkbox.Root>
        Lock the choice
      </label>
      <p className="muted">Plan: {plan}</p>
    </div>
  )
}