Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Field

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

Default

Copy Pug
Copy HTML
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>

Variations

Fixwidth
Copy Pug
Copy HTML
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>

Inline
Copy Pug
Copy HTML
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>

Inline label
Copy Pug
Copy HTML
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>

Small label
Copy Pug
Copy HTML
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>

With message
Copy Pug
Copy HTML
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>
This is a message

With error message
Copy Pug
Copy HTML
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>
An error occured

With description (in a tooltip)
Copy Pug
Copy HTML
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>

Required
Copy Pug
Copy HTML
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>

Field with button(s)
Copy Pug
Copy HTML
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>

Indented
Copy Pug
Copy HTML
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>

Postfix width text after
Copy Pug
Copy HTML
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>
USD

Postfix with text before
Copy Pug
Copy HTML
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">
        In 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">Sit sunt </span></span><span class="e-field__postfix__cell"><input class="e-input" id="input08" type="text" placeholder="Placeholder"></span></div></div>
Eiusmod irure

Multiple postfixes
Copy Pug
Copy HTML
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>

Prefix
Copy Pug
Copy HTML
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>