<div class="form-group dso-select dso-invalid dso-required">
<div class="dso-label-container">
<label for="input-select-invalid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-invalid" class="form-control" required>
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-message">Dit veld is verplicht</p>
<p class="dso-help-block" id="helpTextId_input-select-invalid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
<div class="form-group dso-select{{#if multiple }} dso-multiple{{/if}}{{#if state}} dso-{{ state }}{{/if}}{{#if required }} dso-required{{/if}}">
<div class="dso-label-container">
<label for="{{ id }}" class="control-label">
{{ label }}
</label>
{{#if infoText }}
{{> '@form-field-info-button' }}
{{/if}}
</div>
<div class="dso-field-container">
<select id="{{ id }}" class="form-control"
{{{ifattr 'disabled' disabled }}}
{{{ifattr 'multiple' multiple }}}
{{{ifattr 'required' required }}}>
{{#each options }}
<optgroup label="{{ optionType }}"{{{ifattr ' disabled' disabled }}}>
{{#each items }}
<option value="{{ value }}"{{{ifattr ' selected' selected }}}>{{ label }}</option>
{{/each}}
</optgroup>
{{/each}}
</select>
{{#if errorText }}
{{> '@error-block' }}
{{/if}}
{{#if helpText }}
{{> '@help-block' }}
{{/if}}
</div>
{{#if infoOpen }}
{{> '@form-field-info' }}
{{/if}}
</div>
id: input-select-invalid
label: Kies uw beleg
options:
- optionType: Vlees
items:
- value: worst
label: Worst
- value: salami
label: Salami
- value: geit
label: Geit
- optionType: Vis
items:
- value: zalm
label: Zalm
- value: makreel
label: Makreel
__title: Ongeldig
__explanation:
- >-
Indien een select ongeldig is, dient er een <code>.dso-invalid</code> class
gezet te worden op de div met de class <code>.dso-select</code>.
required: true
helpText: Maak een keuze tussen vlees of vis
state: invalid
errorText: Dit veld is verplicht
- Handle: @group-select--input-select-invalid
- Variants (6): Default , Input Select Multiple , Input Select Invalid , Input Select Valid , Input Select Disabled , Input Select Infobutton Open
- Preview:
- Filesystem Path: components\03-forms\01-groups\group-select.hbs
- References (4): @form-field-info-button, @error-block, @help-block, @form-field-info
There are no notes for this item.
WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141
The heading structure is not logically nested. This h4 element appears to be the primary document heading, so should be an h1 element.
<h4>Heading 4</h4>
WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage
This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.
<label for="input-select" class="control-label">
Kies uw beleg
</label>
WARNING: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Select.Value
This select element does not have an initially selected option. Depending on your HTML version, the value exposed to an accessibility API may be undefined.
<select id="input-select" class="form-control">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2
Check that the title element describes the document.
<title>Group Select
NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107
Check that a change of context does not occur when this input field receives focus.
<select id="input-select" class="form-control">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85
If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.
<form class="form-horizontal">
<!-- Start: @group-select--default -->
<div class="form-group dso-select">
<div class="dso-label-container">
<label for="input-select" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select" class="form-control">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
<!-- End: @group-select--default --><hr>
<!-- Start: @group-select--input-select-multiple -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Multiple</h2>
<p>Indien een multiple select gewenst is, dient er een <code>.dso-multiple</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-multiple">
<div class="dso-label-container">
<label for="input-select-multiple" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-multiple" class="form-control" multiple="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-multiple">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-multiple --><hr>
<!-- Start: @group-select--input-select-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een select ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-invalid dso-required">
<div class="dso-label-container">
<label for="input-select-invalid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-invalid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-message">Dit veld is verplicht</p>
<p class="dso-help-block" id="helpTextId_input-select-invalid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-invalid --><hr>
<!-- Start: @group-select--input-select-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een select ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-valid dso-required">
<div class="dso-label-container">
<label for="input-select-valid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-valid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-valid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-valid --><hr>
<!-- Start: @group-select--input-select-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-disabled" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-disabled" class="form-control" disabled="" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-disabled --><hr>
<!-- Start: @group-select--input-select-infobutton-open -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Infobutton uitgeklapt</h2>
<p>Toelichting uitgeklapt</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-multiple-open" class="control-label">
Kies uw beleg
</label>
<button type="button" class="btn dso-field-info-button dso-open">
<span class="sr-only">
Toelichting
</span>
</button>
</div>
<div class="dso-field-container">
<select id="input-select-multiple-open" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
<div class="dso-field-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Heading 4</h4>
<p>
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.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-infobutton-open --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90
Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.
<form class="form-horizontal">
<!-- Start: @group-select--default -->
<div class="form-group dso-select">
<div class="dso-label-container">
<label for="input-select" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select" class="form-control">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
<!-- End: @group-select--default --><hr>
<!-- Start: @group-select--input-select-multiple -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Multiple</h2>
<p>Indien een multiple select gewenst is, dient er een <code>.dso-multiple</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-multiple">
<div class="dso-label-container">
<label for="input-select-multiple" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-multiple" class="form-control" multiple="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-multiple">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-multiple --><hr>
<!-- Start: @group-select--input-select-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een select ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-invalid dso-required">
<div class="dso-label-container">
<label for="input-select-invalid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-invalid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-message">Dit veld is verplicht</p>
<p class="dso-help-block" id="helpTextId_input-select-invalid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-invalid --><hr>
<!-- Start: @group-select--input-select-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een select ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-valid dso-required">
<div class="dso-label-container">
<label for="input-select-valid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-valid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-valid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-valid --><hr>
<!-- Start: @group-select--input-select-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-disabled" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-disabled" class="form-control" disabled="" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-disabled --><hr>
<!-- Start: @group-select--input-select-infobutton-open -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Infobutton uitgeklapt</h2>
<p>Toelichting uitgeklapt</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-multiple-open" class="control-label">
Kies uw beleg
</label>
<button type="button" class="btn dso-field-info-button dso-open">
<span class="sr-only">
Toelichting
</span>
</button>
</div>
<div class="dso-field-container">
<select id="input-select-multiple-open" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
<div class="dso-field-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Heading 4</h4>
<p>
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.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-infobutton-open --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177
Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.
<form class="form-horizontal">
<!-- Start: @group-select--default -->
<div class="form-group dso-select">
<div class="dso-label-container">
<label for="input-select" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select" class="form-control">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
<!-- End: @group-select--default --><hr>
<!-- Start: @group-select--input-select-multiple -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Multiple</h2>
<p>Indien een multiple select gewenst is, dient er een <code>.dso-multiple</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-multiple">
<div class="dso-label-container">
<label for="input-select-multiple" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-multiple" class="form-control" multiple="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-multiple">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-multiple --><hr>
<!-- Start: @group-select--input-select-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een select ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-invalid dso-required">
<div class="dso-label-container">
<label for="input-select-invalid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-invalid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-message">Dit veld is verplicht</p>
<p class="dso-help-block" id="helpTextId_input-select-invalid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-invalid --><hr>
<!-- Start: @group-select--input-select-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een select ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-valid dso-required">
<div class="dso-label-container">
<label for="input-select-valid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-valid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-valid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-valid --><hr>
<!-- Start: @group-select--input-select-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-disabled" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-disabled" class="form-control" disabled="" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-disabled --><hr>
<!-- Start: @group-select--input-select-infobutton-open -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Infobutton uitgeklapt</h2>
<p>Toelichting uitgeklapt</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-multiple-open" class="control-label">
Kies uw beleg
</label>
<button type="button" class="btn dso-field-info-button dso-open">
<span class="sr-only">
Toelichting
</span>
</button>
</div>
<div class="dso-field-container">
<select id="input-select-multiple-open" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
<div class="dso-field-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Heading 4</h4>
<p>
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.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-infobutton-open --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms
If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.
<form class="form-horizontal">
<!-- Start: @group-select--default -->
<div class="form-group dso-select">
<div class="dso-label-container">
<label for="input-select" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select" class="form-control">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
<!-- End: @group-select--default --><hr>
<!-- Start: @group-select--input-select-multiple -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Multiple</h2>
<p>Indien een multiple select gewenst is, dient er een <code>.dso-multiple</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-multiple">
<div class="dso-label-container">
<label for="input-select-multiple" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-multiple" class="form-control" multiple="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-multiple">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-multiple --><hr>
<!-- Start: @group-select--input-select-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een select ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-select</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-invalid dso-required">
<div class="dso-label-container">
<label for="input-select-invalid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-invalid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-message">Dit veld is verplicht</p>
<p class="dso-help-block" id="helpTextId_input-select-invalid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-invalid --><hr>
<!-- Start: @group-select--input-select-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een select ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-valid dso-required">
<div class="dso-label-container">
<label for="input-select-valid" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-valid" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
<p class="dso-help-block" id="helpTextId_input-select-valid">Maak een keuze tussen vlees of vis</p>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-valid --><hr>
<!-- Start: @group-select--input-select-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-disabled" class="control-label">
Kies uw beleg
</label>
</div>
<div class="dso-field-container">
<select id="input-select-disabled" class="form-control" disabled="" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-disabled --><hr>
<!-- Start: @group-select--input-select-infobutton-open -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Infobutton uitgeklapt</h2>
<p>Toelichting uitgeklapt</p>
</div>
<div class="dso-example">
<div class="form-group dso-select dso-required">
<div class="dso-label-container">
<label for="input-select-multiple-open" class="control-label">
Kies uw beleg
</label>
<button type="button" class="btn dso-field-info-button dso-open">
<span class="sr-only">
Toelichting
</span>
</button>
</div>
<div class="dso-field-container">
<select id="input-select-multiple-open" class="form-control" required="">
<optgroup label="Vlees">
<option value="worst">Worst</option>
<option value="salami">Salami</option>
<option value="geit">Geit</option>
</optgroup>
<optgroup label="Vis">
<option value="zalm">Zalm</option>
<option value="makreel">Makreel</option>
</optgroup>
</select>
</div>
<div class="dso-field-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Heading 4</h4>
<p>
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.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End: @group-select--input-select-infobutton-open --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>