گروه رادیو (Radio Group)

import { RadioGroup, RadioGroupItem } from '@parto-system-design/ui'
import { Label } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-one" id="option-one" />
        <Label htmlFor="option-one">گزینه اول</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-two" id="option-two" />
        <Label htmlFor="option-two">گزینه دوم</Label>
      </div>
    </RadioGroup>
  )
}

const [value, setValue] = React.useState('option-one')

;<RadioGroup value={value} onValueChange={setValue}>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-one" id="r1" />
    <Label htmlFor="r1">گزینه اول</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-two" id="r2" />
    <Label htmlFor="r2">گزینه دوم</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-three" id="r3" />
    <Label htmlFor="r3">گزینه سوم</Label>
  </div>
</RadioGroup>

<RadioGroup defaultValue="option-one" className="flex gap-4">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-one" id="h1" />
    <Label htmlFor="h1">اول</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-two" id="h2" />
    <Label htmlFor="h2">دوم</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-three" id="h3" />
    <Label htmlFor="h3">سوم</Label>
  </div>
</RadioGroup>

<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-one" id="d1" />
    <Label htmlFor="d1">فعال</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-two" id="d2" disabled />
    <Label htmlFor="d2" className="opacity-50">
      غیرفعال
    </Label>
  </div>
</RadioGroup>

<RadioGroup defaultValue="option-1" dir="rtl">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-1" id="r1" />
    <label htmlFor="r1">گزینه اول</label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-2" id="r2" />
    <label htmlFor="r2">گزینه دوم</label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-3" id="r3" disabled />
    <label htmlFor="r3">غیرفعال</label>
  </div>
</RadioGroup>