Skip to content
SkillCodex
Menu

Radio group

Radio group

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

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r2
Sources
5 sources
Status
Published
Read the sources

You may have searched for: round choices where only one can be activepick one delivery speedchoose exactly one plan

All phrasings
Save and share

Recognize

Choices and binary states

Try it

Is this an independent value, one exclusive grouped choice, or an on/off setting?

Radio group

Shared trial context

A settings flow asks the user to make a choice and understand whether it is independent, exclusive, or an on/off setting.

Radio group

Mission

Radio group

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

Delivery method

Live result

No delivery is selected yet.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
One delivery option is checked beneath a shared visible legend.
Edge case
When a required group has no selection, submission focuses the group and explains that one method must be chosen.

What this example shows

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

Which fits your need?

Radio group

Choosing one shipping method from visible alternatives

Checkbox

Selecting any number of independent options

Which component will you use here?
Difference and sources

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

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Group label

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

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Choices and binary states

      Radio group belongs to this comparison group.

    • Do not confuse

      Checkbox

      Choose Radio group if exactly one option must be selected among visible alternatives. Choose Checkbox if the user may check zero, one, or several options.

      Compare this pair
    • Do not confuse

      Switch

      Choose Radio group if the user picks one option among several named alternatives, such as a shipping method. Choose Switch if the only question is whether one setting is on or off.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    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

    Choose

    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 choice is better represented as an on or off setting

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Reach the group with Tab, then choose another option with the arrow keys.

      Expected result

      Focus and selection move within the named group, and exactly one option is selected.

    2. 2. Do this

      Click another option’s label and then press Tab to continue.

      Expected result

      The previous choice is cleared, the new choice is selected, and Tab leaves the group for the next control.

    3. 3. Do this

      For a required group with no default, submit before choosing, then make a choice.

      Expected result

      The error names the missing choice, identifies its group and lets you recover by selecting one option.

    Full contract
    1. 1A visible legend names the whole choice
    2. 2Exactly one option can be selected
    3. 3Arrow-key behavior matches visual order
    4. 4Required and error states apply to the group

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Radio group without breaking its behavior

    # Implement Radio group in your agent
    
    ## Objective
    Implement Radio group for this verified behavior: A named set of mutually exclusive choices where selecting one option clears the previous selection.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Radio group matches the need before writing code.
    
    ## Required behavior
    - Selecting one item automatically clears the previous item in the named group.
    - Arrow keys move through related items according to their visual orientation.
    
    ## States to cover
    - Standard delivery selected
    - Express delivery selected
    
    ## Accessibility
    - ARIA role: fieldset > input[type=radio]
    - The primary control or named region for Radio group has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - The native group behaves as one tab stop once a value is selected, with visible focus on the active radio.
    - Not applicable: selection remains until another radio is chosen or the form resets.
    - The legend names the group, and each radio exposes its label, checked state, required state, and error relationship.
    - Tab enters the selected radio or first option
    - Arrow keys move and select
    - Shift+Tab leaves the group
    
    ## When not to use
    - More than one answer is allowed
    - The choice is better represented as an on or off setting
    
    ## Acceptance criteria
    - A visible legend names the whole choice
    - Exactly one option can be selected
    - Arrow-key behavior matches visual order
    - Required and error states apply to the group
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Radio group on a real journey

    # Verify Radio group after implementation
    
    ## Objective
    Audit the Radio group implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:82984a25671654eada61ce809e9c6dcdca96949925e28fa5073a125242875140

    Diagnose a problem

    Find and fix the Radio group defect

    # Debug Radio group in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Radio group.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - A visible legend names the whole choice
    - Exactly one option can be selected
    - Arrow-key behavior matches visual order
    - Required and error states apply to the group
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Radio group fix

    # Prevent the Radio group regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Radio group with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:7d47842992a77fb2c1f77a0204ad4879b639cd12fdb03b7664e3509fb566a50b

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:9540657048d8645b1dbed3b18fe8918bb8a718d6dbdd7e105ab3f2eda4a5e72b

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    fieldset with input[type=radio]

    NativeNative radios and a legend name the group; styling must preserve exclusive choice and keyboard behavior.

    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 a required group has no selection, submission focuses the group and explains that one method must be chosen.

    Visual signals

    • Round controls grouped under one question
    • All alternatives visible
    • One filled indicator at most

    Behavioral signals

    • Selecting one clears another
    • Arrow keys move and select within the group
    • The group shares one accessible name

    Accessibility

    Role
    fieldset > input[type=radio]
    Accessible name
    The primary control or named region for Radio group 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

    Open the HTML, ARIA, Radix, and shadcn matrix
    • 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
      sourceId
      source-ui-html-input
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: Native radios and a legend name the group; styling must preserve exclusive choice and keyboard behavior.

      Verify binding source

    Sources

    • WAI-ARIA APG: Radio Group Pattern
      sourceId
      source-ui-aria-radio-group
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/radio/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:35Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:436a893f2f2f65f1f9c874321723e7c5360e580b980a5546e9eb562ee31b0dba
      status
      verified

      Claim covered: Radio group: informative APG guidance for the radio group pattern: roles, states, relationships, and keyboard interaction.

    • WHATWG HTML: The input element
      sourceId
      source-ui-html-input
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/input.html#the-input-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:4699d26dbf428296b4b352b480b75c846a9a6b23cf3f124d6d6fe6b5e19d4eba
      status
      verified

      Claim covered: Radio group: normative native semantics, states, attributes, and browser behavior for input.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Claim covered: Radio group: normative native semantics, states, attributes, and browser behavior for HTML form controls.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Radio group: informative WCAG guidance for evaluating visible keyboard focus appearance.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Radio group: normative ARIA role definitions and constraints for the stated accessible role.