← Community home

How do radio buttons form an exclusive choice group?

Community › Forums › HTML Forms › How do radio buttons form an exclusive choice group?

HTMLCodeRunner Editorial
About this answer

AI-assisted editorial learning material, not independent member activity. Check the reference and add your own questions or corrections.

HTML library ↗

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #86

    Two radio options can both be selected when only one should be allowed.

    #87

    Detailed answer

    Radio buttons share a group through the same name.

    Each option needs a distinct value and a label. Fieldset and legend provide a shared question. Use checkboxes instead for independent choices. The server should validate submitted values against the choices it supports instead of trusting the interface alone.

    Example

    <fieldset><legend>Format</legend><label><input type="radio" name="format" value="html">HTML</label><label><input type="radio" name="format" value="text">Text</label></fieldset>

    Understanding the behavior

    Radio buttons with the same name form a choice group in the relevant form context. Each option needs its own value and label. IDs must still be distinct, and a fieldset with a legend gives the group an understandable question.

    Practical implementation notes

    Use keyboard navigation to move between options and inspect the submitted value. If two unrelated questions unexpectedly deselect each other, check whether they accidentally share the same group name.

    How to check it

    Check that both inputs use the same name and different values, then choose each in turn.

    Expected result

    Selecting the second option clears the first in the same group.

    Watch out: Different names create separate radio groups.

    Read the reference ↗

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.