# Radio

A radio button is a form control that allows users to select one of the predefined set of choices.


## Overview

### Variants

*   **Default**
    
*   **Contained**: used only in combination with other contained form components.
    
*   **Contained extended(coming soon)**: The contained version but including Label support text.

### Features

#### Label

All individual radio buttons must have a label to ensure clarity and accessibility. When radio buttons are grouped, the group must have a header label. Labels help users understand the purpose of the radio buttons, including those using assistive technologies.

#### Label support

This can be used for both the header and individual radio buttons. Use this to explain how to fill in the field, for example how to count or what to include. Contained radio buttons don’t have support text for the individual radio buttons.

### Contextual help

If the label and support text are not enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.

*   Use a tooltip if space is limited.
    
*   Use a modal for large amounts of text.

### Error message

If an error occurs we mark the entire group of options with error. The error is described with an error message.

### Behaviour

*   **Mutual exclusivity**: Only one radio button within a group can be selected at a time.
    
*   **Defaults**: Aim for having one option pre-selected.

### Alignment

We can align the radio buttons both horizontal and vertical.

*   **Vertical**: This is the default alignment. It's easier to read and scan the available options.
    
*   **Horizontal**: Only used for a small set of options if the page shouldn't be to long, but try to avoid.

### Do's and don'ts


## UX Guidelines

### Writing UX text for radio buttons

### Radio button options

### We ask the customers, they answer

### Be consistent

### Keep it simple