Link copied!

Examples

<div class="e-field">
  <label class="e-field__label" for="input01">
    Field Label
  </label>
  <input class="e-input" id="input01" type="text" placeholder="Type text here">
</div>
<div class="e-field">
  <label class="e-field__label" for="input02">
    Field Label
  </label>
  <input class="e-input" id="input02" type="text" placeholder="Type text here">
</div>
<div class="e-field e-field-fixwidth">
  <label class="e-field__label" for="input01">
    Field Label
  </label>
  <input class="e-input" id="input01" type="text" placeholder="Type text here">
</div>
<div class="e-field e-field-fixwidth">
  <label class="e-field__label" for="input02">
    Field Label
  </label>
  <input class="e-input" id="input02" type="text" placeholder="Type text here">
</div>
<div class="e-field e-field-inline">
  <label class="e-field__label" for="input01">
    Field Label
  </label>
  <input class="e-input" id="input01" type="text" placeholder="Type text here">
</div>
<div class="e-field e-field-inline">
  <label class="e-field__label" for="input02">
    Field Label
  </label>
  <input class="e-input" id="input02" type="text" placeholder="Type text here">
</div>
<div class="e-field">
  <label class="e-field__label e-field__label-inline" for="input01">
    Field Label
  </label>
  <input class="e-input e-input-large" id="input01" type="text" placeholder="Type text here">
</div>
<div class="e-field">
  <label class="e-field__label" for="input-field">
    Field Label
  </label>
  <input class="e-input" id="input-field" type="text" placeholder="Type text here">
  <span class="e-field__message">
    This is a message.
  </span>
</div>

<div class="e-field">
  <label class="e-field__label" for="input-field-error">
    Error Field Label
  </label>
  <input class="e-input e-input-error" id="input-field-error" type="text" placeholder="Type text here">
  <span class="e-field__message e-field__message-error">
    An error occured, please try again.
  </span>
</div>

<div class="e-field">
  <label class="e-field__label" for="input-field-warning">
    Warning Field Label
  </label>
  <input class="e-input" id="input-field-warning" type="text" placeholder="Type text here">
  <span class="e-field__message e-field__message-warning">
    Make sure to double check the contents.
  </span>
</div>

<div class="e-field">
  <label class="e-field__label" for="input-field-success">
    Success Field Label
  </label>
  <input class="e-input" id="input-field-success" type="text" placeholder="Type text here">
  <span class="e-field__message e-field__message-success">
    Everything looks good!
  </span>
</div>

<div class="e-field">
  <label class="e-field__label" for="input-field-info">
    Info Field Label
  </label>
  <input class="e-input" id="input-field-info" type="text" placeholder="Type text here">
  <span class="e-field__message e-field__message-info">
    This is some important information.
  </span>
</div>

<div class="e-field">
  <label class="e-field__label" for="input-field-faint">
    Faint Field Label
  </label>
  <input class="e-input" id="input-field-faint" type="text" placeholder="Type text here">
  <span class="e-field__message e-field__message-faint">
    This is just some complementary info here.
  </span>
</div>
<div class="e-field">
  <label class="e-field__label" for="input01">
    Field Label
    <e-tooltip content="Tooltip content goes here" type="helper"></e-tooltip>
  </label>
  <input class="e-input" id="input01" type="text" placeholder="Type text here">
</div>
<div class="e-field">
  <label class="e-field__label e-field__label-required" for="input-required">
    Required Field
  </label>
  <input class="e-input" id="input-required" type="text" placeholder="Type text here">
</div>

<div class="e-field">
  <label class="e-field__label" for="input-optional">
    Optional Field
    <span class="e-field__label_optional">(optional)</span>
  </label>
  <input class="e-input" id="input-optional" type="text" placeholder="Type text here">
</div>
<div class="e-field">
  <label class="e-field__label" for="input07">
    Field Label
  </label>
  <ul class="e-list">
    <li class="e-list__item">
      <e-radio name="r1" label="Launch Now"></e-radio>
    </li>
    <li class="e-list__item">
      <e-radio name="r1" label="Launch at Given Time"></e-radio>
    </li>
    <li class="e-list__item">
      <div class="e-field__indented e-field__indented-checkbox">
        <e-datetime inline></e-datetime>
      </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">
      <e-switch label="Launch Now"></e-switch>
    </li>
    <li class="e-list__item">
      <e-switch label="Launch at Given Time"></e-switch>
    </li>
    <li class="e-list__item">
      <div class="e-field__indented e-field__indented-switch">
        <e-datetime inline></e-datetime>
      </div>
    </li>
  </ul>
</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="Type date here">
  </div>
</div>