Radio Group

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

import { RadioGroup } from "rizzui";

With Simple Radio

Checkout the RadioGroup demo with Radio components.

Apple

Pear

Orange

Blueberry

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>
  );
}

With AdvancedRadio

Checkout the RadioGroup demo with AdvancedRadio components.

Single Payment

Charge a one-time fee.

Subscription

Charge an ongoing fee.

Lead Magnet

Allow access for free.

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>
  );
}

API Reference

---

RadioGroup Props

Here is the API documentation of the RadioGroup component.

Props	Type	Description	Default
value	string	Selected value	__
setValue	Dispatch<SetStateAction<string>>	Pass function to select value	__
children	ReactNode	Radio buttons as children	__