# Radio Radio buttons let users pick exactly one option from a short list. ## Preview ```html title="Radio group"
Where do you live?
``` ```tsx import { Fieldset, Radio } from '@govtech-bb/react';
; ``` The Radio component lets users pick exactly one option from a short list of mutually exclusive choices. Always wrap a group of radios in a `
` with a `` that asks the question, since screen readers announce the legend with every option so users hear what they are answering. ## Usage

When to use

  • Use radio buttons when users must choose exactly one option from a short list.
  • Use them when seeing all choices at once helps users compare and decide.

When not to use

  • Do not use radio buttons when more than one option may be selected; use checkboxes.
  • Do not use them for a long list that is difficult to scan; consider a select.
## Best practices ### Group one question with a legend Put related radios in a `fieldset`, use the question as the `legend` and add a hint such as “Select one option” when needed. Place each radio before its label. ### Avoid influencing the answer Do not preselect an option for a question. Order choices logically, add “None of the above” when it is a real answer, and use per-option hints only where they help users distinguish similar choices. ## Per-option hints Add a hint to a single option to clarify its meaning. Use `aria-describedby` so screen readers announce it alongside the option's label. ```html title="Radio group with per-option hints"
How would you like to be contacted?
We'll only use this to send updates about your application.
A government officer may call between 9am and 5pm.
``` ```tsx import { Fieldset, Radio } from '@govtech-bb/react';
; ``` ## Conditional reveal Show follow-up content when a specific option is selected. The conditional block sits as a sibling of its radio item and appears only when that radio is checked. ```html title="Radio group with conditional reveal"
Preferred contact method
``` ```tsx import { Fieldset, FormGroup, Input, Label, Radio } from '@govtech-bb/react';
} /> } />
; ``` ## Tips Do not pre-select an answer. Letting users make an active choice ensures they give an answer they actually mean: pre-selecting an option skips the decision and can produce answers users did not intend to give.