No notes defined.
<div class="formCombobox">
<label class="label is-optional" for="field-uid">Bezeichnung</label>
<span class="formCombobox-field">
<div class="combobox">
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="Enter phrase" aria-describedby="uid-hint">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="1" data-label="Vinyl pug cardigan">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-value="2" data-label="Flexitarian Retro">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-value="3" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
<li class="combobox-item" data-value="4" data-label="Echo Echo Park">
<label>Echo Echo Park</label>
</li>
<li class="combobox-item" data-value="5" data-label="Echo Vinyl">
<label>Echo Vinyl</label>
</li>
<li class="combobox-item" data-id="my-given-ID" data-value="6" data-label="Echo">
<label>Echo</label>
</li>
</ul>
</div>
</div>
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
<div class="formCombobox
{{~#type}} is-{{.}}{{/type~}}
{{~#if is-required}} is-required{{/if~}}
{{~#if is-disabled}} is-disabled{{/if~}}
{{~#modifier}} {{{.}}}{{/modifier~}}
"
{{~#width}} data-width="{{.}}"{{/width~}}
{{~#if is-invalid}} data-invalid="true"{{else~}}
{{~#if is-valid}} data-invalid="false"{{/if}}{{/if~}}
>
{{> @label}}
<span class="formCombobox-field">
{{#combobox}}
{{render '@combobox' (contextData '@formcombobox' this) merge=true}}
{{/combobox}}
</span>
{{#message}}
{{render '@formmessage' (contextData '@formcombobox' this) merge=true}}
{{/message}}
</div>
{
"id": "uid",
"label": "Bezeichnung",
"described-by": "uid-hint",
"combobox": {
"id": "uid",
"placeholder": "Enter phrase",
"noresults": "Keine Treffer",
"options": [
{
"label": "Vinyl pug cardigan",
"value": 1
},
{
"label": "Flexitarian Retro",
"value": 2
},
{
"label": "Plaid 8-bit",
"value": 3,
"is-disabled": true
},
{
"label": "Echo Echo Park",
"value": 4
},
{
"label": "Echo Vinyl",
"value": 5
},
{
"label": "Echo",
"value": 6,
"id": "my-given-ID"
}
],
"label": null
},
"message": {
"content": "Ich bin ein Hinweis.",
"id": "uid-hint"
}
}
@import "_formCombobox.styles";
%formCombobox {
@include stack-spacing();
@include field-stacking();
.label {
@include stack-spacing(0);
}
.combobox {
@include stack-spacing(0);
}
}
.formCombobox {
@extend %formCombobox;
}