---
sidebar_position: 10
---

import Paper from "@site/src/components/paper";
import RadioGroupDefault, { RadioGroupWithCard } from "@site/src/components/radio-group";

# Radio Group

You can make a group of multiple choices **Radio** using **RadioGroup** component.

```tsx
"use client"; 

import { RadioGroup } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## With Simple Radio

Checkout the **RadioGroup** demo with **Radio** components.

<Paper>
  <RadioGroupDefault />
</Paper>

```tsx
"use client"; 

import { useState } from "react";
import { Radio, RadioGroup } from "rizzui";

export default function App() {
  const [value, setValue] = useState("apple");

  return (
    <RadioGroup
      value={value}
      setValue={setValue}
      className="flex gap-4"
    >
      <Radio
        label="Apple"
        value="apple"
      />
      <Radio
        label="Pear"
        value="pear"
      />
      <Radio
        label="Orange"
        value="orange"
        disabled
      />
      <Radio
        label="Blueberry"
        value="blueberry"
      />
    </RadioGroup>
  );
}
```

<div className="mb-10" />

## With AdvancedRadio

Checkout the **RadioGroup** demo with **AdvancedRadio** components.

<Paper>
  <RadioGroupWithCard />
</Paper>

```jsx
"use client"; 

import { useState } from "react";
import { AdvancedRadio, RadioGroup, Text } from "rizzui";

const options = [
  {
    value: 'single'
    title: 'Single Payment',
    description: 'Charge a one-time fee',
  }
  ...
]

export default function App() {
  const [value, setValue] = useState("single");

  return (
    <RadioGroup
      value={value}
      setValue={setValue}
      className="grid grid-cols-1 sm:grid-cols-3 max-w-2xl mx-auto gap-4"
    >
      {options.map((item) => (
        <AdvancedRadio
          key={item.value}
          name="payment"
          value={item.value}
          inputClassName="[&:checked~span_.icon]:block"
        >
          <span className="flex justify-between">
            <Text as="b">{item.title}</Text>
            <CheckCircleIcon className="icon hidden h-5 w-5 text-secondary" />
          </span>
          <Text>{item.description}</Text>
        </AdvancedRadio>
      ))}
    </RadioGroup>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### RadioGroup Props

Here is the API documentation of the RadioGroup component.

<div className="overflow-x-auto">

|  Props   |                Type                |          Description          | Default |
| :------: | :--------------------------------: | :---------------------------: | :-----: |
|  value   |              `string`              |        Selected value         |  \_\_   |
| setValue | `Dispatch<SetStateAction<string>>` | Pass function to select value |  \_\_   |
| children |            `ReactNode`             |   Radio buttons as children   |  \_\_   |

</div>
