---
name: Checkbox
menu: Patterns
parent: Modules
route: /patterns/checkbox
---

# Checkbox

Checkbox allows users to select one or more options from a visible list.

```specimen-react
<Vspace spacing='mars'>
    <Checkbox  label={(
      <p>
        Much longer option which includes detailed description of the behaviour this option will result in{' '}
        <a href="#/">example link</a>.
      </p>
    )}/>
    <Checkbox  label='Juicy burgers' onChange={(e) => console.log(`changing tings to ${e.target.checked}`)}/>
    <Checkbox  checked label='Tasty Shakes' onChange={(val) => console.log(`changing tings to ${val}`)}/>
</Vspace>
```

Use checkbox when you can select more than one option or when there's only one binary option (for example, when a user needs to choose whether they want to sign up for a newsletter). If placed near a text input, avoid having a check box too close to it.

```specimen-research-insight
When testing the sign up form for our Feed-in-Tariff, users did not complete the electronic signature text input. They ticked a checkbox immediately next to the text box and assumed that they only had to complete one of the two.
```

```specimen-see-also
Use [Radio Buttons](/patterns/radio-buttons) or [Dropdown](/patterns/dropdown) to allow users to only choose one answer from the list.
```

## Variants

### A basic Checkbox

```specimen-react
<Checkbox
  label='Juicy burgers'
  onChange={(e) => console.log(`changing tings to ${e.target.checked}`)}
/>
```

### Error state

```specimen-react
<Checkbox
  label='Tasty Shakes'
  onChange={(val) => console.log(`changing tings to ${val}`)}
  status="invalid"
  errorMessage="You can't continue unless you have Tasty Shakes"
/>
```
