Inspect the working example
Two fieldsets organize the controls visually and provide legends. The radio names establish separate groups in this one-document fixture: size and ink. Start with Small and Dark selected, then select Large and Green.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Initial state | Inspect checked controls | small and dark are checked |
| Select Large | Activate large | large and dark remain checked |
| Then select Green | Activate green | large and green checked; small and dark unchecked |
Follow the browser mechanism
Radio group membership depends on factors including name, tree and form owner. All controls here share a tree and have no form owner, so different names keep the groups separate. Fieldsets alone do not override matching names. This fixture changes native selection only; it does not apply a text theme to the rest of the page.
Separate fieldsets do not separate matching names
Both controls below use name="choice" despite separate fieldsets. Picking Green clears Large in this shared-tree, no-form-owner case.
<fieldset><legend>Text size</legend><label><input id="large" type="radio" name="choice" checked>Large</label></fieldset><fieldset><legend>Ink</legend><label><input id="green" type="radio" name="choice">Green</label></fieldset>After selecting Green, only green is checked. The fieldsets did not preserve two independent choices.
Try the repair
You add Medium as a third size option. Which name should it use, and should choosing it affect Green?
Show the worked answer
Use name="size" so Medium replaces the currently selected size. Green keeps name="ink" and remains selected.
- Check the four-control checked-state sequence after each choice.
- Use labels and legends that identify the actual choices.