---
name: Stepper
menu: Patterns
parent: Modules
route: /patterns/stepper
---

import styled from 'styled-components';
import { SvgIcon } from '../../styles/Iconography';

# Stepper

Stepper is a visual way to increase or decrease a numerical value. The illustration on the left dynamically changes based on the selected value.

## Configurations

### Basic example

```specimen-react
<DocStateProvider initialState={{ value: 3 }}>
  {({ state, setState }) => (
    <Stepper
      counterLabel={state.value > 1 ? 'bedrooms' : 'bedroom'}
      onChange={value => setState({ value })}
      value={state.value}
      id="stepper"
      imageSources={[
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-1.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-2.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-3.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-4.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-5.png',
      ]}
    />
  )}
</DocStateProvider>
```

### Customised buttons

```specimen-react
<DocStateProvider initialState={{ value: 3 }}>
  {({ state, setState }) => (
    <Stepper
      counterLabel={state.value > 1 ? 'bedrooms' : 'bedroom'}
      incrementLabel="add a bedroom"
      incrementIcon="▲"
      decrementLabel="remove a bedroom"
      decrementIcon="▼"
      onChange={value => setState({ value })}
      value={state.value}
      id="stepper"
      imageSources={[
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-1.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-2.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-3.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-4.png',
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/stepper/house-5.png',
      ]}
    />
  )}
</DocStateProvider>
```

## Implementation

### Props

#### `value`

Sets the value of the Stepper.

#### `counterLabel`

The label for the counter. Does not handle pluralisation.

#### `onChange`

Callback for when the number is incremented or decremented.

#### `imageSources`

Array of image paths for each step, its lenght determines the max value for the Stepper.

#### `id`

HTML id.

#### `incrementLabel` (optional)

How to describe the incrementation.<br />
Defaults to `'add one'`.

#### `decrementLabel` (optional)

How to describe the decrementation.<br />
Defaults to `'remove one'`.

#### `incrementIcon` (optional)

The icon for incrementation.<br />
Defaults to `<SvgIcon name="plus" title="add one" />`.

#### `decrementIcon` (optional)

The icon for decrementation.<br />
Defaults to `<SvgIcon name="minus" title="remove one" />`.
