---
id: radio-container
title: RadioContainer
---

# RadioContainer

## How to use

<code src="@digigov/ui/src/form/RadioContainer/__stories__/Default.tsx" />

### For multiple questions

If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.

<code src="@digigov/ui/src/form/RadioContainer/__stories__/MultipleQuestions.tsx" />

### Inline radios

<code src="@digigov/ui/src/form/RadioContainer/__stories__/Inline.tsx" />

### Radio items with hints

You can add hints to radio items to provide additional information about the options.

<code src="@digigov/ui/src/form/RadioContainer/__stories__/WithHints.tsx" />

### Radio items with a text divider

If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
The text is usually the word ‘or’.

<code src="@digigov/ui/src/form/RadioContainer/__stories__/NoneAnswer.tsx" />

### Conditionally revealing a related question

You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.

This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.

<code src="@digigov/ui/src/form/RadioContainer/__stories__/ConditionalReveal.tsx" />

### Error messages

Error messages should be styled like this:

<code src="@digigov/ui/src/form/RadioContainer/__stories__/WithErrorMessage.tsx" />

## Accessibility

You can read more about the accessibility patterns used in our Radio
implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) section.

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={["RadioItem","RadioContainer","RadioConditional","ChoiceDividerText"]} />