Radio Group

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'

export default function Example() {
  const [value, setValue] = useState('option1')

  return (
    <>
      {/* Basic radio group */}
      <RadioGroup defaultValue="option1">
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="option1" id="option1" />
          <Label htmlFor="option1">Option 1</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="option2" id="option2" />
          <Label htmlFor="option2">Option 2</Label>
        </div>
      </RadioGroup>

      {/* Controlled */}
      <RadioGroup value={value} onValueChange={setValue}>
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="yes" id="yes" />
          <Label htmlFor="yes">Yes</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="no" id="no" />
          <Label htmlFor="no">No</Label>
        </div>
      </RadioGroup>

      {/* With descriptions */}
      <RadioGroup defaultValue="email">
        <div className="flex items-start space-x-3">
          <RadioGroupItem value="email" id="email" className="mt-1" />
          <div>
            <Label htmlFor="email">Email</Label>
            <p className="text-sm text-slate-500">Receive via email</p>
          </div>
        </div>
      </RadioGroup>
    </>
  )
}