# Radio Group
Single-selection group with matching radio item primitive.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Label, RadioGroup, RadioGroupItem } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/radio-group
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=radio-group--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="200" title="Radio Group component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<RadioGroup value={value} onValueChange={setValue}>
  <div className="flex items-center gap-2">
    <RadioGroupItem id="quality-low" value="low" />
    <Label htmlFor="quality-low" variant="inline">
      Low
    </Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem id="quality-medium" value="medium" />
    <Label htmlFor="quality-medium" variant="inline">
      Medium
    </Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem id="quality-high" value="high" />
    <Label htmlFor="quality-high" variant="inline">
      High
    </Label>
  </div>
</RadioGroup>
```

## Props

### RadioGroup

<PropsTable
  props={[
  {
    name: "orientation",
    type: '"vertical" | "horizontal"',
    default: '"vertical"',
    description: "Orientation of the radio group.",
  },
  {
    name: "onValueChange",
    type: "(value: string) => void",
    description: "Callback fired when the value changes.",
  },
]}
/>

### RadioGroupItem

<PropsTable
  props={[
  {
    name: "size",
    type: '"xs" | "sm" | "default"',
    default: '"default"',
    description: "Size of the radio button.",
  },
]}
/>

Built on [Base UI Radio](https://base-ui.com/react/components/radio). See their docs for primitive-level details.