Accentkleur op formulierelementen

Introductie

Voor het toevoegen van een accentknop op formulier-elementen zoals checkboxes, radio buttons, ranges etc.

Snelstart

    
    @use "@minvws/manon/components/form-accent-color";

Waarschuwing Dit element maakt gebruik van een nieuw CSS component. Moderne browsers geven aan dit element te ondersteunen. Het kan zijn dat de weergave in oude browsers anders zal zijn. Voor meer informatie zie: caniuse.com.

Voorbeelden

Voorbeeld: Selectievak - checkbox

    
    <form action="" method="post">
  <div class="checkbox">
    <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox" />
    <label for="checkbox-example-base">Lorem ipsum dolor sit amet</label>
  </div>
</form>

Voorbeeld: Radioselectieknop - radio

    
    <form action="" method="post">
  <div class="radio">
    <input type="radio" id="radio-example-base" name="standaard-radio" checked />
    <label for="radio-example-base">Lorem ipsum dolor sit amet</label>
  </div>
</form>

Voorbeeld: Voortgangsbalk

42%
    
    <form action="" method="post">
  <div class="horizontal">
    <label
      for="progress-example"
      role="progressbar"
      aria-busy="true"
      aria-labelledby="progess-example"
      >Progress:</label
    >
    <progress id="progress-example" value="42" max="100">42%</progress>
  </div>
</form>

Voorbeeld: Bereik - range

    
    <form action="" method="post">
  <div class="horizontal">
    <label for="range-example">Range</label>
    <input type="range" id="range-example" name="range-example" min="0" max="100" />
  </div>
</form>