# Up-Dn-Counter.

## Übersicht

### Was macht die Komponente?

- Die Komponente zeigt einen Wert, welchen mann erhöhen oder mindern kann.

### Wann soll die Komponente eingesetzt werden?

- Wenn der User zwischen vielen numerischen Werten wählen soll.

### Regeln

- Die Komponente enthält einen Standardwert, welcher mihilfe von zwei Schaltflächen verändert werden kann.
- Die Schaltflächen beinhalten jeweils ein Plus- und ein Minus-Icon
- Falls der Standardwert 0 beträgt, wird die Minus-Schaltfläche deaktiviert.

## Varianten

### Zustände

DIe Komponente hat folgende Zustände:

- Default
- Min-Value
- Max-Value

### Varianten

Die Komponente hat folgende Varianten:

- listed / boxed

#### Listed

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

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

#### Boxed

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

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

### Spezifikationen

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

---

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