<!-- 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>
<!-- Input Select Multiple -->
<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>
<!-- Input Select Invalid -->
<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>
<!-- Input Select Valid -->
<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>
<!-- Input Select Disabled -->
<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 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>
</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>
</div>
/* Default */
id: input-select
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
/* Input Select Multiple */
id: input-select-multiple
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: Multiple
__explanation:
- >-
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>.
multiple: true
helpText: Maak een keuze tussen vlees of vis
/* Input Select Invalid */
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
/* Input Select Valid */
id: input-select-valid
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: Geldig
__explanation:
- >-
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>.
required: true
state: valid
helpText: Maak een keuze tussen vlees of vis
/* Input Select Disabled */
id: input-select-disabled
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: Disabled
required: true
disabled: true
- Handle: @group-select
- Variants (5): Default , Input Select Multiple , Input Select Invalid , Input Select Valid , Input Select Disabled
- Preview:
- Filesystem Path: components\03-forms\01-groups\group-select.hbs
- References (2): @error-block, @help-block
There are no notes for this item.
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>
<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>
<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>
<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>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>