Checkbox (kontrollkästchen)
Kontrollkästchen ermöglichen dem Benutzer die Auswahl eines oder mehrerer Elemente aus einem Satz.
Kontrollkästchen können eine Option aus- oder anschalten.
Wenn in einer Liste mehrere Optionen erscheinen, können Sie durch Kontrollkästchen die Abstände erhalten statt Ein- / Aus - Schalter zu verwenden. Wenn Sie nur eine Option haben, vermeiden Sie die Verwendung eines Kontrollkästchens und verwenden Sie stattdessen einen Ein- / Ausschalter.
Basic checkboxes
Checkbox with FormControlLabel
Checkbox can be provided with a label thanks to the FormControlLabel component.
Kontrollkästchen mit FormGroup
FormGroup ist ein hilfreicher Wrapper zum Gruppieren von Auswahlsteuerungskomponenten, welcher eine einfachere API bietet.
Angepasstes Kontrollkästchen
Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der Überschreibungsdokumentationsseite.
When to use
Barrierefreiheit
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)
- Alle Formularsteuerelemente sollten Beschriftungen haben. Dazu gehören Optionsfelder, Kontrollkästchen und Schalter. In den meisten Fällen wird dazu das Element
<label>(FormControlLabel) verwendet. - Wenn ein Label nicht verwendet werden kann, muss der Eingabekomponente ein Attribut direkt hinzugefügt werden. In diesem Fall können Sie das zusätzliche Attribut (z. B.
aria-label,aria-labelby,title) über die EigenschaftinputPropsanwenden.
<Checkbox
value="checkedA"
inputProps={{ 'aria-label': 'Checkbox A' }}
/>