---
title: Radio Group
navTitle: Radio Group
summaryParagraph: Radio groups include a set of radios that let people select exactly one option in a set.
tags: ["Choice list", "Radio button", "Radio button group", "Option button", "Choice", "Selection"]
needToKnow:
- Prefer vertical (stacked) radios to easily scan and compare options.
- When there’s only two options, consider if a single checkbox would be better.
- For settings that are immediately applied, consider using a toggle switch instead.
demoStoryId: radiogroup-react--default-kaizen-site-demo
---

## Visuals

### UI Kit

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D1412%253A270" allowfullscreen></iframe>

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D1412%253A277" allowfullscreen></iframe>

## To keep in mind

*   There must always be more than one radio field used together in a group.
*   Radio Group contains a set of Radios and a Radio Group Label.
*   Show options in a sensible order, such as alphabetical, numeric.
*   Avoid long lists. Chunk long lists and group related options together.
*   The setting only applies when the user takes an action, such as clicking a save button.
*   Use specific, clear, concrete labels.
*   Prefer vertical (stacked) radios to easily scan and compare options.
*   Use a fieldset to group related radio fields together in a set.
*   Offer a default option.
*   Prefer to use a default selected option.
*   Avoid nesting.
*   For Right-To-Left languages, add `dir=”rtl”` to a `div` wrapping the Radios

## When to use

*   Single choice options
*   Shown side-by-side or stacked
*   Where there is space to show them all at once

## When not to use

*   Don’t use when there is more than 20 options
*   When there’s only two options, consider if a single [checkbox](/components/checkbox-field) would be better.
*   For settings that are immediately applied, consider using a [toggle switch](/components/toggle-switch-field) instead.
*   When there’s limited space, consider using a select dropdown instead.
*   Sometimes, a dropdown menu might be better. If it’s an infrequently used setting, has a good default, has 4 or more options, consider using a select dropdown menu.

## See also

Some websites have a “radio button group” concept where radio options are styled like buttons and you can only select one in the group. That’s a different thing to this.

## External Links

Here are some examples of other existing design systems:

- [Material: radio button](https://material.io/develop/web/components/input-controls/radio-buttons/)
- [Material: form fields](https://material.io/develop/web/components/input-controls/form-fields/)
- [Lightning: radio group](https://www.lightningdesignsystem.com/components/radio-group/)
- [Polaris: choice list](https://polaris.shopify.com/components/forms/choice-list)
- [Polaris: radio button](https://polaris.shopify.com/components/forms/radio-button)