Fieldset - fieldset

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
2. Voeg de benodigde HTML toe. Voor meer informatie zie: Voorbeelden.

Voorbeelden

Visueel voorbeeld:

Basis

HTML-voorbeeld:

<form action="" method="post">
  <fieldset>
    <legend>Titel</legend>
    <label for="example-input-base">Voorbeeld invoerveld</label>
    <input
      id="example-input-base"
      name="example-input-base"
      type="text"
    />
  </fieldset>
  <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/fieldset";

Instelbare variabelen

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
  /* Fields within the fieldset */
  --form-fieldset-fields-margin-top: ;

  /* Legend */
  --form-fieldset-legend-font-weight: ;
  --form-fieldset-legend-margin-bottom: ;
}