Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Input Group

Input with button

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-inputgroup

<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Placeholder">
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </button>
</div>
<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Placeholder">
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </button>
</div>
JavaScript
Copy JavaScript

Input variations

Input with icon buttons
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Placeholder">
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item">
      <e-icon icon="cog"></e-icon>
    </button>
  </e-tooltip>
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-last">
      <e-icon icon="cog"></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="Placeholder">
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item">
      <e-icon icon="cog"></e-icon>
    </button>
  </e-tooltip>
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-last">
      <e-icon icon="cog"></e-icon>
    </button>
  </e-tooltip>
</div>
JavaScript
Copy JavaScript

Input with dropdown
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Placeholder">
  <e-dropdown data-markup-class="e-btn e-btn-dropdown e-inputgroup__item e-inputgroup__item-last">
    <e-dropdown-handler class="e-btn">
      Dropdown
    </e-dropdown-handler>
    <div class="e-dropdown__content">
      <a class="e-dropdown__item">
        Select all
      </a>
      <a class="e-dropdown__item">
        Select none
      </a>
      <a class="e-dropdown__item">
        Select tracked
      </a>
      <a class="e-dropdown__item">
        Select untracked
      </a>
    </div>
  </e-dropdown>
</div>
<div class="e-inputgroup">
  <input class="e-input e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first" type="text" placeholder="Placeholder">
  <e-dropdown data-markup-class="e-btn e-btn-dropdown e-inputgroup__item e-inputgroup__item-last">
    <e-dropdown-handler class="e-btn">
      Dropdown
    </e-dropdown-handler>
    <div class="e-dropdown__content">
      <a class="e-dropdown__item">
        Select all
      </a>
      <a class="e-dropdown__item">
        Select none
      </a>
      <a class="e-dropdown__item">
        Select tracked
      </a>
      <a class="e-dropdown__item">
        Select untracked
      </a>
    </div>
  </e-dropdown>
</div>
JavaScript
Copy JavaScript
Dropdown
Select allSelect noneSelect trackedSelect untracked

Variations with more form elements

Button group
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-inputgroup">
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-first">
      <e-icon icon="cog"></e-icon>
    </button>
  </e-tooltip>
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-last">
      <e-icon icon="cog"></e-icon>
    </button>
  </e-tooltip>
</div>
<div class="e-inputgroup">
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-first">
      <e-icon icon="cog"></e-icon>
    </button>
  </e-tooltip>
  <e-tooltip content="Tooltip">
    <button class="e-btn e-btn-onlyicon e-inputgroup__item e-inputgroup__item-last">
      <e-icon icon="cog"></e-icon>
    </button>
  </e-tooltip>
</div>
JavaScript
Copy JavaScript

Emoji input with button
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<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="Placeholder">
    </e-emoji>
  </e-emojipicker>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </button>
</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="Placeholder">
    </e-emoji>
  </e-emojipicker>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </button>
</div>
JavaScript
Copy JavaScript

Select with button
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-inputgroup">
  <e-select class="e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first">
    <e-select-option selected>
      Option 01
    </e-select-option>
    <e-select-option>
      Option 02
    </e-select-option>
  </e-select>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </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 01
    </e-select-option>
    <e-select-option>
      Option 02
    </e-select-option>
  </e-select>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </button>
</div>
JavaScript
Copy JavaScript
Option 01Option 02

Multiselect with button
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-inputgroup">
  <e-multiselect class="e-inputgroup__item e-inputgroup__item-fluid e-inputgroup__item-first">
    <e-select-option selected>
      Option 01
    </e-select-option>
    <e-select-option>
      Option 02
    </e-select-option>
  </e-multiselect>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </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 01
    </e-select-option>
    <e-select-option>
      Option 02
    </e-select-option>
  </e-multiselect>
  <button class="e-btn e-inputgroup__item e-inputgroup__item-last">
    Button
  </button>
</div>
JavaScript
Copy JavaScript
Option 01Option 02

Numberinput with button
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<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
  </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
  </button>
</div>
JavaScript
Copy JavaScript