Wachtwoord

Introductie

Een wachtwoordinvoerveld stelt de gebruiker in staat een geheim wachtwoord in te voeren, waarbij de tekst meestal wordt verborgen om privacy en veiligheid te waarborgen. Dit is essentieel bij formulieren die persoonlijke of gevoelige informatie verwerken.

Snelstart

SCSS importeren:

    
    @use "@minvws/manon/components/form";
@use "@minvws/manon/components/form-input";

Aandachtspunten

Vertel de gebruiker welke eisen er gesteld zijn. Dit kan met een notificatie of met een openklapbare hulptekst. Voor meer informatie zie: toelichting - paragraaf en hulpteksten.

Om berichten visueel te koppelen aan een inputveld kunnen de <input> en het bericht gegroepeerd worden binnen een <div>.

Voorbeelden

    
    <form action="" method="post">
    <div>
        <label for="input-password-1">Wachtwoord</label>
        <p class="explanation" id="input-password-1-message">
            <span class="notification-type">
                <span class="icon icon-informative" aria-hidden="true"></span>
                Aandachtspunten
            </span>
            Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter,
            1 kleine letter en 1 cijfer.
        </p>
        <input
        id="input-password-1"
        name="input-password-1"
        pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
        type="password"
        aria-describedby="input-password-1-message"
        />
    </div>
    <button type="submit">Verzend</button>
</form>