---
name: Choices
menu: Patterns
parent: Modules
route: /patterns/choices
---

# Choices

Choices is a more visual equivalent to the Radio buttons. There are two variants: `choices-binary` and `choices-multiple`.

## Choices-binary

`Choices-binary` allow users to select one out of the two available options.

```specimen-react
<ChoicesBinary legend="My home uses:" onChange={() => console.log("Choice Binary")}>
  <ChoicesBinaryChoice
    name="first-example"
    id="first-example-both"
    label="Gas & Electricity"
    defaultChecked
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/both-active.svg"
  />
  <ChoicesBinaryChoice
    name="first-example"
    id="first-example-electricity"
    label="Just Electricity"
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/electricity.svg"
  />
</ChoicesBinary>
```

## Choices-multiple

`Choices-multiple` allow users to select exactly one out of multiple available options.

```specimen-react
<ChoicesMultiple legend="Please choose">
  <ChoicesMultipleChoice
    name="choices-multiple-example"
    id="choices-multiple-example-both"
    label="Electricity and gas"
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/both-active-unpadded.svg"
  />
  <ChoicesMultipleChoice
    name="choices-multiple-example"
    id="choices-multiple-example-electricity"
    label="Electricity only"
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/electricity-unpadded.svg"
  />
  <ChoicesMultipleChoice
    name="choices-multiple-example"
    id="choices-multiple-example-gas"
    label="Gas only"
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/gas-unpadded.svg"
  />
</ChoicesMultiple>
```

## Configurations

### Choice description

This adds a description under the label text of the choice

```specimen-react
<ChoicesBinary legend="My home uses:" onChange={() => console.log("Choice Binary")}>
  <ChoicesBinaryChoice
    name="second-example"
    id="second-example-both"
    label="Gas & Electricity"
    description="You'd like us to provide both of the energy kinds you use."
    defaultChecked
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/both-active.svg"
  />
  <ChoicesBinaryChoice
    name="second-example"
    id="second-example-electricity"
    label="Just Electricity"
    description="You only want us to provide electricity to your house."
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/electricity.svg"
  />
</ChoicesBinary>
```

```specimen-react
<ChoicesMultiple legend="Please choose" onChange={() => console.log("Choice multiple")}>
  <ChoicesMultipleChoice
    name="choices-multiple-example-two"
    id="choices-multiple-example-two-both"
    label="Electricity and gas"
    description="You'd like us to provide both of the energy kinds you use."
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/both-active-unpadded.svg"
  />
  <ChoicesMultipleChoice
    name="choices-multiple-example-two"
    id="choices-multiple-example-two-electricity"
    label="Electricity only"
    description="You only want us to provide electricity to your house."
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/electricity-unpadded.svg"
  />
  <ChoicesMultipleChoice
    name="choices-multiple-example-two"
    id="choices-multiple-example-two-gas"
    label="Gas only"
    description="You only want us to provide gas to your house."
    imageURL="https://storage.googleapis.com/static.bulb.co.uk/design/images/choices/gas-unpadded.svg"
  />
</ChoicesMultiple>
```

### `imageURL`

Path of an image to be shown in the choice panel

### `label`

Text for the choice label

### `id`

An `id` for the choice input

### `value`

A value for the choice input

### `legend`

A caption for the choice panel

### `onChange`

A change handler for the choice panel
