Radio-selecteerknop - radio-button

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 bijbehorende HTML toe. Voor meer informatie zie Voorbeelden.

Voorbeelden

Basis

Visueel voorbeeld:

HTML-voorbeeld:

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

Verplicht

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="required">
    <span class="nota-bene">Dit veld is verplicht</span>
    <div class="required">
      <input type="radio" id="radio-button-example-required-1" name="voorwaarden" required>
      <label for="radio-button-example-required-1">verplicht Radio-selecteerknop</label>
    </div>
  </div>
</form>

Uitgeschakeld

Visueel voorbeeld:

HTML-voorbeeld:

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

Bijbehorende bestanden

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

Aandachtspunten:

• De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie.

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/radio";
@use "@minvws/manon/form-radio";

Instelbare variabelen

Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in combinatie met de class horizotal-view.

CSS

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

:root {
  /* Radio button */
  --radio-gap: ;
  --radio-align-items: ;

  /* Circle */
  --radio-width: ;
  --radio-height: ;
  --radio-accent-color: ;

  /* Label */
  --radio-label-width: ;

  /* Required */
  --radio-required-gap: ;
}

Gerelateerde pagina's