Link copied!

Input Group Examples

<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Type text here">
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button Label
  </button>
</div>
<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Type text here">
  <e-tooltip content="Icon Button Label">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item">
      <e-icon icon="pencil"></e-icon>
    </button>
  </e-tooltip>
  <e-tooltip content="Icon Button Label">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-last">
      <e-icon icon="trash-o"></e-icon>
    </button>
  </e-tooltip>
</div>
<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Type text here">
  <e-dropdown data-markup-class="e-btn e-btn-dropdown e-inputgroup__item e-inputgroup__item-last">
    <e-dropdown-handler class="e-btn">
      Dropdown Label
    </e-dropdown-handler>
    <div class="e-dropdown__content">
      <a class="e-dropdown__item">
        Item One
      </a>
      <a class="e-dropdown__item">
        Item Two
      </a>
      <a class="e-dropdown__item">
        Item Three
      </a>
      <a class="e-dropdown__item">
        Item Four
      </a>
    </div>
  </e-dropdown>
</div>
<div class="e-inputgroup">
  <e-tooltip content="Icon Button Label">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-first">
      <e-icon icon="pencil"></e-icon>
    </button>
  </e-tooltip>
  <e-tooltip content="Icon Button Label">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-last">
      <e-icon icon="trash-o"></e-icon>
    </button>
  </e-tooltip>
</div>
<div class="e-inputgroup">
  <e-emojipicker class="e-emojipicker e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first">
    <e-emoji>
      <input class="e-input" type="text" placeholder="Type text here">
    </e-emoji>
  </e-emojipicker>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button Label
  </button>
</div>
<div class="e-inputgroup">
  <e-select class="e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first">
    <e-select-option selected>
      Option One
    </e-select-option>
    <e-select-option>
      Option Two
    </e-select-option>
  </e-select>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button Label
  </button>
</div>
<div class="e-inputgroup">
  <e-multiselect class="e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first">
    <e-select-option selected>
      Option One
    </e-select-option>
    <e-select-option>
      Option Two
    </e-select-option>
  </e-multiselect>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button Label
  </button>
</div>
<div class="e-inputgroup">
  <e-numberinput class="e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first"></e-numberinput>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button Label
  </button>
</div>
<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Type text here">
  <div class="e-inputgroup__postfix e-inputgroup__item e-inputgroup__item-last">USD</div>
</div>