Radio-selecteerknop - radio

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>Examples</legend>
          <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>
    </fieldset>
</form>

Verplicht

HTML-voorbeeld:

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

Uitgeschakeld

HTML-voorbeeld:

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

Lijst

HTML-voorbeeld:

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

        <div class="radio">
            <input type="radio" id="radio-example-list-2" name="standaard-radio">
            <label for="radio-example-list-2">Lorem ipsum dolor sit amet</label>
        </div>

        <div class="radio">
            <input type="radio" id="radio-example-list-3" name="standaard-radio">
            <label for="radio-example-list-3">Lorem ipsum dolor sit amet</label>
        </div>

        <div class="radio">
            <input type="radio" id="radio-example-list-4" name="standaard-radio">
            <label for="radio-example-list-4">Lorem ipsum dolor sit amet</label>
        </div>
    </fieldset>
</form>

Lijst met "label"

HTML-voorbeeld:

<form action="" method="post">
    <fieldset>
        <legend>Examples</legend>
        <fieldset>
            <legend>List label</legend>
            <div class="radio">
                <input type="radio" id="radio-example-list-label-1" name="standaard-radio">
                <label for="radio-example-list-label-1">Lorem ipsum dolor sit amet</label>
            </div>

            <div class="radio">
                <input type="radio" id="radio-example-list-label-2" name="standaard-radio">
                <label for="radio-example-list-label-2">Lorem ipsum dolor sit amet</label>
            </div>

            <div class="radio">
                <input type="radio" id="radio-example-list-label-3" name="standaard-radio">
                <label for="radio-example-list-label-3">Lorem ipsum dolor sit amet</label>
            </div>

            <div class="radio">
                <input type="radio" id="radio-example-list-label-4" name="standaard-radio">
                <label for="radio-example-list-label-4">Lorem ipsum dolor sit amet</label>
            </div>
        </fieldset>
    </fieldset>
</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-fieldset-radio";

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 {
    /* radio */
    --fieldset-radio-input-margin-top: ;

    /* Box */
    --fieldset-radio-width: ;
    --fieldset-radio-height: ;
    --fieldset-radio-accent-color: ;

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

    /* Required */
    --fieldset-radio-required-margin-bottom: ;
}