Combobox used with a submit button. Button becomes active only when the user selects a value from the dropdown.
<!-- Combobox Spc Search -->
<div class="vi-combobox-spc-search">
<!-- Following element might not be needed if combobox part of form. -->
<form autocomplete="off" class="vi-form vi-typesystem vi-form--accent" data-validate="true" novalidate="">
<div class="form-group">
<label class="mb-5 mb-md-auto" for="control-7815b8">Search for an item in the database</label>
<div class="d-block d-md-flex">
<!-- Combobox -->
<div class="vi-combobox flex-grow-1 mr-10 mb-10 mb-md-auto" data-form-field-proxy="true">
<select class="vi-combobox__select" id="control-7815b8" name="name-a95494" placeholder="Search database">
<option disabled hidden="hidden" selected value="">Search database</option>
<option value="product-1">product 1</option>
<option value="product-2">product 2</option>
<option value="forage-loko-meh-synth-everyday-kinfolk-deep-v-street-tousled-brooklyn-distillery-vhs-kombucha-godard-authentic-celiac-roof-gluten-free-direct-trade-crucifix-90-s">Forage loko meh synth everyday kinfolk deep v. Street tousled brooklyn distillery vhs. Kombucha godard authentic. Celiac roof gluten-free direct trade crucifix 90's.</option>
</select>
</div>
<!-- Button type: solid -->
<button disabled type="submit" class="align-self-center flex-shrink-0 vi-btn-solid vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Search</button>
</div>
</div>
</form>
</div>
The following stylesheets are required to display this component.
The following javascripts are required to display this component.
Usage documentation can be found here.
Changelog
Fix
- 05 Jun 2023 - Regression: Enable button when selection made.
Changed
- 01 Jun 2023 - Update markup to correctly use components.
Added
- Initial draft