iconiq
—Open GitHub

Radio Group

Single-select list with a sliding highlight, spring radio control, and optional descriptions. Built to stay sharp in pricing tables, settings, and onboarding flows.

Open in

Installation

npx shadcn@latest add @iconiq/radiogroup

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

4 props

Single-choice selector that can run uncontrolled from local state or sync to a controlled value prop.
options{ value: string; label: string; description?: string }[]
Required
Available choices in display order.
valuestring
Controlled selected value. If omitted, the component starts from the first option's value and manages selection locally.
onChange(value: string) => void
Called whenever a user selects a row.
classNamestring
Merged onto the root wrapper for spacing or sizing adjustments.

Notes

If options is empty, the uncontrolled initial state becomes undefined and no row is selected.
Controlled updates are synced through an effect that watches the value prop.