RadioGroup

The RadioGroup component provides a controlled radio button group with various styling options.

Import

import { RadioGroup } from "amvasdev-ui";

Examples

Basic Usage

Yes

Maybe Later

import { useState } from "react";
  import { RadioGroup } from "amvasdev-ui";

  function App() {
    const [selectedOption, setSelectedOption] = useState();

    const options = [
      { id: "yes", name: "Yes" },
      { id: "no", name: "No" },
      { id: "maybe", name: "Maybe", label: "Maybe Later" },
    ];

    return (
      <RadioGroup
        id="confirmation"
        options={options}
        selectedOption={selectedOption}
        setSelectedOption={setSelectedOption}
        orientation="horizontal"
        size="md"
        variant="primary"
      />
    );
  }

Vertical Orientation

Yes

Maybe Later

<RadioGroup
  id="choice"
  options={options}
  selectedOption={selectedOption}
  setSelectedOption={setSelectedOption}
  orientation="vertical"
/>

Available Variants

baseprimarysecondaryaccentsuccesswarninginfoerror

Available Sizes

xssmmdlg