Field
We use e-field to create vertical rhythm for form elements.
| Last update: | () |
| Message | feat(field): indented element |
| Committer: | rudywaltz |
| Version history | |
Default
<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
<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
<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
<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
<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
<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
<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
<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)
<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>Indented
<div class="e-field">
<label for="input07" class="e-field__label">
Field label
</label>
<ul class="e-list">
<li class="e-list__item">
<input id="chb1" type="radio" class="e-radio">
<label for="chb1">
Launch now
</label>
</li>
<li class="e-list__item">
<input id="chb2" type="radio" class="e-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 for="input07" class="e-field__label">Field label</label>
<ul class="e-list">
<li class="e-list__item">
<input id="chb1" type="radio" class="e-radio">
<label for="chb1">Launch now</label>
</li>
<li class="e-list__item">
<input id="chb2" type="radio" class="e-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
<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>
USD
Postfix with text before
<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">
Et do
</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">Ad labore </span></span><span class="e-field__postfix__cell">
<input id="input08" type="text" placeholder="Placeholder" class="e-input"></span></div>
</div>Nostrud ea
Multiple postfixes
<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
<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>