Gecombineerde velden

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Groepeer de gewenste velden en voeg de class combined-field.

Suggesties:

  1. Gecombineerde velden worden vaak gebruikt met icoonknoppen. Voor meer informatie zie: Icoonknoppen.

Voorbeelden

Invoerveld met icoonknop

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
<div>
<label for="voorbeeld-1-date-1-start">Ipsum</label>
<div class="combined-field">
  <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start" type="text">
  <button class="icon icon-cat">Cat</button>
</div>
</div>
<button type="submit">Verzend</button>
</form>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/form-base";
@use "@minvws/manon/form-combined-field";

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.

Bijbehorende elementen: