Radio

Installation#

npmpnpmyarnbun

npx sugarcoat add radio

Examples#

Default#

Default

Sizes#

Available in four sizes to fit different UI contexts.

Sizes

Colors#

Radio buttons can use different color palettes.

Colors

Orientation#

Radio groups can be horizontal or vertical.

Orientation

Using RadioButton#

Use RadioButton for radio buttons without labels.

RadioButton

Disabled State#

Disabled

Controlled Radio Group#

Controlled

Survey Example#

Survey Example

Anatomy#

<Radio.Group>
  <Radio.Item value="option1" label="Option 1" />
  <Radio.Item value="option2" label="Option 2" />
</Radio.Group>
 
// Or without labels
<Radio.Group>
  <Radio.Button value="a" />
  <Radio.Button value="b" />
</Radio.Group>

Usage#

Import

import { Radio } from "@sugarcoat/ui-nxt";

Usage

<Radio.Group 
defaultValue="option1"
color="primary"
orientation="vertical"
>
<Radio.Item value="option1" label="First Option" />
<Radio.Item value="option2" label="Second Option" />
<Radio.Item value="option3" label="Third Option" />
</Radio.Group>

Props#

Radio.Group#

Prop	Type	Default	Description
size	"xs" \| "sm" \| "md" \| "lg"	"sm"	Size of the radio buttons
color	"default" \| "primary" \| "accent" \| "success" \| "danger"	"default"	Color palette for the radio buttons
orientation	"horizontal" \| "vertical"	"horizontal"	Layout orientation of the radio group
shadow	"none" \| "sm" \| "md" \| "lg"	"none"	Box shadow elevation
value	string	-	Controlled selected value
defaultValue	string	-	Initial selected value (uncontrolled)
onValueChange	(value: string) => void	-	Callback when selection changes
disabled	boolean	false	Whether all radio buttons are disabled

Radio.Item#

Prop	Type	Default	Description
valuerequired	string	-	Unique value for this radio option
label	string	-	Label text displayed next to the radio button
disabled	boolean	-	Whether this specific item is disabled

Radio.Button#

Prop	Type	Default	Description
valuerequired	string	-	Unique value for this radio option
size	"xs" \| "sm" \| "md" \| "lg"	-	Override size from group
color	"default" \| "primary" \| "accent" \| "success" \| "danger"	-	Override color from group

Accessibility#

Built on Base UI Radio Group for robust accessibility
Supports keyboard navigation (Arrow keys to move, Space to select)
Properly groups radio buttons with ARIA attributes
Focus visible styles included for keyboard users
Only one option can be selected at a time