# Up-Dn-Counter.

## Overview

### What does the component do?

- The component shows a value that can be increased or decreased.

### When should the component be used?

- When the user should choose between many numeric values.

### Rules

- The component contains a default value that can be changed using two buttons.
- The buttons contain one plus and one minus icon each.
- If the default value is 0, the minus button will be disabled.

## Variants

### States

The component has the following states:

- Default
- Min-Value
- Max-Value

### Variants

The component has the following variants:

- listed / boxed

#### Listed

![Darstellung des Coutners](https://digital.sbb.ch/assets/images/mobile/up-dn-counter-listed-light.webp "Darstellung des Coutners")

![Darstellung des Coutners](https://digital.sbb.ch/assets/images/mobile/up-dn-counter-listed-dark.webp "Darstellung des Coutners")

#### Boxed

![Darstellung des Coutners](https://digital.sbb.ch/assets/images/mobile/up-dn-counter-boxed-light.webp "Darstellung des Coutners")

![Darstellung des Coutners](https://digital.sbb.ch/assets/images/mobile/up-dn-counter-boxed-dark.webp "Darstellung des Coutners")

### Specification

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=305-1555&t=N7M8b5Y9aIJc4LzY-1)

---

Source: https://digital.sbb.ch/en/design-system/mobile/components/up-dn-counter/