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

Use input to allow users to enter a single line of text. The text can be letters, numbers or punctuation.

Default

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

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

Sizes

Small
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-input-small

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

Medium
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-input-medium

<div class="doc-field">
  <label class="e-field__label" for="textarea2">
    Form input label
  </label>
  <input class="e-input e-input-medium" id="textarea2" type="text" placeholder="Placeholder">
</div>
<div class="doc-field">
  <label class="e-field__label" for="textarea2">
    Form input label
  </label>
  <input class="e-input e-input-medium" id="textarea2" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Large
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-input-large

<div class="doc-field">
  <label class="e-field__label" for="textarea2">
    Form input label
  </label>
  <input class="e-input e-input-large" id="textarea2" type="text" placeholder="Placeholder">
</div>
<div class="doc-field">
  <label class="e-field__label" for="textarea2">
    Form input label
  </label>
  <input class="e-input e-input-large" id="textarea2" type="text" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Variations

Error
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-input-error

<div class="e-field">
  <label class="e-field__label" for="input3">
    Form input label
  </label>
  <input class="e-input e-input-error" id="input3" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label" for="input3">
    Form input label
  </label>
  <input class="e-input e-input-error" id="input3" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Error with message
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-input-error

<div class="e-field">
  <label class="e-field__label" for="input10">
    Form input label
  </label>
  <input class="e-input e-input-error" id="input10" 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="input10">
    Form input label
  </label>
  <input class="e-input e-input-error" id="input10" placeholder="Placeholder">
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>
JavaScript
Copy JavaScript
An error occured

Disabled
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
:disabled, .e-input-disabled

<div class="e-field">
  <label class="e-field__label" for="input2">
    Form input label
  </label>
  <input class="e-input" id="input2" disabled placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label" for="input2">
    Form input label
  </label>
  <input class="e-input" id="input2" disabled placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

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

<div class="e-field">
  <label class="e-field__label" for="input4">
    Form input label
  </label>
  <input class="e-input e-input-code" id="input4" placeholder="Placeholder">
</div>
<div class="e-field">
  <label class="e-field__label" for="input4">
    Form input label
  </label>
  <input class="e-input e-input-code" id="input4" placeholder="Placeholder">
</div>
JavaScript
Copy JavaScript

Emoji picker
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-emojipicker

<div class="e-field">
  <label class="e-field__label" for="input6">
    Emoji input
  </label>
  <e-emojipicker class="e-emojipicker">
    <e-emoji>
      <input class="e-input" id="input6" is="e-emoji" placeholder="Placeholder">
    </e-emoji>
  </e-emojipicker>
</div>
<div class="e-field">
  <label class="e-field__label" for="input6">
    Emoji input
  </label>
  <e-emojipicker class="e-emojipicker">
    <e-emoji>
      <input class="e-input" id="input6" is="e-emoji" placeholder="Placeholder">
    </e-emoji>
  </e-emojipicker>
</div>
JavaScript
Copy JavaScript

Input

Use input to allow users to enter a single line of text. The text can be letters, numbers or punctuation.

Best practices

Inputs should:

  • Be clearly labeled to define what information a user can enter. Use only a few words.
    • The label should be aligned to the left or above the input box, in harmony with the surrounding layout.
  • Have a placeholder text - when not edited - to provide a hint or example about what should be entered.
    • The placeholder text should be set in lighter color and with cursive to be visually distinguishable from the content typed in the input.
  • Have a helper message under the input box if the placeholder text is insufficient for further instructions.
  • Show the cursor when clicking into it.
  • Allow the user to write, edit, copy, paste or select text in it.
  • Have a red asterisk after its label if it is a mandatory field.
  • Support the format of the required data.
    • E.g. Auto fill hyphens and spaces when entering a credit card number.
  • Be in an environment which makes it clear when the data is submitted.

Try to avoid:

  • Using it for large amount of text that would only fit into multiple lines. Use the Textarea instead.
  • Using it for date input. Use the Datepicker instead.
  • Asking for a limited, predefined set options. If you know all the possible options, use Select instead. It is faster to use and more accurate.
  • Forcing the users to enter data twice.