# CheckboxButton

Ein CheckboxButton ist eine optisch auffälligere Variante der Checkbox. Sie dient ebenfalls dazu, Optionen auszuwählen oder abzuwählen und wird häufig innerhalb der CheckboxGroup verwendet.

## Guidelines

# Grundlagen

Ein CheckboxButton funktioniert in der Handhabung nahezu identisch wie eine
[Checkbox](/04-components/form-controls/checkbox/overview). Der Unterschied
liegt im Erscheinungsbild. Je nach Gestaltung der Benutzeroberfläche oder je
nach Anwendungsfall sollte individuell entschieden werden, welche der beiden
Components sinnvoller ist.

## Best practices

Achte bei der Verwendung eines CheckboxButtons darauf, dass...

- sie immer eine Beschriftung hat.
- die Beschriftung kurz und eindeutig ist. Sie sollte stets mit einem
  Großbuchstaben beginnen.
- die Beschriftung in der Regel ohne Punkt endet – es sei denn, sie ist ein
  vollständiger Satz.
- der initiale Zustand (ausgewählt/nicht ausgewählt) nachvollziehbar und
  sinnvoll gewählt ist.
- das An- und Abhaken eines CheckboxButtons keinen anderen CheckboxButton
  verändert.
- bei mehreren CheckboxBUttons die Reihenfolge logisch und nachvollziehbar ist
  (siehe [CheckboxGroup](/04-components/form-controls/checkbox-group/overview)).

## Verwendung

Verwende einen CheckboxButton, um ...

- dem User die Auswahl einer oder mehrerer Optionen zu ermöglichen.
- einzelne Zustimmungen (z. B. AGBs) vom User einzuholen.

## CheckboxButton vs. Switch

Mit den Components CheckboxButton und
[Switch](/04-components/form-controls/switch/overview) können Optionen
aktiviert/ausgewählt werden. Um die Unterschiede klarer zu machen, hier einige
hilfreiche Anhaltspunkte.

  

- dem User eine Auswahloption zur Bestätigung zu geben.
    - Auswahlmöglichkeiten in einem Formular anzubieten, die gespeichert werden müssen.

  

- eine Funktion direkt zu aktivieren oder zu deaktivieren.
    - eine Einstellung sofort zu ändern, ohne sie separat speichern zu müssen.