Font Face
Teva Sans Latin

Drafts & Templates
PBS Templates

Primitives & components context

Primitives & components: Teva Global

Combobox Spc Search

v0.0.0

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>

Stylesheets #

The following stylesheets are required to display this component.


JavaScript #

The following javascripts are required to display this component.


Usage documentation #

Usage documentation can be found here.


Changelog #

Changelog

Fix

  • 05 Jun 2023 - Regression: Enable button when selection made.

Changed

  • 01 Jun 2023 - Update markup to correctly use components.

Added

  • Initial draft