Radio

The Radio component allows users to choose a single option from a set of mutually exclusive choices. It presents a list of options where only one can be selected at a time, providing a clear and intuitive way for users to make a single selection from a group of related options

Basic

Align vetically - by default

Color For T-Shirt

Red

Blue

Green

Code

<>
<Label className="mr-2">Color For T-Shirt</Label>
<RadioGroup>
            <Radio>Red</Radio>
            <Radio>Blue</Radio>
            <Radio>Green</Radio>
</RadioGroup>
</>

Customization

Align horizontally

Color For T-Shirt

Red

Blue

Green

Code

<>
<Label className="my-2">Color For T-Shirt</Label><RadioGroup layout="row">
    <Radio>Red</Radio>
    <Radio>Blue</Radio>
    <Radio>Green</Radio>
</RadioGroup>
</>

Customization

Align horizontally, change the selected color for dark mode and light mode

Color For T-Shirt

Red

Blue

Green

Code

<>
<Label className="my-2">Color For T-Shirt</Label><RadioGroup layout="row" id="Rg00">
    <Radio darkModeCheckedkBackgroundColor="#e00" lightModeCheckedBackgroundColor="#f00">Red</Radio>
    <Radio darkModeCheckedkBackgroundColor="#00e" lightModeCheckedBackgroundColor="#00f">Blue</Radio>
    <Radio darkModeCheckedkBackgroundColor="#0e0" lightModeCheckedBackgroundColor="#0f0">Green</Radio>
</RadioGroup>
</>