Nijmegen Component Library
You are viewing version 3 of the library, the latest version is

Input 

<div>
    <h1>Invoer normaal</h1>
    <div class="md-form">
        <label for="input-example1">E-mailadres</label>
        <input type="text" id="input-example1" class="form-control" placeholder="e-mail">
        <div class="invalid-feedback">
            <span class="sr-only">Invoer onjuist: </span>Het e-mailadres is onjuist
        </div>
        <div class="valid-feedback">
            <span class="sr-only">Invoer juist: </span>Het e-mailadres is juist
        </div>
    </div>
</div>

<div>
    <h1>Invoer juist</h1>
    <div class="md-form">
        <label for="input-example2">E-mailadres</label>
        <input type="text" id="input-example2" class="form-control is-valid" placeholder="e-mail" value="juist@email.nl">
        <div class="invalid-feedback">
            <span class="sr-only">Invoer onjuist: </span>Het e-mailadres is onjuist
        </div>
        <div class="valid-feedback">
            <span class="sr-only">Invoer juist: </span>Het e-mailadres is juist
        </div>
    </div>
</div>

<div>
    <h1>Invoer onjuist</h1>
    <div class="md-form">
        <label for="input-example3">E-mailadres</label>
        <input type="text" id="input-example3" class="form-control is-invalid" placeholder="e-mail" value="dit-is-geen-e-mail">
        <div class="invalid-feedback">
            <span class="sr-only">Invoer onjuist: </span>Het e-mailadres is onjuist
        </div>
        <div class="valid-feedback">
            <span class="sr-only">Invoer juist: </span>Het e-mailadres is juist
        </div>
    </div>
</div>

<div>
    <h1>Invoer inactief</h1>
    <div class="md-form">
        <label for="input-example4">E-mailadres</label>
        <input type="text" id="input-example4" class="form-control" placeholder="e-mail" disabled>
        <div class="invalid-feedback">
            <span class="sr-only">Invoer onjuist: </span>Het e-mailadres is onjuist
        </div>
        <div class="valid-feedback">
            <span class="sr-only">Invoer juist: </span>Het e-mailadres is juist
        </div>
    </div>
</div>

Input Error

Based on the version from MDB:
https://mdbootstrap.com/components/inputs/

Using

No additional actions, aside from the markup, are needed to use this component.

Notes

  • It’s best practice to have an input element accompanied with a label element which are connected via the for attribute on the label element and the corresponding id on the input element
  • The error state is defined by the is-invalid class on the input element
  • The success state is defined by the is-valid class on the input element
  • The valid-feedback and invalid-feedback divs can be omitted. Leaving out the invalid-feedback is discouraged because a screen reader user doesn’t see the red line beneath the input when the input is invalid.