Componenten / Basis / Formulier

Tekstveld

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

BasisFormulier5 instellingeninput

Voorbeeld

Instellingen

Laden…

<div class="gx-field">
  <label class="gx-label" for="f-text">E-mailadres 
    <span class="gx-req" aria-hidden="true">*</span>
  </label>
  <input class="gx-input" id="f-text" name="text" type="text" autocomplete="name" required aria-describedby="f-text-msg">
  <p class="gx-hint" id="f-text-msg">Hulptekst onder het veld.</p>
</div>

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
`type`	Type	`text` `email` `tel` `password` `search` `date`	`text`
`state`	Status	`default` `error` `disabled`	`default`
`help`	Hulptekst	aan / uit	`true`
`required`	Verplicht	aan / uit	`true`
`label`	Label	tekst	`E-mailadres`

Richtlijnen

Toegankelijkheid

Altijd een zichtbaar label (nooit alleen placeholder).
Juiste type, autocomplete en inputmode.
Fout via aria-invalid en aria-describedby, naast het veld.

Wel

Foutmelding zegt hoe het goed moet.

Niet

Rode kleur als enige foutsignaal.

Verwant

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.

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

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