Radio group

Component preview

A named set of mutually exclusive choices where selecting one option clears the previous selection.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: radio buttons, single-choice group, option group

round choices where only one can be active
pick one delivery speed
choose exactly one plan
select one answer from a visible group
options that clear each other
a single choice with all alternatives shown

Try it

Choices and binary states

Compare all three behaviors

Shared comparison scenario: A settings flow asks the user to make a choice and understand whether it is independent, exclusive, or applied immediately.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Radio group

Radio group permits exactly one choice; Checkbox choices are independent, while Switch changes one immediate on or off setting.

Your task

Enter the group with Tab, choose Express with arrows, and verify Standard is cleared.

Edge case to verify

When the group is required and untouched, submission focuses the group and explains that one method must be chosen.

Mission

Radio group

Enter the group with Tab, choose Express with arrows, and verify Standard is cleared.

Primary state: One delivery option is checked beneath a shared visible legend.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Group label

A shared name that explains the choice represented by the group.

Use it when

Choosing one shipping method from visible alternatives
Answering one mutually exclusive survey question

Avoid it when

More than one answer is allowed
The setting should apply as an immediate on or off switch

Compare similar concepts

Checkbox represents an independent choice that may wait for submission; Radio group enforces one choice, while Switch applies an on or off setting immediately.

Checkbox

Switch applies one setting immediately; Checkbox usually records a choice for later submission, and Radio group chooses one value among alternatives.

Switch

Technical details

Behaviors

Keep one choice selected
Selecting one item automatically clears the previous item in the named group.
Navigate with arrows
Arrow keys move through related items according to their visual orientation.

States

Standard delivery selected
Standard delivery selected
Express delivery selected
Express delivery selected

State transitions

Standard delivery selected → Express delivery selected
Arrow navigation or direct activation selects Express and clears Standard.
Express delivery selected → Standard delivery selected
Arrow navigation or direct activation selects Standard and clears Express.

Test scenarios

Context: Checkout presents Standard, Express, and Pickup under one delivery method legend.
Mission: Enter the group with Tab, choose Express with arrows, and verify Standard is cleared.
Primary state: One delivery option is checked beneath a shared visible legend.
Edge case: When the group is required and untouched, submission focuses the group and explains that one method must be chosen.

Accessibility

Role: native fieldset and radio inputs
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The native group behaves as one tab stop once a value is selected, with visible focus on the active radio.
Dismissal: Not applicable: selection remains until another radio is chosen or the form resets.
Scroll: Scrolling the page does not change the value. The focused control and any associated message remain visible above fixed interface regions.
Announcement: The legend names the group, and each radio exposes its label, checked state, required state, and error relationship.
Keyboard: Tab enters the selected radio or first option
Arrow keys move and select
Shift+Tab leaves the group

Bindings

fieldset with input[type=radio]
implementationKind
native
nativeElement
fieldset with input[type=radio]
ariaPattern
radiogroup
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Native radio inputs and a legend provide the group name; styling must preserve the exclusive choice and keyboard model.
Verify binding source

Sources

WAI-ARIA APG: Radio Group Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Radio group: radio group naming, exclusive selection, focus, and arrow-key interaction guidance.
WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Claim covered: Radio group: native input types, labeling, state, validation, and form participation.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.