Radio

Preview

index.tsx

Group radio

Preview

index.tsx

Controlled Group radio

Preview

index.tsx

Generate Group radio with array

Preview

index.tsx

Design Tokens for Radio

Token	Color for	State/Meaning
--par-color-icon-radio-enabled	Radio icon	Enabled
--par-color-icon-radio-disabled	Radio icon	Disabled
--par-color-icon-radio-neutral-selected	Radio icon	Checked (neutral)
--par-color-icon-radio-neutral-disabled	Radio icon	Disabled (neutral)
--par-color-icon-radio-accent-selected	Radio icon	Checked (accent)
--par-color-icon-radio-accent-disabled	Radio icon	Disabled (accent)

Radio API Reference

`<Radio />`

Prop	Type	Default	Description
checked	boolean		Checked state (controlled)
onChange	function (event)		Callback when radio value changes
value	string \| number		Value of the radio
label	string \| ReactNode		Label for the radio
sublabel	string \| ReactNode		Sublabel for the radio
disabled	boolean	false	Disable the radio
color	'neutral' \| 'accent'	'neutral'	Radio color theme
radioWrapperProps	any		Props for the radio wrapper
...InputProps	See Input		Inherits all props from Input and native input[type=radio]

Note: Radio inherits all props from Input and the native input[type=radio] element. See Input documentation for full details on available props and tokens.

RadioGroup API Reference

`<RadioGroup />`

Prop	Type	Default	Description
name	string		Name for all radios in the group (required)
label	string \| ReactNode		Label for the radio group
defaultValue	string \| number		Default value (uncontrolled)
value	string \| number		Value of the selected radio (controlled)
disabled	boolean	false	Disable all radios in the group
color	'neutral' \| 'accent'	'neutral'	Color theme for all radios
items	RadioProps[]		Array of radio item props to auto-generate radios
onChange	function (value: string \| number)		Callback when selected value changes
children	ReactNode		Custom radio elements as children

Note: RadioGroup can generate radios from the items array or accept custom <Radio /> children. It controls the name, checked, and onChange props for its radios.