Zum Hauptinhalt springen

Kontrollkästchen

Kontrollkästchen in Storybook
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponenten Checkbox und CheckboxGroup verwenden können.

Einfaches Kontrollkästchen​

Die Komponente Checkbox kann allein, außerhalb des CheckboxGroup-Kontexts verwendet werden.

<Checkbox label="This is a single checkbox" />

Einfache Kontrollkästchen in einer Kontrollkästchengruppe​

Die Komponente CheckboxGroup dient als Container für eine Gruppe von Checkbox-Elementen. Die Beschriftung kann wahlweise ein- oder ausgeblendet werden, ist aber für die Barrierefreiheit der Komponente zwingend erforderlich.

<CheckboxGroup label="This is a group">
  <Checkbox label="option 1" />
  <Checkbox label="option 2" />
</CheckboxGroup>

Gruppe ohne Beschriftung​

Sie können die Beschriftung der CheckboxGroup ausblenden, indem Sie die Eigenschaft hideLabel auf true setzen. Dies hat keine Auswirkungen auf die anderen Verhaltensweisen des CheckboxGroup-Elements.

<CheckboxGroup
  label="This is only for aria-label"
  hideLabel={true}>
  <Checkbox label="option 1" />
  <Checkbox label="option 2" />
</CheckboxGroup>

Horizontale Gruppe​

CheckboxGroup ermöglicht die Anzeige von Optionen in horizontaler Anordnung, indem die Eigenschaft horizontal auf true festgelegt wird.

<CheckboxGroup
  label="This is an horizontal group"
  horizontal={true}>
  <Checkbox label="option 1" />
  <Checkbox label="option 2" />
</CheckboxGroup>

Kontrollkästchen- und Kontrollkästchengruppe-Meldungen​

Mit beiden Komponenten können Entwickler Fehlermeldungen anzeigen. Bei Einstellung auf der CheckboxGroup-Ebene werden Fehler unter allen Optionen angezeigt. Wenn sie jedoch auf der Checkbox-Ebene innerhalb einer CheckboxGroup eingestellt ist, wird die Meldung ignoriert und hat keine Auswirkungen.

  export function CheckboxMessages() {
    const [validationMessages, setValidationMessages] = useState({});
    const [groupValidationMessages, setGroupValidationMessages] = useState({});

    const onChange = useCallback((e, newChecked) => {
      setValidationMessages({});
      setGroupValidationMessages({});

      if (newChecked) {
        setValidationMessages({ error: ['This is ignored'] });
        setGroupValidationMessages({ error: ['Only second checkbox can be marked'] });
      }
    }, []);

    return (
      <CheckboxGroup
        label="Do not select the forbidden option"
        stateMessages={groupValidationMessages}
      >
        <Checkbox
          label="Forbidden option"
          onChange={onChange}
          stateMessages={validationMessages}
        />
        <Checkbox label="You can select this one" />
      </CheckboxGroup>
    );
  }
}

Unbestimmter Zustand​

Obwohl dies nicht als Teil der Checkbox implementiert ist, ist das native Verhalten eines HTML-Eingabeelements verfügbar. In diesem Fall kann der unbestimmte Zustand programmgesteuert über JavaScript festgelegt werden. Ein Kontrollkästchen im unbestimmten Zustand weist eine horizontale Linie anstelle eines Häkchens auf. Im folgenden Beispiel wird der Stil geändert, um die Option sichtbar zu machen.

export function SetIndeterminateState() {
  const onChange = useCallback((e, newCheck) => {
    (document.getElementById('checkbox2') as HTMLInputElement).indeterminate =
      newCheck;
  }, []);

  const style = { opacity: 100 };

  return (
    <CheckboxGroup label="Group of checkboxes">
      <Checkbox
        label="Set the next checkbox as 'indeterminate'"
        onChange={onChange}
      />
      <Checkbox
        label="This is another checkbox"
        id="checkbox2"
        checked={false}
        style={style}
      />
    </CheckboxGroup>
  );
}