Web Component preview

default

Email

Er is een type="email" beschikbaar die helpt bij het automatisch valideren van een veld.

Datum

Voor een date picker maken we gebruik van een custom element en niet van input type="date"

Datum invalid

Voor een date picker maken we gebruik van een custom element en niet van input type="date"

Vul de datum in met de juiste notatie (dd-mm-jjjj).

Wachtwoord

Er is een type="password" beschikbaar die het ingevoerde wachtwoord maskeert met bullets.

URL

Er is een type="url" beschikbaar. Afhankelijk van de browserondersteuning kan het url veld automatisch worden gevalideerd wanneer het wordt verzonden. Sommige smartphones herkennen het url type en voegen ".com" toe aan het toetsenbord om overeen te komen met de url-invoer..

Tel

Er is een type="tel" beschikbaarvoor het bewerken van een regel met één regel voor het invoeren van een telefoonnummer.

Ongeldig

Indien een input ongeldig is, dient er een .dso-invalid class gezet te worden op de div met de class .dso-input.

Vul dit veld in.

Bijvoorbeeld: email@email.nl

Ongeldig - Foutieve invoer

Indien een input ongeldig is, dient er een .dso-invalid class gezet te worden op de div met de class .dso-input.

Ongeldig e-mailadres ingevuld.

Bijvoorbeeld: email@email.nl

Geldig

Indien een input ongeldig was en valide wordt gemaakt, dient de .dso-invalid class vervangen te worden door de class .dso-valid.

Bijvoorbeeld: email@email.nl

Placeholder

Met icoon

Disabled

Readonly

Infobutton

Toelichting ingeklapt

Infobutton uitgeklapt

Toelichting uitgeklapt

Toelichting bij vraag: "E-mailadres"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.

Toelichting bij vraag: "E-mailadres" - BINNENKORT DEPRECATED

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.

Markup component preview

default

Email

Er is een type="email" beschikbaar die helpt bij het automatisch valideren van een veld.

Datum

Voor een date picker maken we gebruik van een custom element en niet van input type="date"

Datum invalid

Voor een date picker maken we gebruik van een custom element en niet van input type="date"

Vul de datum in met de juiste notatie (dd-mm-jjjj).

Wachtwoord

Er is een type="password" beschikbaar die het ingevoerde wachtwoord maskeert met bullets.

URL

Er is een type="url" beschikbaar. Afhankelijk van de browserondersteuning kan het url veld automatisch worden gevalideerd wanneer het wordt verzonden. Sommige smartphones herkennen het url type en voegen ".com" toe aan het toetsenbord om overeen te komen met de url-invoer..

Tel

Er is een type="tel" beschikbaarvoor het bewerken van een regel met één regel voor het invoeren van een telefoonnummer.

Ongeldig

Indien een input ongeldig is, dient er een .dso-invalid class gezet te worden op de div met de class .dso-input.

Vul dit veld in.

Bijvoorbeeld: email@email.nl

Ongeldig - Foutieve invoer

Indien een input ongeldig is, dient er een .dso-invalid class gezet te worden op de div met de class .dso-input.

Ongeldig e-mailadres ingevuld.

Bijvoorbeeld: email@email.nl

Geldig

Indien een input ongeldig was en valide wordt gemaakt, dient de .dso-invalid class vervangen te worden door de class .dso-valid.

Bijvoorbeeld: email@email.nl

Placeholder

Met icoon

Disabled

Readonly

Infobutton

Toelichting ingeklapt

Infobutton uitgeklapt

Toelichting uitgeklapt

Toelichting bij vraag: "E-mailadres"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.

Toelichting bij vraag: "E-mailadres" - BINNENKORT DEPRECATED

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.