Skip to content

Checkbox

Checkboxen ermöglichen es, auf einfache Weise zwischen verschiedenen Optionen zu wählen, charakteristisch ist, dass mehrere Elemente gleichzeitig ausgewählt werden können.

Pflichtfeld

Das <input> Element enthält ein required Attribut.

Titel Checkboxen

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel Checkboxen</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-1"
      id="checkbox-1"
      required
    />
    <label class="form-check-label" for="checkbox-1"
      >verpflichtende Auswahl</label
    >
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-1"
      id="checkbox-2"
      required
    />
    <label class="form-check-label" for="checkbox-2"
      >verpflichtende Auswahl</label
    >
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Optional

Titel Checkboxen

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel Checkboxen</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-2"
      id="checkbox-3"
    />
    <label class="form-check-label" for="checkbox-3">optionale Auswahl</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-2"
      id="checkbox-4"
    />
    <label class="form-check-label" for="checkbox-4">optionale Auswahl</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Checked

Das <input> Element enthält ein checked Attribut.

Titel Checkboxen

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel Checkboxen</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-3"
      id="checkbox-5"
      checked
    />
    <label class="form-check-label" for="checkbox-5"
      >vorselektierte Auswahl</label
    >
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-3"
      id="checkbox-6"
      checked
    />
    <label class="form-check-label" for="checkbox-6"
      >vorselektierte Auswahl</label
    >
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Disabled

Das <input> Element enthält ein disabled Attribut.

Titel Checkboxen

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel Checkboxen</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-4"
      id="checkbox-7"
      disabled
    />
    <label class="form-check-label" for="checkbox-7"
      >deaktivierte Auswahl</label
    >
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="checkbox"
      name="checkboxgroup-4"
      id="checkbox-8"
      disabled
    />
    <label class="form-check-label" for="checkbox-8"
      >deaktivierte Auswahl</label
    >
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Validierung

Titel Checkboxen

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung

Titel Checkboxen

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung