Formular: Checkbox

Via Checkbox können Nutzer*innen ein oder mehrere Elemente aus einer Liste einzelner oder gruppierter Elemente auswählen. Im Gegensatz zum Pattern Radio, wo sich die Optionen gegenseitig ausschließen, ist bei Checkboxen eine Mehrfachauswahl möglich.

Varianten

Formular: Checkbox

Vorschau

Ich bestätige, dass der angegebene Nebenwohnsitz in einer der oben angeführten Flächenwidmungen liegt.

Code

<div>
  <input type="checkbox" id="wm-form-item-baind" value="auswahl0">
  <label for="wm-form-item-baind">
    Ich bestätige, dass der angegebene Nebenwohnsitz in einer der oben angeführten Flächenwidmungen liegt.
  </label>
</div>

Formular: Checkbox-Gruppe

Vorschau

Art des Einkommens

Pension/Rente

Studienbeihilfe

Unterhalt/Alimente

Sonstige Einkommen

Code

<fieldset>
  <legend>Art des Einkommens</legend>
  <div>
    <input type="checkbox" id="wm-form-item-tviwv-0" value="1" name="format" />
    <label for="wm-form-item-tviwv-0"> Pension/Rente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-1" value="2" name="format" />
    <label for="wm-form-item-tviwv-1"> Studienbeihilfe </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-2" value="3" name="format" />
    <label for="wm-form-item-tviwv-2"> Unterhalt/Alimente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-3" value="4" name="format" />
    <label for="wm-form-item-tviwv-3"> Sonstige Einkommen </label>
  </div>
</fieldset>

Dev

Interaktive Demo

legend

values

labels

error

hint

requiredText

required

hideAsterisk

Vorschau

Code

<wm-checkbox data-demo-pattern="wm-checkbox-preview" legend="Art des Einkommens" labels="Pension/Rente;Studienbeihilfe;Unterhalt/Alimente;Sonstige Einkommen" values="1;2;3;4" name="format"></wm-checkbox>

Weitere Beispiele

Alle Formularelemente können nativ in HTML abgebildet werden. Aufgrund der mangelnden Abhängigkeit von JavaScript ist das auch der bevorzugte Weg. Wird erweiterte Funktionalität wie clientseitige Validierung, Ein- und Ausblenden von Passwörtern, Anzeigen der maximalen Zeichenanzahl et cetera benötigt, müssen Sie alternativ die Webcomponent-Variante verwenden.

HTML

Formular: Checkbox-Gruppe mit einfacher Beschreibung

Vorschau

Art des Einkommens

Wählen Sie die Art Ihres Einkommens

Pension/Rente

Studienbeihilfe

Unterhalt/Alimente

Sonstige Einkommen

Code

<div>
<fieldset aria-describedby="desc1">
  <legend>Art des Einkommens</legend>
  <div class="wm-forms-message" id="desc1">Wählen Sie die Art Ihres Einkommens</div>
  <div>
    <input type="checkbox" id="wm-form-item-tviwv-0" value="1" name="format" />
    <label for="wm-form-item-tviwv-0"> Pension/Rente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-1" value="2" name="format" />
    <label for="wm-form-item-tviwv-1"> Studienbeihilfe </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-2" value="3" name="format" />
    <label for="wm-form-item-tviwv-2"> Unterhalt/Alimente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-3" value="4" name="format" />
    <label for="wm-form-item-tviwv-3"> Sonstige Einkommen </label>
  </div>
</fieldset>
</div>

Formular: Checkbox-Gruppe mit Beschreibung

Vorschau

Art des Einkommens

Wählen Sie die Art Ihres Einkommens

Pension/Rente

Studienbeihilfe

Unterhalt/Alimente

Sonstige Einkommen

Code

<div>
<fieldset aria-describedby="desc2">
  <legend>Art des Einkommens</legend>
  <wm-highlight color="flieder-light" id="desc2">
    Wählen Sie die Art Ihres Einkommens
  </wm-highlight>
  <div>
    <input type="checkbox" id="wm-form-item-tviwv-0" value="1" name="format" />
    <label for="wm-form-item-tviwv-0"> Pension/Rente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-1" value="2" name="format" />
    <label for="wm-form-item-tviwv-1"> Studienbeihilfe </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-2" value="3" name="format" />
    <label for="wm-form-item-tviwv-2"> Unterhalt/Alimente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-tviwv-3" value="4" name="format" />
    <label for="wm-form-item-tviwv-3"> Sonstige Einkommen </label>
  </div>
</fieldset>
</div>

Formular: Checkbox-Gruppe mit Fehlermeldung

Wenn zumindest eine Checkbox ausgewählt werden muss, kann eine Fehlermeldung für die gesamte Gruppe ausgegeben werden.

Vorschau

Art des Einkommens

Pension/Rente

Studienbeihilfe

Unterhalt/Alimente

Sonstige Einkommen

Wählen Sie zumindest eine Art des Einkommens.

Code

<div>
<fieldset aria-describedby="msg_auswahl4">
  <legend>Art des Einkommens</legend>
  <div>
    <input type="checkbox" id="wm-form-item-kbla-0" value="1" name="format2" aria-invalid="true" />
    <label for="wm-form-item-kbla-0"> Pension/Rente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-kbla-1" value="2" name="format2" />
    <label for="wm-form-item-kbla-1"> Studienbeihilfe </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-kbla-2" value="3" name="format2" />
    <label for="wm-form-item-kbla-2"> Unterhalt/Alimente </label>
  </div>

  <div>
    <input type="checkbox" id="wm-form-item-kbla-3" value="4" name="format2" />
    <label for="wm-form-item-kbla-3"> Sonstige Einkommen </label>
  </div>

  <div class="wm-forms-message" id="msg_auswahl4">Wählen Sie zumindest eine Art des Einkommens.</div>
</fieldset>
</div>

Webcomponent

Formular: Checkbox-Gruppe mit einfacher Beschreibung

Vorschau

Code

<wm-checkbox legend="Art des Einkommens" labels="Pension/Rente;Studienbeihilfe;Unterhalt/Alimente;Sonstige Einkommen" values="1;2;3;4" name="format" hint="Wählen Sie die Art Ihres Einkommens."></wm-checkbox>

Formular: Checkbox-Gruppe mit einfacher Beschreibung Disabled

Vorschau

Code

<wm-checkbox legend="Art des Einkommens" labels="Pension/Rente;Studienbeihilfe;Unterhalt/Alimente;Sonstige Einkommen" values="1;2;3;4" disabled="true;true;true;true" name="format" hint="Wählen Sie die Art Ihres Einkommens."></wm-checkbox>

Formular: Checkbox-Gruppe mit Beschreibung

Vorschau

Wählen Sie die Art Ihres Einkommens

Code

<wm-checkbox legend="Art des Einkommens" labels="Pension/Rente;Studienbeihilfe;Unterhalt/Alimente;Sonstige Einkommen" values="1;2;3;4" name="format">
  <wm-highlight color="wasserblau-light" slot="hint">
    Wählen Sie die Art Ihres Einkommens
  </wm-highlight>
</wm-checkbox>

Formular: Checkbox-Gruppe mit Fehlermeldung

Wenn zumindest eine Checkbox ausgewählt werden muss, kann eine Fehlermeldung für die gesamte Gruppe ausgegeben werden.

Vorschau

Code

<wm-checkbox legend="Art des Einkommens" labels="Pension/Rente;Studienbeihilfe;Unterhalt/Alimente;Sonstige Einkommen" values="1;2;3;4" name="format" required error="Wählen Sie zumindest eine Art des Einkommens.">

Formular: Checkbox

Vorschau

Code

<wm-checkbox labels="Ich bestätige, dass der angegebene Nebenwohnsitz in einer der oben angeführten Flächenwidmungen liegt." name="einzel" values="auswahl0"></wm-checkbox>

Formular: Checkbox-Gruppe mit JavaScript befüllt

Checkbox-Gruppen können auch dynamisch via JavaScript erzeugt werden.

Vorschau

Code

<wm-checkbox legend="Art des Einkommens" name="format" id="checkboxes"></wm-checkbox>

<script>
  const checkboxes = document.querySelector('#checkboxes');
  checkboxes.addEventListener('wm-defined', e => {
    checkboxes.setOptions([
      {
        text: "Pension/Rente",
        value: "1"
      },
      {
        text: "Studienbeihilfe",
        value: "2"
      },
      {
        text: "Unterhalt/Alimente",
        value: "3"
      },
      {
        text: "Sonstige Einkommen",
        value: "4"
      }
    ]);
  })
</script>

Formular: Checkbox Events (siehe Konsole)

Vorschau

Code

<wm-form>
  <form>
    <wm-checkbox legend="Art des Einkommens" labels="Pension/Rente;Studienbeihilfe;Unterhalt/Alimente;Sonstige Einkommen" values="1;2;3;4" name="format" id="checkboxes-event" required></wm-checkbox>

    <button>Send</button>
  </form>
</wm-form>
<script>
  const checkbox = document.querySelector('#checkboxes-event');
  checkbox.addEventListener('wm-input', e => {
    console.log(e.type)
    console.log(e.detail)
  })
  checkbox.addEventListener('wm-change', e => {
    console.log(e.type)
    console.log(e.detail)
  })
  checkbox.addEventListener('wm-invalid', e => {
    console.log(e.type)
    console.log(e.detail)
  })
</script>

Formular: Checkbox Disabled Attribute mit JavaScript getauscht (siehe Konsole)

Vorschau

Code

<wm-checkbox data-demo-pattern="wm-checkbox-preview" legend="Art des Einkommens" labels="Pension/Rente;Studienbeihilfe;Unterhalt/Alimente;Sonstige Einkommen" values="1;2;3;4" name="format" disabled="true;true;false;false" id="checkboxSwap"></wm-checkbox>

  <script>
    window.addEventListener('load', () => {
      const checkboxSwap = document.querySelector('#checkboxSwap');
      if (checkboxSwap) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const options = checkboxSwap.getOptions();
              setTimeout(() => {
                options.forEach(option => {
                  option.disabled = false;
                });
                checkboxSwap.setOptions(options);
                console.log(checkboxSwap.getOptions());
                observer.disconnect();
              }, 5000);
            }
          });
        });
        observer.observe(checkboxSwap);
      }
    });
  </script>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Checkbox/Checkbox.js" type="module"></script>

JavaScript

import { Checkbox } from './wienermelange/assets/js/components/Checkbox/Checkbox.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`errormessage`	Fehlermeldung bei ungültiger Eingabe Diese Meldung wird direkt am Checkbox-Element angezeigt, wenn es validiert wird und ungültig ist.	`String`	`""`
`summaryErrormessage`	Spezifische Fehlermeldung für die Fehlerübersicht Diese Meldung wird in der Fehlerübersicht (wm-formerrorsummary) anstelle der normalen Fehlermeldung angezeigt. Dies ist nützlich, um in der Übersicht kontextspezifischere Fehlermeldungen anzuzeigen, z.B. "Bitte stimmen Sie den AGB bei 'Nutzungsbedingungen' zu" statt nur "Bitte wählen Sie mindestens eine Option aus".	`String`	`""`
`hasError`	Gibt an, ob das Element einen Fehler hat Dies ist ein Statusattribut, das anzeigt, ob aktuell ein Validierungsfehler vorliegt. Es wird auf true gesetzt, wenn die Validierung fehlschlägt, und auf false, wenn die Validierung erfolgreich ist.	`Boolean`	`false`
`error`	Aktuelle Fehlermeldung	`String`	`""`
`showErrors`	Steuert die Anzeige von Fehlermeldungen Im Gegensatz zu 'hasError' steuert dieses Attribut, ob Fehlermeldungen angezeigt werden sollen. Wenn auf true gesetzt, werden Validierungsfehler sofort angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`Boolean`	`false`
`validate`	Aktiviert die Validierung bei Eingabe Wenn auf true gesetzt, werden Eingaben sofort validiert und Fehler angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`Boolean`	`false`
`info`	Zusätzliche Informationen zum Feld	`String`	leer
`_errorController`			`new ErrorStateController(this)`

Methoden

Eigenschaft	Optionen	Argumente
`_handleChange`
`checkValidity`	Override checkValidity to better handle error messages for the error summary	/
`showError`	Public method to show an error message	Error message to display (`string`)
`clearError`	Public method to clear error state	/
`_handleEvent`
`reset`		/
`formResetCallback`		/

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at