Radio

Best practice

• Use radio buttons when the user can only select one option out of 6 or less options.
• For doing multi-selection from 6 or less options use checkboxes. Check our recommendations for all selection components.
• Use <fieldset> and <legend> to group radio buttons and give them a label.
• The legend should describe what to input and not how.
• Use natural language and use the terms that the user would expect.
• Don’t use verbs like enter, add, input etc in the legend.
• Don’t add a colon ( : ) at the end of the legend.
• Use the hint text to provide additional context and explanation.

Grouping

By default, the radio button group is vertically aligned, but the component also supports a horizontally aligned radio button group. Since horizontal groups are more difficult to scan, we always recommend using vertically aligned radio button groups wherever possible. Always use the vertical group in forms. Read more about forms here.

Hint text

Use the hint text to provide information that makes it easier for the user to select the right option. For a group of radio buttons help text is placed above the radio buttons and below the label (<legend>).

For more information on help text and help in general see our form design guidelines.

Error state

An invalid group of radio buttons is highlighted with a red error message placed above the radio buttons and below the label (<legend>). Error messages should be clear, concise and provide actionable remedies to resolve the errors.

Related pages

• Components -> Checkbox
• Content -> Labels
• Guidelines -> Forms
• Guidelines -> Selection components