UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Input

Last update:
()
Message doc(input): removed misplaced numberinput from input doc
Committer: Tamás Bíró
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
.e-input 

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


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

Sizes

Small
Copy Jade
Copy HTML
Show code
Hide code
.e-input-small 

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


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

Medium
Copy Jade
Copy HTML
Show code
Hide code
.e-input-medium 

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


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

Large
Copy Jade
Copy HTML
Show code
Hide code
.e-input-large 

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


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

Variations

Error
Copy Jade
Copy HTML
Show code
Hide code
.e-input-error 

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


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

Error with message
Copy Jade
Copy HTML
Show code
Hide code
.e-input-error 

<div class="e-field">
  <label for="input10" class="e-field__label">
    Form input label
  </label>
  <input id="input10" placeholder="Placeholder" class="e-input e-input-error">
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>


                                  <div class="e-field">
                                    <label for="input10" class="e-field__label">Form input label</label>
                                    <input id="input10" placeholder="Placeholder" class="e-input e-input-error"><span class="e-field__message e-field__message-error">An error occured</span>
                                  </div>
An error occured

Disabled
Copy Jade
Copy HTML
Show code
Hide code
:disabled, .e-input-disabled 

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


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

Code
Copy Jade
Copy HTML
Show code
Hide code
.e-input-code 

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


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

Emoji
Copy Jade
Copy HTML
Show code
Hide code
is="e-emoji" 

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


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

Emoji picker
Copy Jade
Copy HTML
Show code
Hide code
e-emojipicker 

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


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