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

Field

We use e-field to create vertical rhythm for form elements.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field

<div class="e-field">
  <label class="e-field__label" for="input01">
    Field label
  </label>
  <input class="e-input" id="input01" type="text" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label" for="input02">
    Field label
  </label>
  <input class="e-input" id="input02" type="text" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label" for="input01">
    Field label
  </label>
  <input class="e-input" id="input01" type="text" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label" for="input02">
    Field label
  </label>
  <input class="e-input" id="input02" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Variations

Fixwidth
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field-fixwidth

<div class="e-field e-field-fixwidth">
  <label class="e-field__label" for="input03">
    Field label
  </label>
  <input class="e-input" id="input03" type="text" placeholder="Placeholder">
</div>
<div class="e-field e-field-fixwidth">
  <label class="e-field__label" for="input04">
    Field label
  </label>
  <input class="e-input" id="input04" type="text" placeholder="Placeholder">
</div>
<div class="e-field e-field-fixwidth">
  <label class="e-field__label" for="input03">
    Field label
  </label>
  <input class="e-input" id="input03" type="text" placeholder="Placeholder">
</div>
<div class="e-field e-field-fixwidth">
  <label class="e-field__label" for="input04">
    Field label
  </label>
  <input class="e-input" id="input04" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Inline
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field-inline

<div class="e-field e-field-inline">
  <label class="e-field__label" for="input05">
    Field label
  </label>
  <input class="e-input" id="input05" type="text" placeholder="Placeholder">
</div>
<div class="e-field e-field-inline">
  <label class="e-field__label" for="input06">
    Field label
  </label>
  <input class="e-input" id="input06" type="text" placeholder="Placeholder">
</div>
<div class="e-field e-field-inline">
  <label class="e-field__label" for="input05">
    Field label
  </label>
  <input class="e-input" id="input05" type="text" placeholder="Placeholder">
</div>
<div class="e-field e-field-inline">
  <label class="e-field__label" for="input06">
    Field label
  </label>
  <input class="e-input" id="input06" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Inline label
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__label-inline

<div class="e-field">
  <label class="e-field__label e-field__label-inline" for="input05">
    Field label
  </label>
  <input class="e-input e-input-large" id="input05" type="text" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label e-field__label-inline" for="input05">
    Field label
  </label>
  <input class="e-input e-input-large" id="input05" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Small label
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__label-small

<div class="e-field">
  <label class="e-field__label e-field__label-small" for="input05">
    Field label
  </label>
  <input class="e-input" id="input05" type="text" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label e-field__label-small" for="input05">
    Field label
  </label>
  <input class="e-input" id="input05" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

With message
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-field__message

<div class="e-field">
  <label class="e-field__label" for="input3">
    Field label
  </label>
  <input class="e-input" id="input3" type="text" placeholder="Placeholder">
  <span class="e-field__message">
    This is a message
  </span>
</div>
<div class="e-field">
  <label class="e-field__label" for="input3">
    Field label
  </label>
  <input class="e-input" id="input3" type="text" placeholder="Placeholder">
  <span class="e-field__message">
    This is a message
  </span>
</div>
JavaScript
Copy JavaScript
This is a message

With error message
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-field__message-error

<div class="e-field">
  <label class="e-field__label" for="input3">
    Field label
  </label>
  <input class="e-input e-input-error" id="input3" type="text" placeholder="Placeholder">
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>
<div class="e-field">
  <label class="e-field__label" for="input3">
    Field label
  </label>
  <input class="e-input e-input-error" id="input3" type="text" placeholder="Placeholder">
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>
JavaScript
Copy JavaScript
An error occured

With description (in a tooltip)
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-field">
  <label class="e-field__label" for="input">
    Field label
    <e-tooltip content="tooltip content" type="helper"></e-tooltip>
  </label>
  <input class="e-input" id="input3" type="text" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label" for="input">
    Field label
    <e-tooltip content="tooltip content" type="helper"></e-tooltip>
  </label>
  <input class="e-input" id="input3" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Required
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__label-required

<div class="e-field">
  <label class="e-field__label e-field__label-required" for="input">
    Field label
  </label>
  <input class="e-input" id="input3" type="text" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label e-field__label-required" for="input">
    Field label
  </label>
  <input class="e-input" id="input3" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Field with button(s)
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__postfix__cell-shortsticky

<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell">
      <input class="e-input" id="input07" type="text" placeholder="Placeholder">
    </span>
    <span class="e-field__postfix__cell e-field__postfix__cell-short e-field__postfix__cell-shortsticky">
      <button class="e-btn">
        Button
      </button>
      <button class="e-btn e-btn-onlyicon">
        <e-icon icon="cog"></e-icon>
      </button>
    </span>
  </div>
</div>
<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell">
      <input class="e-input" id="input07" type="text" placeholder="Placeholder">
    </span>
    <span class="e-field__postfix__cell e-field__postfix__cell-short e-field__postfix__cell-shortsticky">
      <button class="e-btn">
        Button
      </button>
      <button class="e-btn e-btn-onlyicon">
        <e-icon icon="cog"></e-icon>
      </button>
    </span>
  </div>
</div>
JavaScript
Copy JavaScript

Indented checkbox
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-field__indented.e-field__indented-checkbox

<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input class="e-radio" id="chb1" type="radio">
      <label for="chb1">
        Launch now
      </label>
    </li>
    <li class="e-list__item">
      <input class="e-radio" id="chb2" type="radio">
      <label for="chb2">
        Launch at
      </label>
    </li>
    <li class="e-list__item">
      <div class="e-field__indented e-field__indented-checkbox">
        <e-datetimepicker inline></e-datetimepicker>
      </div>
    </li>
  </ul>
</div>
<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <input class="e-radio" id="chb1" type="radio">
      <label for="chb1">
        Launch now
      </label>
    </li>
    <li class="e-list__item">
      <input class="e-radio" id="chb2" type="radio">
      <label for="chb2">
        Launch at
      </label>
    </li>
    <li class="e-list__item">
      <div class="e-field__indented e-field__indented-checkbox">
        <e-datetimepicker inline></e-datetimepicker>
      </div>
    </li>
  </ul>
</div>
JavaScript
Copy JavaScript

Indented switch
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-field__indented.e-field__indented-switch

<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <div class="e-switch">
        <input class="e-switch__input" id="switch1" type="checkbox">
        <label class="e-switch__toggle" for="switch1"></label>
      </div>
      <label class="e-field__label-inline" for="switch1">
        Launch now
      </label>
    </li>
    <li class="e-list__item">
      <div class="e-switch">
        <input class="e-switch__input" id="switch2" type="checkbox">
        <label class="e-switch__toggle" for="switch2"></label>
      </div>
      <label class="e-field__label-inline" for="switch2">
        Launch at
      </label>
    </li>
    <li class="e-list__item">
      <div class="e-field__indented e-field__indented-switch">
        <e-datetimepicker inline></e-datetimepicker>
      </div>
    </li>
  </ul>
</div>
<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <div class="e-switch">
        <input class="e-switch__input" id="switch1" type="checkbox">
        <label class="e-switch__toggle" for="switch1"></label>
      </div>
      <label class="e-field__label-inline" for="switch1">
        Launch now
      </label>
    </li>
    <li class="e-list__item">
      <div class="e-switch">
        <input class="e-switch__input" id="switch2" type="checkbox">
        <label class="e-switch__toggle" for="switch2"></label>
      </div>
      <label class="e-field__label-inline" for="switch2">
        Launch at
      </label>
    </li>
    <li class="e-list__item">
      <div class="e-field__indented e-field__indented-switch">
        <e-datetimepicker inline></e-datetimepicker>
      </div>
    </li>
  </ul>
</div>
JavaScript
Copy JavaScript

Postfix width text after
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__postfix__text

<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell">
      <input class="e-input" id="input07" type="text" placeholder="Placeholder">
    </span>
    <span class="e-field__postfix__cell e-field__postfix__cell-short">
      <span class="e-field__postfix__text">
        USD
      </span>
    </span>
  </div>
</div>
<div class="e-field">
  <label class="e-field__label" for="input07">
    Field label
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell">
      <input class="e-input" id="input07" type="text" placeholder="Placeholder">
    </span>
    <span class="e-field__postfix__cell e-field__postfix__cell-short">
      <span class="e-field__postfix__text">
        USD
      </span>
    </span>
  </div>
</div>
JavaScript
Copy JavaScript
USD

Postfix with text before
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__postfix__text

<div class="e-field">
  <label class="e-field__label" for="input08">
    Field label
  </label>
  <div class="e-field__postfix e-field__postfix-reverse">
    <span class="e-field__postfix__cell e-field__postfix__cell-short">
      <span class="e-field__postfix__text">
        Nostrud consectetur 
      </span>
    </span>
    <span class="e-field__postfix__cell">
      <input class="e-input" id="input08" type="text" placeholder="Placeholder">
    </span>
  </div>
</div>
<div class="e-field">
  <label class="e-field__label" for="input08">
    Field label
  </label>
  <div class="e-field__postfix e-field__postfix-reverse">
    <span class="e-field__postfix__cell e-field__postfix__cell-short">
      <span class="e-field__postfix__text">
        Adipiscing elit 
      </span>
    </span>
    <span class="e-field__postfix__cell">
      <input class="e-input" id="input08" type="text" placeholder="Placeholder">
    </span>
  </div>
</div>
JavaScript
Copy JavaScript
Sunt do

Multiple postfixes
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__postfix__cell-short

<div class="e-field">
  <label class="e-field__label" for="input09">
    Phone number example
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell e-field__postfix__cell-short">
      <span class="e-field__label e-field__label-inline">
        <e-icon icon="plus" type="table"></e-icon>
        <input class="e-input e-input-small" id="input09" type="text" placeholder="36">
      </span>
    </span>
    <span class="e-field__postfix__cell">
      <input class="e-input" type="text" placeholder="12345567">
    </span>
  </div>
</div>
<div class="e-field">
  <label class="e-field__label" for="input09">
    Phone number example
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell e-field__postfix__cell-short">
      <span class="e-field__label e-field__label-inline">
        <e-icon icon="plus" type="table"></e-icon>
        <input class="e-input e-input-small" id="input09" type="text" placeholder="36">
      </span>
    </span>
    <span class="e-field__postfix__cell">
      <input class="e-input" type="text" placeholder="12345567">
    </span>
  </div>
</div>
JavaScript
Copy JavaScript

Prefix
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-field__prefix

<div class="e-field">
  <label class="e-field__label" for="input10">
    Field label
  </label>
  <div class="e-field__prefix">
    <span class="e-field__prefix__icon">
      <e-icon icon="calendar-o"></e-icon>
    </span>
    <input class="e-input" id="input10" type="text" placeholder="mm/dd/yyyy">
  </div>
</div>
<div class="e-field">
  <label class="e-field__label" for="input10">
    Field label
  </label>
  <div class="e-field__prefix">
    <span class="e-field__prefix__icon">
      <e-icon icon="calendar-o"></e-icon>
    </span>
    <input class="e-input" id="input10" type="text" placeholder="mm/dd/yyyy">
  </div>
</div>
JavaScript
Copy JavaScript