Field

Default
e-field 

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


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

Variations

Fixwidth
e-field-fixwidth 

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


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

Inline
e-field-inline 

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


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

Inline label
e-field__label-inline 

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


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

Small label
e-field__label-small 

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


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

With message
.e-field__message

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


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

With error message
.e-field__message-error

An error occured 
<div class="e-field">
  <label for="input3" class="e-field__label">
    Field label
  </label>
  <input id="input3" type="text" 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="input3" class="e-field__label">Field label</label>
                            <input id="input3" type="text" placeholder="Placeholder" class="e-input e-input-error"><span class="e-field__message e-field__message-error">An error occured</span>
                          </div>

With description (in a tooltip) 

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


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

Required
e-field__label-required 

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


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

Field with button(s)
e-field__postfix__cell-shortsticky 

<div class="e-field">
  <label for="input07" class="e-field__label">
    Field label
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell">
      <input id="input07" type="text" placeholder="Placeholder" class="e-input">
    </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 for="input07" class="e-field__label">Field label</label>
                            <div class="e-field__postfix"><span class="e-field__postfix__cell">
                                <input id="input07" type="text" placeholder="Placeholder" class="e-input"></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>

Postfix width text after
e-field__postfix__text

USD
<div class="e-field">
  <label for="input07" class="e-field__label">
    Field label
  </label>
  <div class="e-field__postfix">
    <span class="e-field__postfix__cell">
      <input id="input07" type="text" placeholder="Placeholder" class="e-input">
    </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 for="input07" class="e-field__label">Field label</label>
                            <div class="e-field__postfix"><span class="e-field__postfix__cell">
                                <input id="input07" type="text" placeholder="Placeholder" class="e-input"></span><span class="e-field__postfix__cell e-field__postfix__cell-short"><span class="e-field__postfix__text">USD</span></span></div>
                          </div>

Postfix with text before
e-field__postfix__text

Labore dolor 
<div class="e-field">
  <label for="input08" class="e-field__label">
    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">
        Nisi sit 
      </span>
    </span>
    <span class="e-field__postfix__cell">
      <input id="input08" type="text" placeholder="Placeholder" class="e-input">
    </span>
  </div>
</div>


                          <div class="e-field">
                            <label for="input08" class="e-field__label">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">Quis ullamco </span></span><span class="e-field__postfix__cell">
                                <input id="input08" type="text" placeholder="Placeholder" class="e-input"></span></div>
                          </div>

Multiple postfixes
e-field__postfix__cell-short 

<div class="e-field">
  <label for="input09" class="e-field__label">
    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 id="input09" type="text" placeholder="36" class="e-input e-input-small">
      </span>
    </span>
    <span class="e-field__postfix__cell">
      <input type="text" placeholder="12345567" class="e-input">
    </span>
  </div>
</div>


                          <div class="e-field">
                            <label for="input09" class="e-field__label">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 id="input09" type="text" placeholder="36" class="e-input e-input-small"></span></span><span class="e-field__postfix__cell">
                                <input type="text" placeholder="12345567" class="e-input"></span></div>
                          </div>

Prefix
e-field__prefix 

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


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

Field

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

Last update

Message feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history