Componenten / Basis / Formulier

Keuzelijst

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

BasisFormulier3 instellingenselect

Voorbeeld

Instellingen

Laden…

<div class="gx-field">
  <label class="gx-label" for="f-sel">Onderwerp</label>
  <div class="gx-select">
    <select class="gx-input" id="f-sel" name="topic">
      <option>Website</option>
      <option>Brandbook</option>
      <option>Event</option>
      <option>Productie</option>
    </select>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6 9l6 6 6-6"/>
    </svg>
  </div>
</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
`state`	Status	`default` `error` `disabled`	`default`
`help`	Hulptekst	aan / uit	`false`
`label`	Label	tekst	`Onderwerp`

Richtlijnen

Toegankelijkheid

Native element: toegankelijk zonder extra code.

Wel

Bij meer dan 5 opties.

Niet

Bij 2 of 3 opties: gebruik keuzerondjes.

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).

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.