Fieldset

Introductie

Met een fieldset kun je in HTML velden groeperen die bij elkaar horen. Daar hoort meestal een legend (titel) bij, die belangrijk is voor de toegankelijkheid.

Snelstart

    
      
    
    @use "@minvws/manon/components/fieldset";
  

Voorbeelden

Voorbeeld: Basis

Titel

Voorbeeld invoerveld

Verzend

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

Horizontaal uitgelijnd

Titel

Voorbeeld invoerveld

Verzend

    
      
    
    <form action="" method="post" class="horizontal">
  <fieldset>
    <legend>Titel</legend>
    <div>
      <label for="example-input-base">Voorbeeld invoerveld</label>
      <input id="example-input-base" name="example-input-base" type="text" />
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>