Text Box: Combo

Ready

HTML
Info
Notes


        
        <div class="txt">
      <label for="text" class="txt-l">Full name</label>
      <input type="text" value="" placeholder="Full name" class="txt-f txt-f--combo">
      <div class="sel-c sel-c--sq">
          <select class="sel-f sel-f--sq" id="text">
              <option>Danielle Cage</option>
              <option>Steve Rogers</option>
              <option>Bucky Barnes</option>
          </select>
      </div>
  </div>
  <div class="txt">
      <label for="q" class="txt-l">Quantity</label>
      <input type="text" value="4" placeholder="" class="txt-f txt-f--combo ta-r txt-f--auto" size="5">
      <div class="sel-c sel-c--sq">
          <select class="sel-f sel-f--sq" id="q">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
          </select>
      </div>
  </div>

Handle: @textbox--combo
Variants (7): Default , Combo , Textarea , Error , Implicit Input , Implicit Textarea , Input States
Preview:
- With layout
- Component only
Filesystem Path: components/base/form/textbox/textbox--combo.hbs

Fleet supports creating form elements with explicit and implicit labels. The preferred use is to utilize explicit labelling if possible. According to the W3, explicit labelling is better supported by assistive technologies.