Selectievak - checkbox

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="checkbox">
          <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox">
          <label for="checkbox-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="checkbox">
              <input type="checkbox" id="checkbox-example-required-1" name="voorwaarden" required>
              <label for="checkbox-example-required-1">verplicht selectievak</label>
            </div>
        </div>
    </fieldset>
</form>

Uitgeschakeld

HTML-voorbeeld:

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

Lijst

HTML-voorbeeld:

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

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

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

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

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

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

            <div class="checkbox">
                <input type="checkbox" id="checkbox-example-list-label-4" name="standaard-checkbox">
                <label for="checkbox-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/checkbox";
@use "@minvws/manon/form-fieldset-checkbox";

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

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

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

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

Gerelateerde pagina's