iconiq
—Open GitHub

Radio Group

Single-select option group for mutually exclusive choices.

Installation

npx shadcn@latest add @iconiq/r-radio-group

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Props

Radio option shape

3 props

Options are plain objects consumed by the RadioGroup component.
valuestring
Required
Unique identifier for the option and the selected value reported through onChange.
labelstring
Required
Primary line shown for the option.
descriptionstring
Optional secondary line shown below the label with reduced emphasis.

RadioGroup

9 props

Single-choice selector with the same Iconiq row motion layered over Radix UI primitives.
options{ value: string; label: string; description?: string }[]
Required
Available choices in display order.
defaultValuestring
Initial uncontrolled selection. If omitted or invalid, the component falls back to the first option.
valuestring
Controlled selected value. When provided, parent state owns selection and the component only reports changes.
onChange(value: string) => void
Called whenever a user selects a row.
namestring
Shared radio input name. If omitted, the component generates one per instance.
layoutIdstring
Motion layout id used by the selected row highlight. Override it only when you want to intentionally share that highlight between groups.
"aria-label"string
Accessible name for the radiogroup. Provide this or aria-labelledby so assistive tech can announce the set clearly.
"aria-labelledby"string
ID of external text that labels the radiogroup. Use this instead of aria-label when visible copy already exists.
classNamestring
Merged onto the root wrapper for spacing or sizing adjustments.

Notes

If options is empty, the component returns null rather than rendering an empty radiogroup.
In uncontrolled mode, the selected value normalizes back to the first available option if the current selection disappears from the options array.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.
reducedMotionboolean
When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.