Radio

A radio group allows a user to select a single item from a list of mutually exclusive options.

Installation

npx shadcn add https://hq-ui.vercel.app/r/nova/radio

Examples

Description

Radio group items with a description using the Field component.

radio-group-description

Choice Card

Use FieldLabel to wrap the entire Field for a clickable card-style selection.

radio-group-choice-card

Fieldset

Use FieldSet and FieldLegend to group radio items with a label and description.

radio-group-fieldset
Subscription PlanYearly and lifetime plans offer significant savings.

Disabled

Use the disabled prop on RadioGroupItem to disable individual items.

radio-group-disabled

Invalid

Use aria-invalid on RadioGroupItem and data-invalid on Field to show validation errors.

radio-group-invalid
Notification PreferencesChoose how you want to receive notifications.