Componenten / Basis / Formulier

Selectievakje

Eén of meer keuzes aan of uit. Eigen vinkje, native input eronder.

BasisFormulier3 instellingencheckbox

Voorbeeld

Instellingen

Laden…

<label class="gx-check">
  <input type="checkbox" checked>
  <span class="gx-check__box" aria-hidden="true">
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M5 12.5l4.5 4.5L19 7"/>
    </svg>
  </span>
  <span>Ik ga akkoord met de voorwaarden</span>
</label>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

Sleutel	Instelling	Waarden	Standaard
`checked`	Aangevinkt	aan / uit	`true`
`disabled`	Uitgeschakeld	aan / uit	`false`
`label`	Label	tekst	`Ik ga akkoord met de voorwaarden`

Richtlijnen

Toegankelijkheid

Het hele label is klikbaar.
Zichtbare focus op het vakje.

Wel

Positief formuleren.

Niet

Vooraf aangevinkte toestemming (AVG).

Verwant

TekstveldInvoerveld met zichtbaar label, hulptekst en foutmelding direct onder het veld.

TekstvakMeerregelige invoer die meegroeit met de inhoud (field-sizing waar de browser het kent).

KeuzelijstNative select met eigen pijl: werkt overal, ook met toetsenbord en op mobiel.

KeuzerondjesEén keuze uit een kleine groep, gegroepeerd in een fieldset met legend.