---
name: Radio Buttons
menu: Patterns
parent: Modules
route: /patterns/radio-buttons
---

# Radio Buttons

Radio buttons allow users to see all available choices at once and select just one option.

## Pre-selected

```specimen-react
<RadioButtons
  variant="vertical"
  id="example1"
  label="Which do you prefer"
  labelIsHeading={true}
  status="unknown"
  value="two"
  possibleValues={[
    {title: 'being amazing', value: 'one'},
    {title: 'being fantastic', value: 'two'},
    {title: 'being a absolutely wonderful and incredibly engaging person who enjoys knowing that they are just an absolute delight', value: 'three'}
  ]}
  answerQuestion={event => console.log(event)}
/>
```

Avoid pre-selecting radio buttons related to important processes (e.g. financial transactions) to reduce mistakes.

## Vertical

```specimen-react
<RadioButtons
  variant="vertical"
  id="example2"
  label="Which do you prefer"
  labelIsHeading={true}
  status="unknown"
  possibleValues={[
    {title: 'being amazing', value: 'one'},
    {title: 'being fantastic', value: 'two'},
    {title: 'being a absolutely wonderful and incredibly engaging person who enjoys knowing that they are just an absolute delight', value: 'three'}
  ]}
  answerQuestion={event => console.log(event)}
/>
```

```specimen-research-insight
During dunning cycle testing, users were concerned about accidentally clicking “next” and confirming a large payment. We can help users avoid this mistake by not preselecting radio buttons.
```

## Horizontal

```specimen-react
<RadioButtons
  variant="horizontal"
  id="example3"
  label="Have you ever been so far"
  status="unknown"
  possibleValues={[
    {title: 'Indubitable', value: 'one'},
    {title: 'Demonstrable', value: 'two'}
  ]}
  answerQuestion={event => console.log(event)}
  description="You can add some description text too :)"
/>
```

## With error messages

You can include error messages as well - they will display when the `status` is `invalid`.

### Vertical

```specimen-react
<RadioButtons
  variant="vertical"
  id="example4"
  label="What's your favourite colour?"
  labelIsHeading={true}
  status="invalid"
  possibleValues={[
    {title: 'Red is a really great colour', value: 'red'},
    {title: 'Green is the colour of trees', value: 'green'},
    {title: 'Blue is very calming', value: 'blue'}
  ]}
  answerQuestion={event => console.log(event)}
  errorMessage="One of these must be your favourite!"
/>
```

### Horizontal

```specimen-react
<RadioButtons
  variant="horizontal"
  id="example3"
  label="Have you ever been so far"
  status="invalid"
  possibleValues={[
    {title: 'Indubitable', value: 'one'},
    {title: 'Demonstrable', value: 'two'}
  ]}
  answerQuestion={event => console.log(event)}
  description="You can add some description text too :)"
/>
```
