No notes defined.
<!-- List -->
<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>
<!-- Default -->
<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">
</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>
<!-- Autosend -->
<div class="combobox" data-autosend>
<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">
</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>
<!-- Disabled -->
<div class="combobox" aria-disabled="true">
<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-disabled="true" disabled>
</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>
<!-- Disabled Entries -->
<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">
</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="" data-label="Vinyl pug cardigan" aria-disabled="true">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-value="" data-label="Flexitarian Retro" aria-disabled="true">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-value="" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
</ul>
</div>
</div>
<!-- With Groups -->
<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">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<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>
</div>
<!-- With Groups Labelled -->
<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">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<div class="combobox-group">
<div class="combobox-label">Group 1</div>
<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 class="combobox-group">
<div class="combobox-label">Group 2</div>
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="7" data-label="Hashtag Echo">
<label>Hashtag Echo</label>
</li>
<li class="combobox-item" data-value="8" data-label="Single-origin coffee" aria-disabled="true">
<label>Single-origin coffee</label>
</li>
<li class="combobox-item" data-value="9" data-label="Biodiesel locavore">
<label>Biodiesel locavore</label>
</li>
</ul>
</div>
</div>
</div>
<!-- Select -->
<div class="combobox" data-select>
<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="" value="All items">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<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>
</div>
<!-- Select Disabled -->
<div class="combobox" data-select aria-disabled="true">
<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="" aria-disabled="true" disabled>
</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>
<!-- Select Autosend -->
<div class="combobox" data-autosend data-select>
<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="" value="All items">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<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>
</div>
<!-- Select With Groups -->
<div class="combobox" data-select>
<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="" value="All items">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<div class="combobox-label">Group 1</div>
<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 class="combobox-group">
<div class="combobox-label">Group 2</div>
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="7" data-label="Hashtag Echo">
<label>Hashtag Echo</label>
</li>
<li class="combobox-item" data-value="8" data-label="Single-origin coffee" aria-disabled="true">
<label>Single-origin coffee</label>
</li>
<li class="combobox-item" data-value="9" data-label="Biodiesel locavore">
<label>Biodiesel locavore</label>
</li>
</ul>
</div>
</div>
</div>
<!-- Multiselect -->
<div class="combobox" data-multiselect>
<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="Please select">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-id="my-given-ID" data-name="my-given-name[]" data-value="1" data-label="Vinyl pug cardigan">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="2" data-label="Flexitarian Retro">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="3" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="4" data-label="Echo Echo Park">
<label>Echo Echo Park</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="5" data-label="Echo Vinyl">
<label>Echo Vinyl</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="6" data-label="Echo">
<label>Echo</label>
</li>
</ul>
</div>
</div>
<!-- Multiselect Autosend -->
<div class="combobox" data-autosend data-multiselect>
<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="Please select">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-id="my-given-ID" data-name="my-given-name[]" data-value="1" data-label="Vinyl pug cardigan">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="2" data-label="Flexitarian Retro">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="3" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="4" data-label="Echo Echo Park">
<label>Echo Echo Park</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="5" data-label="Echo Vinyl">
<label>Echo Vinyl</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="6" data-label="Echo">
<label>Echo</label>
</li>
</ul>
</div>
</div>
<!-- Multiselect With Groups -->
<div class="combobox" data-multiselect>
<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="Please select">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<div class="combobox-group">
<div class="combobox-label">Group 1</div>
<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 class="combobox-group">
<div class="combobox-label">Group 2</div>
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="7" data-label="Hashtag Echo">
<label>Hashtag Echo</label>
</li>
<li class="combobox-item" data-value="8" data-label="Single-origin coffee" aria-disabled="true">
<label>Single-origin coffee</label>
</li>
<li class="combobox-item" data-value="9" data-label="Biodiesel locavore">
<label>Biodiesel locavore</label>
</li>
</ul>
</div>
</div>
</div>
<!-- Demo Only -->
<form action="javascript:alert('Form send!')">
<div class="combobox" data-autosend>
<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">
</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>
<div class="combobox" data-autosend data-select>
<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="" value="All items">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<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>
</div>
<div class="combobox" data-autosend data-multiselect>
<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="Please select">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-id="my-given-ID" data-name="my-given-name[]" data-value="1" data-label="Vinyl pug cardigan">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="2" data-label="Flexitarian Retro">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="3" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="4" data-label="Echo Echo Park">
<label>Echo Echo Park</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="5" data-label="Echo Vinyl">
<label>Echo Vinyl</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="6" data-label="Echo">
<label>Echo</label>
</li>
</ul>
</div>
</div>
</form>
<!-- Doc Only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
<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">
</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>
<div class="combobox" aria-disabled="true">
<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-disabled="true" disabled>
</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>
<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">
</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="" data-label="Vinyl pug cardigan" aria-disabled="true">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-value="" data-label="Flexitarian Retro" aria-disabled="true">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-value="" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Groups (Labelled and Unlabelled)</h2>
<div class="doc-variant-configuration">
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
<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">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<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>
</div>
<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">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<div class="combobox-group">
<div class="combobox-label">Group 1</div>
<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 class="combobox-group">
<div class="combobox-label">Group 2</div>
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="7" data-label="Hashtag Echo">
<label>Hashtag Echo</label>
</li>
<li class="combobox-item" data-value="8" data-label="Single-origin coffee" aria-disabled="true">
<label>Single-origin coffee</label>
</li>
<li class="combobox-item" data-value="9" data-label="Biodiesel locavore">
<label>Biodiesel locavore</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Select</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-select]</li>
</ul>
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
<div class="doc-variant-notes">
<ul>
<li>Only predefined options are accepted.</li>
<li>The value of the input field will be used as fallback value.</li>
</ul>
</div>
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
<div class="combobox" data-select>
<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="" value="All items">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<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>
</div>
<div class="combobox" data-select aria-disabled="true">
<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="" aria-disabled="true" disabled>
</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>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Select with Labelled Groups</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-select]</li>
</ul>
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
<div class="doc-variant-notes">
<ul>
<li>Only predefined options are accepted.</li>
<li>The value of the input field will be used as fallback value.</li>
</ul>
</div>
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
<div class="combobox" data-select>
<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="" value="All items">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<div class="combobox-label">Group 1</div>
<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 class="combobox-group">
<div class="combobox-label">Group 2</div>
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="7" data-label="Hashtag Echo">
<label>Hashtag Echo</label>
</li>
<li class="combobox-item" data-value="8" data-label="Single-origin coffee" aria-disabled="true">
<label>Single-origin coffee</label>
</li>
<li class="combobox-item" data-value="9" data-label="Biodiesel locavore">
<label>Biodiesel locavore</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Multi-Select</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-multiselect]</li>
</ul>
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
<div class="doc-variant-notes">
<ul>
<li>Only predefined options are accepted.</li>
<li>If no options are selected, the placeholder will be shown.
</ul>
</div>
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
<div class="combobox" data-multiselect>
<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="Please select">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-id="my-given-ID" data-name="my-given-name[]" data-value="1" data-label="Vinyl pug cardigan">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="2" data-label="Flexitarian Retro">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="3" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="4" data-label="Echo Echo Park">
<label>Echo Echo Park</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="5" data-label="Echo Vinyl">
<label>Echo Vinyl</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="6" data-label="Echo">
<label>Echo</label>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Multi-Select with Labelled Groups</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-multiselect]</li>
</ul>
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
<div class="doc-variant-notes">
<ul>
<li>Only predefined options are accepted.</li>
<li>If no options are selected, the placeholder will be shown..
</ul>
</div>
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
<div class="combobox" data-multiselect>
<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="Please select">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<div class="combobox-group">
<div class="combobox-label">Group 1</div>
<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 class="combobox-group">
<div class="combobox-label">Group 2</div>
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-value="7" data-label="Hashtag Echo">
<label>Hashtag Echo</label>
</li>
<li class="combobox-item" data-value="8" data-label="Single-origin coffee" aria-disabled="true">
<label>Single-origin coffee</label>
</li>
<li class="combobox-item" data-value="9" data-label="Biodiesel locavore">
<label>Biodiesel locavore</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Auto-send Demo</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-autosend]</li>
</ul>
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
<div class="doc-variant-notes">
If the component has the attribute `data-autosend='true'` and is embedded in a form, the form is submitted after selecting an option or, in the case of the multiselect variant, when leaving the form field.
</div>
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
<form action="javascript:alert('Form send!')">
<div class="combobox" data-autosend>
<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">
</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>
<div class="combobox" data-autosend data-select>
<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="" value="All items">
</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="" data-label="All items">
<label>All items</label>
</li>
</ul>
<div class="combobox-group">
<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>
</div>
<div class="combobox" data-autosend data-multiselect>
<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="Please select">
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
<ul class="combobox-list" data-noresults="Keine Treffer">
<li class="combobox-item" data-id="my-given-ID" data-name="my-given-name[]" data-value="1" data-label="Vinyl pug cardigan">
<label>Vinyl pug cardigan</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="2" data-label="Flexitarian Retro">
<label>Flexitarian Retro</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="3" data-label="Plaid 8-bit" aria-disabled="true">
<label>Plaid 8-bit</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="4" data-label="Echo Echo Park">
<label>Echo Echo Park</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="5" data-label="Echo Vinyl">
<label>Echo Vinyl</label>
</li>
<li class="combobox-item" data-name="my-given-name[]" data-value="6" data-label="Echo">
<label>Echo</label>
</li>
</ul>
</div>
</div>
</form>
</div>
</section>
<div style="min-height: 50vh"></div>
<!-- List -->
{{#label}}
<div class="combobox-label">{{{.}}}</div>
{{/label}}
<ul class="combobox-list" data-noresults="{{noresults}}">
{{#options}}
<li class="combobox-item"{{#id}} data-id="{{.}}"{{/id}}{{#name}} data-name="{{.}}"{{/name}} data-value="{{value}}" data-label="{{label}}"{{#if is-disabled}} aria-disabled="true"{{/if}}>
{{#if url}}{{#unless is-disabled}}<a href={{url}}>{{/unless}}{{/if~}}
<label>{{{label}}}</label>
{{~#if url}}{{#unless is-disabled}}</a>{{/unless}}{{/if}}
</li>
{{/options}}
</ul>
<!-- Default -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Autosend -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Disabled -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Disabled Entries -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- With Groups -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- With Groups Labelled -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Select -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Select Disabled -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Select Autosend -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Select With Groups -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Multiselect -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Multiselect Autosend -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Multiselect With Groups -->
<div class="combobox{{#modifier}} {{.}}{{/modifier}}"{{#if is-autosend}} data-autosend{{/if}}{{#if is-select}} data-select{{/if}}{{#if is-multiselect}} data-multiselect{{/if}}{{#if is-disabled}} aria-disabled="true"{{/if}}>
<div class="combobox-field">
<span class="combobox-input-wrapper">
<input class="combobox-input" id="{{id}}" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="{{placeholder}}"
{{#with (lookup options default-option)}} value="{{{label}}}"{{/with~}}
{{~#if is-disabled}} aria-disabled="true" disabled{{/if~}}
{{~#described-by}} aria-describedby="{{.}}"{{/described-by~}}
>
</span>
</div>
<div class="combobox-dropdown" aria-hidden="true" tabindex="-1">
{{#if options}}
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
{{/if}}
{{#if groups}}
{{#groups}}
<div class="combobox-group">
{{render '@combobox--_list' (contextData '@combobox' this) merge=false}}
</div>
{{/groups}}
{{/if}}
</div>
</div>
<!-- Demo Only -->
<form action="{{demo-action}}">
{{#samples}}
{{render '@combobox' (contextData '@combobox' this) merge=true}}
{{/samples}}
</form>
<!-- Doc Only -->
{{#variants}}
<section class="doc-variant{{#if narrow-preview}} doc-narrow-content{{/if}}"{{#id}} id="{{.}}"{{/id}}>
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
<div class="doc-variant-controller"></div>
</div>
<div class="doc-variant-configuration">
{{#if ../themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
{{#../themes}}
<option value="{{{.}}}">{{{.}}}</option>
{{/../themes}}
</select>
</label>
{{/if}}
</div>
{{#annotations}}
<div class="doc-variant-notes">
{{{.}}}
</div>
{{/annotations}}
</header>
<div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="{{theme}}">
{{#if demo-action}}
{{render '@combobox--demo-only' (contextData '@combobox' this) merge=true}}
{{else}}
{{#samples}}
{{render '@combobox' (contextData '@combobox' this) merge=true}}
{{/samples}}
{{/if}}
</div>
</section>
{{/variants}}
<div style="min-height: 50vh"></div>
/* List */
{
"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
}
/* Default */
{
"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
}
/* Autosend */
{
"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,
"is-autosend": true
}
/* Disabled */
{
"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,
"is-disabled": true
}
/* Disabled Entries */
{
"id": "uid",
"placeholder": "Enter phrase",
"noresults": "Keine Treffer",
"options": [
{
"is-disabled": true,
"label": "Vinyl pug cardigan"
},
{
"is-disabled": true,
"label": "Flexitarian Retro"
},
{
"is-disabled": true,
"label": "Plaid 8-bit"
}
],
"label": null
}
/* With Groups */
{
"id": "uid",
"placeholder": "Enter phrase",
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"groups": [
{
"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"
}
]
}
]
}
/* With Groups Labelled */
{
"id": "uid",
"placeholder": "Enter phrase",
"noresults": "Keine Treffer",
"options": null,
"label": null,
"groups": [
{
"label": "Group 1",
"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": "Group 2",
"options": [
{
"label": "Hashtag Echo",
"value": 7
},
{
"label": "Single-origin coffee",
"value": 8,
"is-disabled": true
},
{
"label": "Biodiesel locavore",
"value": 9
}
]
}
]
}
/* Select */
{
"id": "uid",
"placeholder": null,
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"is-select": true,
"default-option": 0,
"groups": [
{
"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"
}
]
}
]
}
/* Select Disabled */
{
"id": "uid",
"placeholder": null,
"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,
"is-select": true,
"is-disabled": true
}
/* Select Autosend */
{
"id": "uid",
"placeholder": null,
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"is-select": true,
"is-autosend": true,
"default-option": 0,
"groups": [
{
"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"
}
]
}
]
}
/* Select With Groups */
{
"id": "uid",
"placeholder": null,
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"is-select": true,
"default-option": 0,
"groups": [
{
"label": "Group 1",
"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": "Group 2",
"options": [
{
"label": "Hashtag Echo",
"value": 7
},
{
"label": "Single-origin coffee",
"value": 8,
"is-disabled": true
},
{
"label": "Biodiesel locavore",
"value": 9
}
]
}
]
}
/* Multiselect */
{
"id": "uid",
"placeholder": "Please select",
"noresults": "Keine Treffer",
"options": [
{
"label": "Vinyl pug cardigan",
"id": "my-given-ID",
"name": "my-given-name[]",
"value": 1
},
{
"label": "Flexitarian Retro",
"name": "my-given-name[]",
"value": 2
},
{
"label": "Plaid 8-bit",
"name": "my-given-name[]",
"value": 3,
"is-disabled": true
},
{
"label": "Echo Echo Park",
"name": "my-given-name[]",
"value": 4
},
{
"label": "Echo Vinyl",
"name": "my-given-name[]",
"value": 5
},
{
"label": "Echo",
"value": 6,
"name": "my-given-name[]"
}
],
"label": null,
"is-multiselect": true
}
/* Multiselect Autosend */
{
"id": "uid",
"placeholder": "Please select",
"noresults": "Keine Treffer",
"options": [
{
"label": "Vinyl pug cardigan",
"id": "my-given-ID",
"name": "my-given-name[]",
"value": 1
},
{
"label": "Flexitarian Retro",
"name": "my-given-name[]",
"value": 2
},
{
"label": "Plaid 8-bit",
"name": "my-given-name[]",
"value": 3,
"is-disabled": true
},
{
"label": "Echo Echo Park",
"name": "my-given-name[]",
"value": 4
},
{
"label": "Echo Vinyl",
"name": "my-given-name[]",
"value": 5
},
{
"label": "Echo",
"value": 6,
"name": "my-given-name[]"
}
],
"label": null,
"is-multiselect": true,
"is-autosend": true
}
/* Multiselect With Groups */
{
"id": "uid",
"placeholder": "Please select",
"noresults": "Keine Treffer",
"options": null,
"label": null,
"is-multiselect": true,
"groups": [
{
"label": "Group 1",
"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": "Group 2",
"options": [
{
"label": "Hashtag Echo",
"value": 7
},
{
"label": "Single-origin coffee",
"value": 8,
"is-disabled": true
},
{
"label": "Biodiesel locavore",
"value": 9
}
]
}
]
}
/* Demo Only */
{
"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,
"demo-action": "javascript:alert('Form send!')",
"samples": [
{
"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,
"is-autosend": true
},
{
"id": "uid",
"placeholder": null,
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"is-select": true,
"is-autosend": true,
"default-option": 0,
"groups": [
{
"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"
}
]
}
]
},
{
"id": "uid",
"placeholder": "Please select",
"noresults": "Keine Treffer",
"options": [
{
"label": "Vinyl pug cardigan",
"id": "my-given-ID",
"name": "my-given-name[]",
"value": 1
},
{
"label": "Flexitarian Retro",
"name": "my-given-name[]",
"value": 2
},
{
"label": "Plaid 8-bit",
"name": "my-given-name[]",
"value": 3,
"is-disabled": true
},
{
"label": "Echo Echo Park",
"name": "my-given-name[]",
"value": 4
},
{
"label": "Echo Vinyl",
"name": "my-given-name[]",
"value": 5
},
{
"label": "Echo",
"value": 6,
"name": "my-given-name[]"
}
],
"label": null,
"is-multiselect": true,
"is-autosend": true
}
]
}
/* Doc Only */
{
"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,
"themes": [
"default",
"dark"
],
"variants": [
{
"title": "Default",
"samples": [
{
"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
},
{
"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,
"is-disabled": true
},
{
"id": "uid",
"placeholder": "Enter phrase",
"noresults": "Keine Treffer",
"options": [
{
"is-disabled": true,
"label": "Vinyl pug cardigan"
},
{
"is-disabled": true,
"label": "Flexitarian Retro"
},
{
"is-disabled": true,
"label": "Plaid 8-bit"
}
],
"label": null
}
]
},
{
"title": "With Groups (Labelled and Unlabelled)",
"samples": [
{
"id": "uid",
"placeholder": "Enter phrase",
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"groups": [
{
"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"
}
]
}
]
},
{
"id": "uid",
"placeholder": "Enter phrase",
"noresults": "Keine Treffer",
"options": null,
"label": null,
"groups": [
{
"label": "Group 1",
"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": "Group 2",
"options": [
{
"label": "Hashtag Echo",
"value": 7
},
{
"label": "Single-origin coffee",
"value": 8,
"is-disabled": true
},
{
"label": "Biodiesel locavore",
"value": 9
}
]
}
]
}
]
},
{
"title": "Select",
"modifiers": "[data-select]",
"annotations": "<ul><li>Only predefined options are accepted.</li><li>The value of the input field will be used as fallback value.</li></ul>",
"samples": [
{
"id": "uid",
"placeholder": null,
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"is-select": true,
"default-option": 0,
"groups": [
{
"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"
}
]
}
]
},
{
"id": "uid",
"placeholder": null,
"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,
"is-select": true,
"is-disabled": true
}
]
},
{
"title": "Select with Labelled Groups",
"modifiers": "[data-select]",
"annotations": "<ul><li>Only predefined options are accepted.</li><li>The value of the input field will be used as fallback value.</li></ul>",
"samples": [
{
"id": "uid",
"placeholder": null,
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"is-select": true,
"default-option": 0,
"groups": [
{
"label": "Group 1",
"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": "Group 2",
"options": [
{
"label": "Hashtag Echo",
"value": 7
},
{
"label": "Single-origin coffee",
"value": 8,
"is-disabled": true
},
{
"label": "Biodiesel locavore",
"value": 9
}
]
}
]
}
]
},
{
"title": "Multi-Select",
"modifiers": "[data-multiselect]",
"annotations": "<ul><li>Only predefined options are accepted.</li><li>If no options are selected, the placeholder will be shown.</ul>",
"samples": [
{
"id": "uid",
"placeholder": "Please select",
"noresults": "Keine Treffer",
"options": [
{
"label": "Vinyl pug cardigan",
"id": "my-given-ID",
"name": "my-given-name[]",
"value": 1
},
{
"label": "Flexitarian Retro",
"name": "my-given-name[]",
"value": 2
},
{
"label": "Plaid 8-bit",
"name": "my-given-name[]",
"value": 3,
"is-disabled": true
},
{
"label": "Echo Echo Park",
"name": "my-given-name[]",
"value": 4
},
{
"label": "Echo Vinyl",
"name": "my-given-name[]",
"value": 5
},
{
"label": "Echo",
"value": 6,
"name": "my-given-name[]"
}
],
"label": null,
"is-multiselect": true
}
]
},
{
"title": "Multi-Select with Labelled Groups",
"modifiers": "[data-multiselect]",
"annotations": "<ul><li>Only predefined options are accepted.</li><li>If no options are selected, the placeholder will be shown..</ul>",
"samples": [
{
"id": "uid",
"placeholder": "Please select",
"noresults": "Keine Treffer",
"options": null,
"label": null,
"is-multiselect": true,
"groups": [
{
"label": "Group 1",
"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": "Group 2",
"options": [
{
"label": "Hashtag Echo",
"value": 7
},
{
"label": "Single-origin coffee",
"value": 8,
"is-disabled": true
},
{
"label": "Biodiesel locavore",
"value": 9
}
]
}
]
}
]
},
{
"title": "Auto-send Demo",
"modifiers": "[data-autosend]",
"annotations": "If the component has the attribute `data-autosend='true'` and is embedded in a form, the form is submitted after selecting an option or, in the case of the multiselect variant, when leaving the form field.",
"demo-action": "javascript:alert('Form send!')",
"samples": [
{
"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,
"is-autosend": true
},
{
"id": "uid",
"placeholder": null,
"noresults": "Keine Treffer",
"options": [
{
"label": "All items"
}
],
"label": null,
"is-select": true,
"is-autosend": true,
"default-option": 0,
"groups": [
{
"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"
}
]
}
]
},
{
"id": "uid",
"placeholder": "Please select",
"noresults": "Keine Treffer",
"options": [
{
"label": "Vinyl pug cardigan",
"id": "my-given-ID",
"name": "my-given-name[]",
"value": 1
},
{
"label": "Flexitarian Retro",
"name": "my-given-name[]",
"value": 2
},
{
"label": "Plaid 8-bit",
"name": "my-given-name[]",
"value": 3,
"is-disabled": true
},
{
"label": "Echo Echo Park",
"name": "my-given-name[]",
"value": 4
},
{
"label": "Echo Vinyl",
"name": "my-given-name[]",
"value": 5
},
{
"label": "Echo",
"value": 6,
"name": "my-given-name[]"
}
],
"label": null,
"is-multiselect": true,
"is-autosend": true
}
]
}
]
}
import combobox from "./_combobox.script.js";
combobox.init();
export default (function (){
const defaults = {
selectors: {
element: ".combobox",
dropdown: ".combobox-dropdown",
field: ".combobox-field",
group: ".combobox-group",
groupLabel: ".combobox-label",
input: ".combobox-input",
inputWrapper: ".combobox-input-wrapper",
item: ".combobox-item",
},
classes: {
suggestion: "combobox-suggestion",
badge: "combobox-badge",
toggleMarker: "combobox-toggle",
trigger: "combobox-trigger",
},
modifier: {
},
};
const comboboxes = [];
function init(options) {
options = options || {};
const settings = Object.assign({}, defaults, options);
const elements = document.querySelectorAll(settings.selectors.element);
elements.forEach((element) => {
comboboxes.push(new Combobox(element, settings));
});
}
const Combobox = function(container, settings) {
this.container = container;
this.settings = Object.assign({}, settings);
this.settings.isSelect = (this.container.hasAttribute("data-select") && this.container.dataset.select !== "false");
this.settings.isMultiselect = (this.container.hasAttribute("data-multiselect") && this.container.dataset.multiselect !== "false");
this.settings.isAutocomplete = this.settings.isSelect || this.settings.isMultiselect;
this.settings.isAutosend = (this.container.hasAttribute("data-autosend") && this.container.dataset.autosend !== "false");
this.currentItem;
// Field
const field = this.container.querySelector(this.settings.selectors.field)
this.field = new Field(field, this);
// Trigger
const trigger = document.createElement("span");
trigger.classList.add(this.settings.classes.trigger);
trigger.setAttribute("tabindex", "-1");
this.field.container.prepend(trigger);
trigger.addEventListener("click", () => {
if (! this.dropdown.isOpen) {
trigger.blur();
trigger.setAttribute("tabindex", "-1");
} else {
this.field.focus();
}
});
trigger.addEventListener("mousedown", () => {
if (this.dropdown.isOpen) {
this.field.blur();
this.dropdown.close();
trigger.removeAttribute("tabindex");
}
});
// Badge
if (this.settings.isMultiselect) {
this.badge = new Badge(this);
}
// Dropdown
const dropdown = this.container.querySelector(this.settings.selectors.dropdown);
if (dropdown.querySelectorAll(this.settings.selectors.item).length === 0) {
this.disable();
return;
}
this.dropdown = new Dropdown(dropdown, this);
// Callback
this.callback = () => {
if (this.settings.isAutosend) {
console.warn("Combobox: No form for autosending is found!");
}
};
if (typeof this.settings.callback === "function") {
this.callback = this.settings.callback;
delete this.settings.callback;
} else if (this.settings.isAutosend) {
const form = container.closest("form");
if (form) {
this.callback = () => {
/**
* Dispatch the custom event 'combobox:send', so other scripts
* can react on changes.
* Additionally call form.submit() when an action has been defined,
*/
const event = new CustomEvent('combobox:send', {
detail: {
element: this.container,
},
});
this.container.dispatchEvent(event);
if (form.hasAttribute("action")) {
form.submit();
}
};
delete this.settings.callback;
}
}
// Get defaultItem
this.defaultItem;
if (this.field.defaultLabel && this.dropdown.items) {
this.dropdown.items.forEach((item) => {
if (item.label === this.field.defaultLabel) {
if (typeof this.defaultItem === "object") {
console.warn(`Combobox: Label of default item "${this.field.defaultLabel} is not unique!`);
return;
}
this.defaultItem = item;
}
});
}
// Add custom listeners
this.container.addEventListener('combobox:update', (event) => {
if (typeof event.detail.value !== "string") {
return;
}
this.dropdown.resetNavigation();
this.field.update(event.detail.label);
}, false);
this.container.addEventListener('combobox:disable', (event) => {
let disable = true;
let detail = event.detail ||Â {};
if (typeof detail.disable === "boolean") {
disable = detail.disable;
}
this.disable(disable);
}, false);
// Add event listeners
this.container.addEventListener("focusin", () => {
this.dropdown.open();
});
this.container.addEventListener("focusout", () => {
setTimeout(() => {
if (this.container.contains(document.activeElement)) {
return;
}
this.dropdown.close();
}, 1);
});
this.container.addEventListener("keydown", (event) => {
if (event.key === "Escape" || event.keyCode === 27) {
delete this.dropdown.selectedItem;
document.activeElement.blur();
}
if (event.key === "ArrowUp" || event.keyCode === 38) {
event.preventDefault();
this.dropdown.navigate(-1);
}
if (event.key === "ArrowDown" || event.keyCode === 40) {
event.preventDefault();
this.dropdown.navigate(1);
}
});
}
Combobox.prototype.disable = function(disable) {
if (typeof disable !== "boolean") {
disable = true;
}
this.container.setAttribute("aria-disabled", disable);
this.field.disable(disable);
}
Combobox.prototype.update = function(item) {
if (typeof item !== "object") {
console.warn("Combobox.update: No item is given!");
}
if (item === this.currentItem) {
return;
}
this.currentItem = item;
this.value = "";
if (typeof item === "object") {
this.value = item.value;
}
this.field.update(item.label);
this.container.focus();
// Custom event
const event = new CustomEvent('combobox:update', {
detail: {
element: this.container,
value: item.value,
label: item.label,
},
});
this.container.dispatchEvent(event);
}
/**
* Dropdown
*/
const Dropdown = function(container, root) {
this.container = container;
this.root = root;
this.settings = this.root.settings;
this.isOpen = false;
// Items
this.items = [];
const items = this.container.querySelectorAll(this.settings.selectors.item);
items.forEach((element, index) => {
this.items.push(new Item(element, index, this.root));
});
// Suggestion
this.suggestedItem;
// Add event listeners
this.container.addEventListener("keydown", (event) => {
if (event.key === 'Enter' || event.keyCode === 13) {
this.selectItem(this.selectedItem);
}
if (this.settings.isMultiselect && (event.key === 'Backspace' || event.keyCode === 8) && this.selectedItem.checkbox.checked) {
this.selectItem(this.selectedItem);
}
});
}
Dropdown.prototype.open = function() {
if (this.isOpen) {
return;
}
if (typeof this.root.defaultItem === "object" && this.root.field.input.value === this.root.defaultItem.label) {
this.root.field.input.value = "";
}
this.container.setAttribute("aria-hidden", false);
this.isOpen = true;
}
Dropdown.prototype.close = function() {
if (! this.isOpen) {
return;
}
if (! this.settings.isMultiselect) {
this.root.field.suggest();
this.root.field.send();
}
this.container.setAttribute("aria-hidden", true);
this.isOpen = false;
}
Dropdown.prototype.navigate = function(direction) {
if (this.container.dataset.results === "0" ||Â this.items.length === 0) {
return;
}
if (typeof direction !== "number" || direction === 0 || direction > 1) {
direction = 1;
} else if (direction < -1) {
direction = -1;
}
if (document.activeElement === this.root.field.input) {
this.container.focus();
}
// Get highlighted item and, if found, set it as current item
let index = -1;
this.items.forEach((item) => {
if (item.isHighlighted()) {
index = item.index;
this.selectedItem = item;
}
});
// When current item is set, use its index
// else start with 0 or a negative value
if (this.selectedItem) {
index = this.selectedItem.index;
// Only in- or decrement if current item is already highlighted
if (this.selectedItem.isHighlighted()) {
index += direction;
}
this.selectedItem.highlight(false);
} else {
index += direction;
}
for (let i = index; i >= -1 && i < this.items.length; i += direction) {
if (i < 0) {
delete this.selectedItem;
this.root.field.focus();
break;
}
const item = this.items[i];
if (! item.isHidden() && ! item.isDisabled()) {
this.selectedItem = this.items[i]
break;
}
}
if (this.selectedItem) {
this.selectedItem.highlight();
}
}
Dropdown.prototype.filterItems = function(value) {
if (typeof value === "string" && value.match(/^ +$/)) { // Value starting with spaces
this.root.field.update(" ");
return;
}
this.hideDisabled(value !== "");
let results = 0;
let groups = {};
let suggestedValue = "";
delete this.suggestedItem;
this.items.forEach((item) => {
item.highlight(false);
if (item.isDisabled()) {
return;
}
const excerpt = item.markText(value),
hide = (value !== "" && excerpt === "");
if (excerpt !== "" && value.toLowerCase() === item.label.toLowerCase()) {
suggestedValue = value;
this.suggestedItem = item;
} else if (excerpt !== "" && ! this.suggestedItem) {
const regex = new RegExp(`^${value}`, "i"),
matches = item.label.match(regex);
if (matches) {
suggestedValue = mergeString(value, item.label);
this.suggestedItem = item;
}
}
if (! hide) {
results++;
}
if (typeof item.group !== "undefined") {
const groupId = item.group.id;
if (typeof groups[groupId] !== "object") {
groups[groupId] = {
results: 0,
container: item.group.container,
}
}
if (! hide) {
groups[groupId].results++;
}
}
item.hide(hide);
});
this.container.dataset.results = results;
for (const [id, group] of Object.entries(groups)){
group.container.dataset.results = group.results;
};
// Suggestion
this.root.field.suggest(suggestedValue);
}
Dropdown.prototype.getCheckedItems = function() {
const checkedItems = this.root.dropdown.items.filter((item) => {
return item.container.querySelector("input:checked");
});
return checkedItems;
}
Dropdown.prototype.hideDisabled = function(hide) {
if (typeof hide !== "boolean") {
hide = true;
}
const items = this.container.querySelectorAll(`${this.settings.selectors.item}[aria-disabled='true']`);
items.forEach((item) => {
item.setAttribute("aria-hidden", hide);
});
}
Dropdown.prototype.resetFilter = function() {
this.root.dropdown.filterItems("");
}
Dropdown.prototype.resetNavigation = function() {
this.items.forEach((item) => {
item.highlight(false);
});
}
Dropdown.prototype.selectItem = function(item) {
if (this.settings.isMultiselect) {
if (typeof item !== "undefined" ) {
item.checkbox.checked = ! item.checkbox.checked;
item.select();
}
this.root.dropdown.container.focus();
return;
}
delete this.root.dropdown.suggestedItem;
this.items.forEach((item) => {
item.hide(false);
item.markText();
item.highlight(false);
});
this.selectedItem = item;
if (this.selectedItem) {
this.selectedItem.highlight();
this.root.update(this.selectedItem);
}
this.container.blur();
}
Dropdown.prototype.untickAllItems = function() {
this.root.dropdown.items.forEach((item) => {
item.tickCheckbox(false);
});
this.root.badge.update(0);
}
Dropdown.prototype.unmarkAllItems = function() {
this.root.dropdown.items.forEach((item) => {
item.markText(false);
});
}
/**
* Field
*/
const Field = function(container, root, options) {
this.container = container;
this.root = root;
if (typeof options !== "object") {
options = {};
}
this.settings = Object.assign({}, this.root.settings, options);
this.defaultLabel = "";
// Auto-suggestion
this.suggestion = {
container: this.container.querySelector(this.settings.selectors.inputWrapper),
value: "",
};
// Input
this.input = this.container.querySelector(this.settings.selectors.input);
this.settings.placeholder = this.input.placeholder;
if (this.input.value) {
this.defaultLabel = this.input.value;
}
// Add event listeners
this.input.addEventListener("input", (event) => {
this.root.dropdown.filterItems(this.input.value);
});
this.input.addEventListener("keydown", (event) => {
if (event.key === 'Enter' || event.keyCode === 13) {
event.preventDefault();
this.send();
}
if (event.key === 'Tab' || event.keyCode === 9) {
event.preventDefault();
if (this.settings.isMultiselect) {
const isValid = this.validateValue();
if (this.input.value === "" || isValid) {
document.activeElement.blur();
return;
}
}
this.send();
}
});
}
Field.prototype.blur = function()Â {
this.input.blur();
}
Field.prototype.clear = function()Â {
delete this.root.dropdown.selectedItem;
this.input.value = "";
}
Field.prototype.disable = function(disable) {
if (typeof disable !== "boolean") {
disable = true;
}
this.input.disabled = disable;
}
Field.prototype.focus = function()Â {
this.input.focus();
setTimeout(
() => {
const length = this.input.value.length;
this.input.setSelectionRange(length, length);
},
1
);
}
Field.prototype.check = function()Â {
if (! this.settings.isAutocomplete) {
return true;
}
if (typeof this.root.dropdown.suggestedItem === "object") {
const isExactMatch = (this.input.value === this.root.dropdown.suggestedItem.label);
this.root.currentItem = this.root.dropdown.suggestedItem;
this.input.value = this.root.currentItem.label;
this.root.dropdown.selectedItem = this.root.currentItem;
if (this.settings.isMultiselect) {
this.root.dropdown.filterItems(this.root.currentItem.label);
} else {
this.root.dropdown.resetFilter();
}
this.suggest();
delete this.root.dropdown.suggestedItem;
if (! isExactMatch) {
return false;
}
}
const valid = this.validateValue();
if (this.settings.isMultiselect && this.root.dropdown.selectedItem && valid) {
this.root.dropdown.selectedItem.tickCheckbox();
this.root.dropdown.selectedItem.select();
return true;
}
if (! valid) {
delete this.root.currentItem;
this.root.dropdown.resetFilter();
this.update(this.defaultLabel);
}
return valid;
}
Field.prototype.send = function()Â {
const valid = this.check();
if (! valid) {
return;
}
if (! this.settings.isMultiselect) {
document.activeElement.blur();
}
if (typeof this.root.dropdown.selectedItem?.href === "string") {
const href = this.root.dropdown.selectedItem.href;
this.clear();
window.location.href = href;
return;
}
this.root.callback();
}
Field.prototype.suggest = function(value)Â {
if (! this.settings.isAutocomplete) {
return;
}
if (typeof value !== "string")Â {
delete this.root.dropdown.suggestedItem;
value = "";
}
this.suggestion.value = value;
this.suggestion.container.dataset.suggestion = value;
}
Field.prototype.update = function(value)Â {
this.input.value = value;
}
Field.prototype.validateValue = function() {
if (this.input.value === "") {
return false;
}
const matches = this.root.dropdown.items.filter((item) => {
return item.label === this.input.value;
});
return (matches.length !== 0);
}
/**
* Badge
*/
const Badge = function(root) {
this.root = root;
this.container = document.createElement("span");
this.container.classList.add(this.root.settings.classes.badge);
this.container.setAttribute("tabindex", "-1");
this.root.field.container.append(this.container);
this.container.addEventListener("click", () => {
this.root.field.focus();
});
}
Badge.prototype.update = function(value) {
if (typeof value !== "number" || value === 0) {
value = this.root.dropdown.getCheckedItems().length;
}
this.container.dataset.count = value;
}
/**
* Items
*/
const Item = function(container, index, root) {
const selectors = {
labelContainer: ":scope > label, :scope > span, :scope > a",
};
this.container = container;
this.root = root;
this.settings = Object.assign({}, this.root.settings);
this.settings.selectors = Object.assign(this.settings.selectors, selectors);
this.index = index;
this.value = this.container.dataset.value;
this.label = this.container.dataset.label;
this.labelContainer = this.container.querySelector(this.settings.selectors.labelContainer);
// Get group
this.group;
const group = container.closest(this.settings.selectors.group),
salt = Math.random();
if (group) {
if (! group.id) {
const groups = this.root.container.querySelectorAll(`${this.settings.selectors.group}:not([id])`);
group.id = `combobox-group-${getUID(salt + groups.length)}`;
}
this.group = {
id: group.id,
container: group,
};
const label = group.querySelector(this.settings.selectors.groupLabel);
if (label && label.innerHTML !== "") {
this.group.label = label.innerHTML;
}
}
// Is link
const link = this.container.querySelector("a");
if (link) {
this.href = link.href;
}
// Multiple select
if (this.root.settings.isMultiselect) {
this.checkbox = document.createElement("input");
let id = `combobox-item-${getUID(Math.random() + this.index)}`;
if (this.container.dataset.id) {
id = this.container.dataset.id;
}
this.checkbox.id = id;
this.checkbox.type = "checkbox";
this.checkbox.role = "switch";
this.checkbox.setAttribute("tabindex", "-1");
this.checkbox.value = this.value;
if (this.container.dataset.name) {
this.checkbox.name = this.container.dataset.name;
}
this.checkbox.addEventListener("focusin", () => {
this.root.dropdown.container.focus();
});
this.labelContainer.setAttribute("for", id);
const toggleMarker = document.createElement("span");
toggleMarker.classList.add(this.settings.classes.toggleMarker);
this.container.prepend(toggleMarker);
this.container.prepend(this.checkbox);
}
// Event handler
this.container.addEventListener("click", (event) => {
if (this.root.settings.isMultiselect && event.target.tagName !== "INPUT") {
return;
}
this.select();
});
}
Item.prototype.hide = function(hide) {
if (typeof hide !== "boolean") {
hide = true;
}
this.container.setAttribute("aria-hidden", hide);
}
Item.prototype.highlight = function(highlight) {
if (typeof highlight !== "boolean") {
highlight = true;
}
if (highlight) {
this.container.setAttribute("highlighted", "");
} else {
this.container.removeAttribute("highlighted");
}
}
Item.prototype.select = function() {
if (this.root.settings.isMultiselect) {
this.root.badge.update();
this.root.callback();
return;
}
this.markText();
this.root.dropdown.selectItem(this);
}
Item.prototype.markText = function(text) {
if (typeof text !== "string" ||Â text === "") {
this.labelContainer.innerHTML = this.label;
return "";
}
const regex = new RegExp(`(?<prefix>.*?)(?<excerpt>${text})(?<suffix>.*)`, "i"),
matches = this.label.match(regex);
if (! matches) {
return "";
}
this.labelContainer.innerHTML = `${matches.groups.prefix}<span class="combobox-textmarker">${matches.groups.excerpt}</span>${matches.groups.suffix}`;
return matches.groups.excerpt;
}
Item.prototype.isDisabled = function() {
return this.container.hasAttribute("aria-disabled") && this.container.getAttribute("aria-disabled") === "true";
}
Item.prototype.isHidden = function() {
return this.container.hasAttribute("aria-hidden") && this.container.getAttribute("aria-hidden") === "true";
}
Item.prototype.isHighlighted = function() {
return this.container.hasAttribute("highlighted");
}
Item.prototype.tickCheckbox = function(tick) {
if (typeof this.checkbox !== "object") {
return;
}
if (typeof tick !== "boolean") {
tick = ! this.checkbox.checked;
}
this.checkbox.checked = tick;
}
function getUID(number) {
if (typeof number !== "number") {
number = Math.random();
}
return number.toString(36).substr(2, 5);
}
function mergeString(a, b) {
return a + b.slice(a.length);
}
/**
* Return methods
*/
return {
init: init,
comboboxes: comboboxes,
}
})();
@import "_combobox.settings.psi";
@import "_combobox.settings";
@import "_combobox.styles";
%combobox {
&-item {
&::after {
inset: $_focus_border-width !important;
}
}
&[data-theme="dark"] &-item:not(:hover) &-textmarker,
[data-theme="dark"] &-item:not(:hover) &-textmarker {
background-color: $color-default-primitives-blue-700;
color: $color-default-primitives-blue-200;
}
}
@import "../field/_field.settings.psi";
@import "../field/_field.settings";
@import "../label/_label.settings.psi";
@import "../select/_select.settings.psi";
@import "../toggle/_toggle.settings.psi";
$combobox_dropdown_max-lines: 9;
$combobox_padding: $field_padding !default;
$combobox-dropdown_styles: (
font-size: $field_font-size,
line-height: $field_line-height,
padding: $_focus_border-width,
background-color: var(--field-background-color, #{$_backdrop-color}),
border: list.nth($field_border-color, 1) list.nth($field_border-width, 1) solid,
border-radius: 0 0 list.nth($field_border-radius, 1) list.nth($field_border-radius, 1),
box-shadow: var(--bs),
) !default;
$combobox-dropdown_max-height: calc(#{$combobox_dropdown_max-lines + .5} * ($field_line-height * $field_font-size + #{2 * list.nth($field_padding, 1)}) + #{2 * list.nth($field_border-width, 1) + 2 * $_focus_border-width}) !default;
$combobox-label_styles: map.merge($label_styles, (
padding-top: list.nth($field_padding, 1),
line-height: ($field_line-height * $field_font-size),
margin-inline: calc(#{list.nth($field_padding, 2)} * #{math.div($field_font-size, $_font-size--small)}),
margin-bottom: list.nth($field_padding, 1),
border-bottom: $_border-width $_border-color solid,
text-size: small,
)) !default;
$combobox-item_styles: (
padding: $combobox_padding,
) !default;
$combobox-item_states: (
default: map.merge($combobox-item_styles, (
transition-duration: $_transition-duration--out,
transition-property: (background-color, color),
)),
hover: (
cursor: pointer,
background-color: $_alt_action_background-color--hover,
color: $_alt_action_foreground-color--hover,
transition-duration: $_transition-duration,
),
active: (
),
disabled: (
color: $_text-color--disabled,
),
) !default;
$combobox_link_icon_size: 20px !default;
$combobox_link_icon_url: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="{{color}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 4.5L17 10M17 10L11.5 15.5M17 10H3"/></svg>' !default;
@import "../field/_field.settings";
@import "../label/_label.settings";
@import "../select/_select.settings";
@import "../toggle/_toggle.settings";
$combobox_padding: $field_padding !default;
$combobox-field_styles: (
background-color: $field_background-color,
) !default;
$combobox-dropdown_max-height: 10lh !default;
$combobox-dropdown_styles: (
background-color: $_page-color,
border: $field_border-color $field_border-width solid,
border-radius: $field_border-radius,
padding: $_focus_border-width,
margin-top: calc(-1 * #{$field_border-width}),
) !default;
$combobox-badge_styles: (
display: flex,
align-items: center,
justify-content: center,
text-size: small,
padding-inline: .5em,
box-sizing: content-box,
min-width: 1.5ch,
background-color: $_text-color,
color: $_background-color,
border-radius: 100vmax,
) !default;
$combobox-label_styles: map.merge($label_styles, (
padding-top: list.nth($combobox_padding, 1),
margin-inline: calc(#{list.nth($combobox_padding, 2)} * #{math.div($field_font-size, $_font-size--small)}),
border-bottom: $_border-width $_border-color solid,
text-size: small,
)) !default;
$combobox-item_styles: (
padding: $combobox_padding,
) !default;
$combobox-item_states: (
default: map.merge($combobox-item_styles, (
transition-duration: $_transition-duration--out,
transition-property: (background-color, color),
)),
hover: (
cursor: pointer,
background-color: $_action_background-color--hover,
color: $_action_foreground-color--hover,
transition-duration: $_transition-duration,
),
active: (
),
disabled: (
color: $_text-color--disabled,
),
) !default;
$combobox-textmarker_styles: (
background-color: var(--information-background-color),
color: var(--information-color),
padding-inline: .15em,
margin-inline: -.15em,
) !default;
%combobox {
@include stack-spacing();
position: relative;
user-select: none;
&-field {
@extend %field;
@include styles($combobox-field_styles);
display: flex !important;
margin-top: 0 !important;
padding: $combobox_padding;
padding-block: 0 !important;
padding-right: 0 !important;
align-items: stretch;
}
&-field:has(+ &-dropdown[aria-hidden="false"]) &-input::placeholder {
color: transparent !important;
}
&[aria-disabled="true"] &-field,
&[data-disabled="true"] &-field {
@include state-styles($field_states, disabled);
pointer-events: none;
}
@if map.get($field_states, focus) {
&:not([aria-disabled="true"]):not([data-disabled="true"]):focus-within &-field {
@include state-styles($field_states, focus);
}
}
&-trigger {
order: 99;
display: block;
width: $select_marker_width;
cursor: pointer;
transform: rotate(180deg);
&::after {
content: "";
@extend %select-marker;
}
}
&-badge {
display: flex;
align-items: center;
margin-right: list.nth($field_padding, 2);
order: -1;
cursor: pointer;
&:not([data-count]),
&[data-count="0"] {
display: none;
}
&::after {
content: attr(data-count);
@include styles($combobox-badge_styles);
}
}
&[aria-disabled="true"] &-trigger,
&[data-disabled="true"] &-trigger {
cursor: default;
}
&:has(&-dropdown[aria-hidden="true"]) &-trigger {
transform: rotate(0deg);
}
&-input-wrapper {
flex: 1 1 auto;
position: relative;
&::before { // Suggestion
content: attr(data-suggestion);
position: absolute;
padding: list.nth($combobox_padding, 1) 0 !important;
color: $_disabled-color;
}
}
&-input {
width: 100%;
position: relative;
padding: list.nth($combobox_padding, 1) 0 !important;
border: none;
outline: none;
background-color: transparent;
color: inherit;
}
&[data-select]:not([data-select="false"], [aria-disabled="true"]) &-input,
&[data-multiselect]:not([data-multiselect="false"], [aria-disabled="true"]) &-input {
&::placeholder {
color: $field_color;
}
}
&-dropdown {
position: absolute;
top: 100%;
width: 100%;
z-index: 1;
outline: none;
user-select: none;
max-height: min(calc(100vh - #{$field_height}), $combobox-dropdown_max-height);
overflow-y: auto;
@include styles($combobox-dropdown_styles);
&[aria-hidden="true"] {
visibility: hidden;
user-select: none;
}
}
&-label {
@include styles($combobox-label_styles);
}
&-separator {
&::before {
content: "";
display: block;
@include styles($combobox-label_styles);
@if map.has-key($combobox-dropdown_styles, padding) {
margin-block: map.get($combobox-dropdown_styles, padding);
padding-block: 0;
}
}
}
&-group %combobox-list:first-child {
// Show separator if there isn’t a group label
@extend %combobox-separator;
}
&-list {
margin: 0;
padding: 0;
list-style: none;
&::after {
content: attr(data-noresults);
display: none;
@include state-styles($combobox-item_states);
@include state-styles($combobox-item_states, disabled);
}
}
&-dropdown[data-results="0"] &-list::after {
display: list-item;
}
&-group[data-results="0"] {
display: none;
}
&-group[data-results="0"] {
display: none;
}
&-dropdown[data-results="0"] &-group[data-results="0"]:first-child {
display: block;
%combobox-label {
display: none;
}
}
&-item {
position: relative;
z-index: 1;
display: flex;
column-gap: .75ch;
align-items: baseline;
@include state-styles($combobox-item_states);
@include action-states($combobox-item_states);
&[aria-disabled="true"] {
pointer-events: none;
label {
cursor: default;
}
}
&[highlighted]:not(:hover) {
position: relative;
z-index: 1;
&::after {
content: "";
display: block;
position: absolute;
inset: calc(2 * $_focus_border-width);
z-index: -1;
@include styles($_focus_styles);
}
}
&[aria-hidden="true"] {
display: none;
}
> * {
&::after { // Make whole item clickable
content: "";
position: absolute;
inset: 0;
}
}
input {
@extend %toggle-input;
}
}
&[data-multiselect]:not([data-multiselect="false"]) %combobox-item[aria-disabled="true"] {
&::before {
content: "";
display: block;
@include styles($toggle_styles);
@include state-styles($toggle_states, disabled);
}
}
&-toggle {
@extend %toggle-marker;
@extend %toggle--checkbox-marker;
&:first-child { // Disabled
@include state-styles($toggle_states, disabled);
}
}
&-item input:checked ~ %combobox-toggle {
@extend %toggle--checkbox-marker--checked;
}
&-item[aria-disabled="true"] %combobox-toggle {
display: none;
}
&::after {
opacity: 1;
}
&-item:not(:hover) &-textmarker {
position: relative;
z-index: -1;
transition-duration: inherit;
@include styles($combobox-textmarker_styles);
}
&-dropdown[aria-hidden="true"] &-textmarker {
transition: none !important;
}
}
.combobox {
@extend %combobox;
&-field {
@extend %combobox-field;
}
&-trigger {
@extend %combobox-trigger;
}
&-badge {
@extend %combobox-badge;
}
&-input-wrapper {
@extend %combobox-input-wrapper;
}
&-input {
@extend %combobox-input;
}
&-dropdown {
@extend %combobox-dropdown;
}
&-group {
@extend %combobox-group;
}
&-label {
@extend %combobox-label;
}
&-list {
@extend %combobox-list;
}
&-item {
@extend %combobox-item;
}
&-toggle {
@extend %combobox-toggle;
}
&-textmarker {
@extend %combobox-textmarker;
}
}