<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false">
<span class="sr-only">Menu</span>
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<a class="navbar-brand" href="/">
<span class="sr-only">Hoofdpagina</span>
<div class="navbar-brand-container">
<img src="/v3/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
<img src="/v3/img/beeldmerkwit.svg" class="logo" aria-hidden="true" alt="">
</div>
</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a href="#section-1" class="nav-link">Menu 1</a>
</li>
<li class="nav-item">
<a href="#section-2" class="nav-link">Menu 2</a>
</li>
<li class="nav-item">
<a href="#section-3" class="nav-link">Menu 3</a>
</li>
<li class="nav-item">
<a href="#section-4" class="nav-link">Menu 4</a>
</li>
</ul>
</div>
<div class="navbar__search">
<button class="navbar__search-button" id="navbar-open-search">
<span class="sr-only">Open zoekveld</span><span class="mdi mdi-magnify" aria-hidden="true"></span>
</button>
<form class="autocomplete autocomplete__form" method="GET" action="https://www.nijmegen.nl" role="search">
<input class="autocomplete__input form-control" type="text" placeholder="Zoeken" id="suggest-search-query" name="q" autocomplete="off" aria-controls="autocomplete-results" aria-autocomplete="both" aria-label="Zoekveld" aria-describedby="autocomplete-help-text"
/>
<button class="autocomplete__search-button" aria-label="Zoekknop">
<span class="mdi mdi-magnify" aria-hidden="true"></span>
</button>
<button class="autocomplete__clear-button autocomplete__button--hide" aria-label="Invoer wissen" title="Invoer wissen">
<span class="mdi mdi-close" aria-hidden="true"></span>
</button>
<ul id="autocomplete-results" class="autocomplete__result-list" aria-label="Zoekresultaten" role="listbox">
</ul>
<span id="autocomplete-help-text" class="sr-only">
Als er zoekresultaten gevonden zijn kunt u de pijltjes toetsen omhoog en naar beneden gebruiken om een resultaat
te selecteren. Toets enter om te navigeren naar het geselecteerde resultaat. Met de escape toets kunt u de
invoer wissen.</span>
<div id="autocomplete-search-results-announcer" aria-live="assertive" class="sr-only"></div>
</form>
<script id="autocomplete-result-template" type="text/template">
<li class="autocomplete__result-item" role="option">
<a href="" class="autocomplete__result-link" id="" tabindex="-1"></a>
</li>
</script>
<script id="autocomplete-section-header-template" type="text/template">
<li class="autocomplete__section-header" aria-hidden="true">
</li>
</script>
<button class="navbar__search-close-button" id="navbar-close-search" aria-label="Sluit zoekveld">
sluiten
</button>
</div>
</div>
</nav>
<main>
<div class="container forminputs">
<form>
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-info">
Button label
</button>
<button type="button" class="btn btn-info" disabled>
Button disabled
</button>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-primary">
Button label
</button>
<button type="button" class="btn btn-primary" disabled>
Button disabled
</button>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-secondary">
Button label
</button>
<button type="button" class="btn btn-secondary" disabled>
Button disabled
</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="md-form">
<div class="date-picker">
<label for="date-picker-example-input">Date picker</label>
<span class="sr-only" id="date-picker-example-instruction">
Geef een datum op in het volgende formaat: dag/maand/jaar. Bijvoorbeeld: 30/05/2010.
</span>
<input placeholder="dag/maand/jaar" type="text" id="date-picker-example-input" class="form-control date-picker-input" aria-describedby="date-picker-example-instruction">
<button class="date-picker-button" aria-hidden="true" tabindex="-1">
<span class="mdi mdi-calendar" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialChecked" checked aria-checked="true">
<label class="form-check-label" for="materialChecked">Voorbeeld checkbox</label>
</div>
</div>
</div>
<div class="row input">
<div class="col-12">
<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>
</div>
</div>
<div class="row">
<div class="col-12">
<form class="file-form" action="#">
<div class="multiple-upload">
<div class="example-output"></div>
<input id="file-upload-1" name="file-upload-1" type="file" multiple aria-labelledby="file-button-1">
<button id="file-button-1" type="button" class="btn btn-secondary">
Bijlagen toevoegen
</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="md-form">
<textarea id="input-example" class="form-control md-textarea" placeholder="Placeholder"></textarea>
<label for="input-example">Basic textarea</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="md-form">
<div class="aria-select">
<button aria-haspopup="true" aria-controls="example-select-list" aria-labelledby="example-select-button example-select-label" id="example-select-button">
Selecteer een optie
</button>
<label id="example-select-label" for="example-select-button">Voorbeeld dropdown</label>
<ul tabindex="-1" role="listbox" aria-labelledby="example-select-element" class="aria-select-list hidden" id="example-select-list">
<li id="example-select-element_1" data-value="1" role="option" aria-selected="false">
Optie 1
</li>
<li id="example-select-element_2" data-value="2" role="option" aria-selected="false">
Optie 2
</li>
<li id="example-select-element_3" data-value="3" role="option" aria-selected="false">
Optie 3
</li>
</ul>
<input type="hidden" id="example-select-element" name="example-select-element">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<label class="check-switch" for="switch_1">
Switch 1:
<span class="switch-true">Ja</span>
<input id="switch_1" data-check-switch="" role="switch" type="checkbox" aria-checked="false">
<span class="switch-toggle" aria-hidden="true"></span>
<span class="switch-false">Nee</span>
</label>
<label class="check-switch" for="switch_2">
Switch 2:
<span class="switch-true">Ja</span>
<input id="switch_2" data-check-switch="" role="switch" type="checkbox" aria-checked="false">
<span class="switch-toggle" aria-hidden="true"></span>
<span class="switch-false">Nee</span>
</label>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="md-form">
<div class="time-picker">
<input placeholder="uu:mm" type="text" id="time-picker-example-input" class="form-control time-picker-input" />
<input type="hidden" class="time-picker-input-hidden" />
<label for="time-picker-example-input">Time picker (uu:mm)</label>
<button class="time-picker-button" aria-hidden="true" tabindex="-1">
<i class="mdi mdi-timer" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</main>
<footer class="page-footer">
<div class="footer-content">
<div class="container">
<div class="row">
<div class="hidden-md-down col-lg-6">
<!-- Space for other content/links -->
</div>
<div class="col-md-12 col-lg-6">
<div class="row">
<div class="hidden-md-down col-lg-5">
<h2 class="title">Over deze site</h2>
<ul class="link-list">
<li><a href="https://www.nijmegen.nl/toegankelijkheid/">Toegankelijkheid</a></li>
<li><a href="https://www.nijmegen.nl/privacyverklaring/">Privacyverklaring</a></li>
<li><a href="https://www.nijmegen.nl/cookies/">Cookies</a></li>
<li><a href="https://www.nijmegen.nl/proclaimer/">Proclaimer</a></li>
<li><a href="https://www.nijmegen.nl/sitemap/">Sitemap</a></li>
</ul>
</div>
<div class="col-xs-12 col-md-6 col-lg-7">
<h2 class="title">Contactgegevens</h2>
<ul class="link-list contact-list">
<li>
<span class="mdi mdi-map-marker" aria-hidden="true"></span>
<span class="sr-only">Bekijk onze locatie:</span>
<a href="https://www.google.nl/maps/place/...">
Stadswinkel, Mariënburg 30
</a>
</li>
<li>
<span class="mdi mdi-phone" aria-hidden="true"></span>
<span class="sr-only">Bel ons:</span>
<a href="tel:14024">
14 024
</a>
</li>
<li>
<span class="mdi mdi-email" aria-hidden="true"></span>
<span class="sr-only">Mail ons:</span>
<a href="mailto:gemeente@nijmegen.nl">
gemeente@nijmegen.nl
</a>
</li>
<li>
<span class="mdi mdi-facebook-box" aria-hidden="true"></span>
<span class="sr-only">Vind ons op facebook:</span>
<a href="https://www.facebook.com/gemeentenijmegen">
Gemeente Nijmegen
</a>
</li>
<li>
<span class="mdi mdi-twitter-box" aria-hidden="true"></span>
<span class="sr-only">Volg ons op Twitter:</span>
<a href="https://twitter.com/gem_nijmegen">
@nijmegen
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright text-center">
<div class="container-fluid">
<img src="/v3/img/beeldmerkwit.svg" height="32" width="25" class="logo-labeled" alt="Logo Gemeente Nijmegen"> Gemeente Nijmegen
</div>
</div>
</footer>
A custom template created for Nijmegen to showcase various form input components from this library in one overall view.