Radio Group

The RadioButtonGroup component is a flexible and customizable radio button set designed to handle various input scenarios within your UI. It supports different configurations, including orientation, size, and rounding, allowing you to adapt the radio buttons to fit your design needs. With options for custom labels, variants, and color themes, this component ensures that your selection interface is both intuitive and visually consistent across your application. Additionally, the component is fully accessible, with support for disabled states and custom labeling, making it an essential part of any form or selection-based UI.

Radio Button Installation

Radio Group Installation

Basic Radio Group

1<RadioButtonGroup
2  label="What your favorite food?"
3  labelClassName="text-xl font-bold text-white"
4  name={"favorite-food"}
5  options={options}
6  selectedValue={defaultSelectedValue}
7  onChange={(value: string) => setDefaultSelectedValue(value)}
8/>

Radio Group API Reference

Disabled Radio Group

1<RadioButtonGroup
2  label="What your favorite food?"
3  labelClassName="text-xl font-bold text-white"
4  name={"favorite-food-disabled"}
5  options={options}
6  selectedValue={""}
7  onChange={(value: string) => {}}
8  disabled={true}
9/>

Radio Group - Sizes

1<RadioGroup
2  isOn={isRadioGroupOn}
3  handleToggle={toggleRadioGroup}
4  size="small"
5/>
6<RadioGroup
7  isOn={isRadioGroupOn}
8  handleToggle={toggleRadioGroup}
9  size="default"
10/>
11<RadioGroup
12  isOn={isRadioGroupOn}
13  handleToggle={toggleRadioGroup}
14  size="large"
15/>