Radio Group

Used to select a single state from multiple options.

Default

Light

Dark

Usage

Example Code

1import { RadioGroup, RadioGroupItem } from "inc-design-system/radioGroup";

Example Code

1<RadioGroup defaultValue="light">
2  <div className="flex items-center space-x-2">
3    <RadioGroupItem value="light" id="r2" />
4    <h1>Light</h1>
5  </div>
6  <div className="flex items-center space-x-2">
7    <RadioGroupItem value="dark" id="r3" />
8    <h1>Dark</h1>
9  </div>
10</RadioGroup>

Props

RadioGroup

Prop	Type	Description	Default
asChild	boolean	Render the radio group as a child component. Default is false.	false
defaultValue	string	The default value of the radio group. No default value.	-
value	string	The value of the radio group. No default value.	-
onValueChange	(value: string) => void	Callback when the value of the radio group changes. No default value.	-
disabled	boolean	Whether the radio group is disabled. No default value.	-
name	string	The name attribute of the radio group. No default value.	-
required	boolean	Whether the radio group is required for form submission. No default value.	-
orientation	enum	The orientation of the radio group.	undefined
dir	enum	The direction of the radio group. No default value.	-
loop	boolean	Whether the radio group should loop focus. Default is true.	true

RadioGroupItem

Prop	Type	Description	Default
asChild	boolean	Render the radio group item as a child component. Default is false.	false
value	string	The value of the radio group item. No default value.	-
disabled	boolean	Whether the radio group item is disabled. No default value.	-
required	boolean	Whether the radio group item is required. No default value.	-