Radio Group

A control that allows users to select a single option from a list of predefined options.

How to Import

Add this import to your component file

app/page.tsx

1import { RadioGroup, RadioGroupItem } from "@/components/lightswind/radio-group"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

value	string	-	The controlled value of the radio item to check	Optional
defaultValue	string	-	The default value of the radio group	Optional
onValueChange	function	-	Callback function called when the value changes	Optional
disabled	boolean	false	When true, prevents the user from interacting with the radio items	Optional
orientation	string	vertical	The orientation of the component (horizontal or vertical)	Optional
customSize	string	md	Custom size for the radio items (sm, md, lg)	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1<RadioGroup defaultValue="option-one">
2  <div className="flex items-center space-x-2">
3    <RadioGroupItem value="option-one" id="option-one" />
4    <Label htmlFor="option-one">Option One</Label>
5  </div>
6  <div className="flex items-center space-x-2">
7    <RadioGroupItem value="option-two" id="option-two" />
8    <Label htmlFor="option-two">Option Two</Label>
9  </div>
10</RadioGroup>

Variants

Different visual and behavioral variants of the component

Horizontal Variant

Radio group with horizontally arranged items

Preview not available for this example.

Previouslabel

Nextselect

A product byＭＵＨＩＬＡＮ and Team❤️.

Radio Group

A control that allows users to select a single option from a list of predefined options.

...

How to Import

Add this import to your component file

app/page.tsx

1import { RadioGroup, RadioGroupItem } from "@/components/lightswind/radio-group"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

value	string	-	The controlled value of the radio item to check	Optional
defaultValue	string	-	The default value of the radio group	Optional
onValueChange	function	-	Callback function called when the value changes	Optional
disabled	boolean	false	When true, prevents the user from interacting with the radio items	Optional
orientation	string	vertical	The orientation of the component (horizontal or vertical)	Optional
customSize	string	md	Custom size for the radio items (sm, md, lg)	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1<RadioGroup defaultValue="option-one">
2  <div className="flex items-center space-x-2">
3    <RadioGroupItem value="option-one" id="option-one" />
4    <Label htmlFor="option-one">Option One</Label>
5  </div>
6  <div className="flex items-center space-x-2">
7    <RadioGroupItem value="option-two" id="option-two" />
8    <Label htmlFor="option-two">Option Two</Label>
9  </div>
10</RadioGroup>

Variants

Different visual and behavioral variants of the component

Horizontal Variant

Radio group with horizontally arranged items

Preview not available for this example.

Previouslabel

Nextselect

A product byＭＵＨＩＬＡＮ and Team❤️.

Radio Group

How to Import

Props

Basic Usage

Variants

Horizontal Variant

On This Page

Contribute

Radio Group

How to Import

Props

Basic Usage

Variants

Horizontal Variant

On This Page

Contribute

React Radio Group Component - Lightswind UI

Key Details of React Radio Group

Radio Group

How to Import

Props

Basic Usage

Variants

Horizontal Variant

On This Page

Contribute

Radio Group

How to Import

Props

Basic Usage

Variants

Horizontal Variant

On This Page

Contribute