Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Fieldset

Fieldset
Copy Pug
Copy HTML
Show code
Hide code

<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart">
        Veniam lorem quis voluptate excepteur 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        Proident duis in labore culpa 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Dolor in incididunt ut duis 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Enim ut anim ullamco id 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Occaecat velit laborum sunt in 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Commodo in lorem eiusmod cupidatat 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Commodo elit irure id fugiat 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Sed excepteur tempor cillum incididunt 
      </div>
    </div>
  </div>
</fieldset>

<fieldset class="e-fieldset"><div class="e-row"><div class="e-col-12"><div class="e-fieldset__item e-fieldset__item-chart">Anim ea ad tempor incididunt </div><div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">Ad dolor aliquip cillum lorem </div><div class="e-fieldset__item e-fieldset__item-chart">Do do do cupidatat veniam </div><div class="e-fieldset__item e-fieldset__item-chart">Qui elit veniam aute elit </div><div class="e-fieldset__item e-fieldset__item-chart">Reprehenderit ullamco ut aliqua ut </div><div class="e-fieldset__item e-fieldset__item-chart">Minim voluptate ex magna ipsum </div><div class="e-fieldset__item e-fieldset__item-chart">Qui irure labore ut occaecat </div><div class="e-fieldset__item e-fieldset__item-chart">Pariatur deserunt lorem non cupidatat </div></div></div></fieldset>
Eiusmod ex cillum excepteur esse
Occaecat id aute amet duis
Cupidatat occaecat in irure cupidatat
Consectetur minim aliqua anim cillum
Mollit duis nisi ut eu
Voluptate fugiat dolor sunt velit
Tempor ipsum dolore cupidatat ad
Consectetur aliquip veniam culpa non

Fieldset in textarea
Copy Pug
Copy HTML
Show code
Hide code

<div class="e-field">
  <div class="e-grid">
    <div class="e-cell e-cell-auto e-cell-medium e-cell-border_left e-cell-border_top e-cell-border_bottom e-cell-border_right">
      <div class="e-field">
        <label class="e-field__label">
          title
        </label>
        <div class="e-grid">
          <div class="e-cell e-cell-auto">
            <input class="e-input">
          </div>
          <div class="e-cell e-cell-sticky">
            <a class="e-btn e-btn-onlyicon">
              <e-icon icon="user"></e-icon>
            </a>
          </div>
        </div>
        <span class="e-field__message">
          Title length: 0
        </span>
      </div>
      <label class="e-field__label">
        Body
        <div class="e-toolbox"></div>
      </label>
      <div class="e-toolbox__content">
        <div class="e-toolbox__actions">
          <e-tooltip class="float-left" content="tooltip content">
            <div class="e-btn e-btn-onlyicon e-svgclickfix">
              <e-icon icon="user"></e-icon>
            </div>
          </e-tooltip>
        </div>
        <e-tooltip class="float-right" content="tooltip content">
          <div class="text-color-warning">
            <e-icon icon="warning" color="warning" type="table"></e-icon>
            <strong>
              150/140
            </strong>
          </div>
        </e-tooltip>
      </div>
      <textarea class="e-input e-input-textarea"></textarea>
      <span class="e-field__message">
        Body length: 0
      </span>
    </div>
    <div class="e-cell e-cell-sticky">
      <div class="e-fieldset e-fieldset-sidebar" style="height:286px;">
        <div class="e-fieldset__item e-fieldset__item-chart">
          English -
          <span class="text-color-shade">
            &nbsp;32%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
          Russian -
          <span class="text-color-shade">
            &nbsp;7.5%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Deutsch -
          <span class="text-color-shade">
            &nbsp;2.6%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          French -
          <span class="text-color-shade">
            &nbsp;56%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Turkish -
          <span class="text-color-shade">
            &nbsp;86%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Hungarian -
          <span class="text-color-shade">
            &nbsp;12%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Spanish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Swedish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
      </div>
      <a class="e-btn e- e-btn-fieldset">
        <e-icon icon="cog"></e-icon>
        Manage Language
      </a>
    </div>
  </div>
</div>

<div class="e-field"><div class="e-grid"><div class="e-cell e-cell-auto e-cell-medium e-cell-border_left e-cell-border_top e-cell-border_bottom e-cell-border_right"><div class="e-field"><label class="e-field__label">title</label><div class="e-grid"><div class="e-cell e-cell-auto"><input class="e-input"></div><div class="e-cell e-cell-sticky"><a class="e-btn e-btn-onlyicon"><e-icon icon="user"></e-icon></a></div></div><span class="e-field__message">Title length: 0</span></div><label class="e-field__label">Body<div class="e-toolbox"></div></label><div class="e-toolbox__content"><div class="e-toolbox__actions"><e-tooltip class="float-left" content="tooltip content"><div class="e-btn e-btn-onlyicon e-svgclickfix"><e-icon icon="user"></e-icon></div></e-tooltip></div><e-tooltip class="float-right" content="tooltip content"><div class="text-color-warning"><e-icon icon="warning" color="warning" type="table"></e-icon><strong>150/140</strong></div></e-tooltip></div><textarea class="e-input e-input-textarea"></textarea><span class="e-field__message">Body length: 0</span></div><div class="e-cell e-cell-sticky"><div class="e-fieldset e-fieldset-sidebar" style="height:286px;"><div class="e-fieldset__item e-fieldset__item-chart">English -<span class="text-color-shade">&nbsp;32%</span></div><div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">Russian -<span class="text-color-shade">&nbsp;7.5%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Deutsch -<span class="text-color-shade">&nbsp;2.6%</span></div><div class="e-fieldset__item e-fieldset__item-chart">French -<span class="text-color-shade">&nbsp;56%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Turkish -<span class="text-color-shade">&nbsp;86%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Hungarian -<span class="text-color-shade">&nbsp;12%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Spanish -<span class="text-color-shade">&nbsp;0.13%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Swedish -<span class="text-color-shade">&nbsp;0.13%</span></div></div><a class="e-btn e- e-btn-fieldset"><e-icon icon="cog"></e-icon>Manage Language</a></div></div></div>
Title length: 0
150/140
Body length: 0
English - 32%
Russian - 7.5%
Deutsch - 2.6%
French - 56%
Turkish - 86%
Hungarian - 12%
Spanish - 0.13%
Swedish - 0.13%
Manage Language

Fieldset in textarea
Copy Pug
Copy HTML
Show code
Hide code

<div class="e-field">
  <div class="e-field__label">
    Label
  </div>
  <div class="e-toolbox">
    <div class="e-toolbox__content">
      <div class="e-toolbox__actions">
        <e-tooltip class="float-left" content="tooltip content">
          <div class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="user"></e-icon>
          </div>
        </e-tooltip>
      </div>
      <e-tooltip class="float-right" content="tooltip content">
        <div class="text-color-warning">
          <e-icon icon="warning" color="warning" type="table"></e-icon>
          <strong>
            150/140
          </strong>
        </div>
      </e-tooltip>
    </div>
  </div>
  <div class="e-flex e-flex-sticky">
    <textarea class="e-flex__item e-flex__item-auto e-input e-input-textarea e-input-auto_height" placeholder="Textarea placeholder"></textarea>
    <div class="e-flex__item">
      <div class="e-fieldset e-fieldset-sidebar">
        <div class="e-fieldset__item e-fieldset__item-chart">
          English -
          <span class="text-color-shade">
            &nbsp;32%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
          Russian -
          <span class="text-color-shade">
            &nbsp;7.5%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Deutsch -
          <span class="text-color-shade">
            &nbsp;2.6%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          French -
          <span class="text-color-shade">
            &nbsp;56%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Turkish -
          <span class="text-color-shade">
            &nbsp;86%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Hungarian -
          <span class="text-color-shade">
            &nbsp;12%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Spanish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Swedish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
      </div>
      <a class="e-btn e- e-btn-fieldset">
        <e-icon icon="cog"></e-icon>
        Manage Language
      </a>
    </div>
  </div>
</div>

<div class="e-field"><div class="e-field__label">Label</div><div class="e-toolbox"><div class="e-toolbox__content"><div class="e-toolbox__actions"><e-tooltip class="float-left" content="tooltip content"><div class="e-btn e-btn-onlyicon e-svgclickfix"><e-icon icon="user"></e-icon></div></e-tooltip></div><e-tooltip class="float-right" content="tooltip content"><div class="text-color-warning"><e-icon icon="warning" color="warning" type="table"></e-icon><strong>150/140</strong></div></e-tooltip></div></div><div class="e-flex e-flex-sticky"><textarea class="e-flex__item e-flex__item-auto e-input e-input-textarea e-input-auto_height" placeholder="Textarea placeholder"></textarea><div class="e-flex__item"><div class="e-fieldset e-fieldset-sidebar"><div class="e-fieldset__item e-fieldset__item-chart">English -<span class="text-color-shade">&nbsp;32%</span></div><div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">Russian -<span class="text-color-shade">&nbsp;7.5%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Deutsch -<span class="text-color-shade">&nbsp;2.6%</span></div><div class="e-fieldset__item e-fieldset__item-chart">French -<span class="text-color-shade">&nbsp;56%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Turkish -<span class="text-color-shade">&nbsp;86%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Hungarian -<span class="text-color-shade">&nbsp;12%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Spanish -<span class="text-color-shade">&nbsp;0.13%</span></div><div class="e-fieldset__item e-fieldset__item-chart">Swedish -<span class="text-color-shade">&nbsp;0.13%</span></div></div><a class="e-btn e- e-btn-fieldset"><e-icon icon="cog"></e-icon>Manage Language</a></div></div></div>
Label
150/140
English - 32%
Russian - 7.5%
Deutsch - 2.6%
French - 56%
Turkish - 86%
Hungarian - 12%
Spanish - 0.13%
Swedish - 0.13%
Manage Language

Fieldset

Copy Pug
Copy HTML
Show code
Hide code

<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input class="e-checkbox e-checkbox-impressions" id="legend-impressions" type="checkbox" checked="checked" data-id="0">
        <label title="Impressions" for="legend-impressions">
          Impressions
        </label>
        <div class="e-fieldset__item__indicator background-color-impressions"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-reach" type="checkbox" data-id="1">
        <label title="Reach" for="legend-reach">
          Reach
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input class="e-checkbox e-checkbox-frequency" id="legend-frequency" type="checkbox" data-id="2" checked>
        <label title="Frequency" for="legend-frequency">
          Frequency
        </label>
        <div class="e-fieldset__item__indicator background-color-frequency"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-socialreach" type="checkbox" data-id="3">
        <label title="Social reach" for="legend-socialreach">
          Social reach
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-clicks" type="checkbox" data-id="4">
        <label title="Clicks" for="legend-clicks">
          Clicks
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-likes" type="checkbox" data-id="5">
        <label title="Likes" for="legend-likes">
          Likes
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-comments" type="checkbox" data-id="6">
        <label title="Comments" for="legend-comments">
          Comments
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-pageclick" type="checkbox" data-id="7">
        <label title="Page click" for="legend-pageclick">
          Page click
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-conversions" type="checkbox" data-id="8">
        <label title="Conversions" for="legend-conversions">
          Conversions
        </label>
        <div class="e-fieldset__item__indicator"></div></div></div></div>
</fieldset>

<fieldset class="e-fieldset"><div class="e-row"><div class="e-col-12"><div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active"><input class="e-checkbox e-checkbox-impressions" id="legend-impressions" type="checkbox" checked="checked" data-id="0"><label title="Impressions" for="legend-impressions">Impressions</label><div class="e-fieldset__item__indicator background-color-impressions"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-reach" type="checkbox" data-id="1"><label title="Reach" for="legend-reach">Reach</label><div class="e-fieldset__item__indicator"></div></div><div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active"><input class="e-checkbox e-checkbox-frequency" id="legend-frequency" type="checkbox" data-id="2" checked=""><label title="Frequency" for="legend-frequency">Frequency</label><div class="e-fieldset__item__indicator background-color-frequency"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-socialreach" type="checkbox" data-id="3"><label title="Social reach" for="legend-socialreach">Social reach</label><div class="e-fieldset__item__indicator"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-clicks" type="checkbox" data-id="4"><label title="Clicks" for="legend-clicks">Clicks</label><div class="e-fieldset__item__indicator"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-likes" type="checkbox" data-id="5"><label title="Likes" for="legend-likes">Likes</label><div class="e-fieldset__item__indicator"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-comments" type="checkbox" data-id="6"><label title="Comments" for="legend-comments">Comments</label><div class="e-fieldset__item__indicator"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-pageclick" type="checkbox" data-id="7"><label title="Page click" for="legend-pageclick">Page click</label><div class="e-fieldset__item__indicator"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-conversions" type="checkbox" data-id="8"><label title="Conversions" for="legend-conversions">Conversions</label><div class="e-fieldset__item__indicator"></div></div></div></div></fieldset>

Fieldset with legend

Copy Pug
Copy HTML
Show code
Hide code

<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input class="e-checkbox e-checkbox-impressions" id="legend-impressions2" type="checkbox" checked="checked" data-id="0">
        <label class="e-legend" title="Impressions" for="legend-impressions2">
          <div class="e-legend__value text-color-impressions">
            34.7K&nbsp;
            <small>
              18K
            </small>
          </div>
          <div class="e-legend__title">
            Impressions
            <e-tooltip content="tooltip content" type="helper"></e-tooltip>
          </div>
        </label>
        <div class="e-fieldset__item__indicator background-color-impressions"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input class="e-checkbox" id="legend-reach2" type="checkbox" data-id="1">
        <label class="e-legend" title="Reach" for="legend-reach2">
          <div class="e-legend__value">
            24.1K&nbsp;
            <small>
              11K
            </small>
          </div>
          <div class="e-legend__title">
            Reach
            <e-tooltip content="tooltip content" type="helper"></e-tooltip>
          </div>
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input class="e-checkbox e-checkbox-frequency" id="legend-frequency2" type="checkbox" data-id="2" checked>
        <label class="e-legend" title="Frequency" for="legend-frequency2">
          <div class="e-legend__value text-color-frequency">
            18.3K&nbsp;
            <small>
              8K
            </small>
          </div>
          <div class="e-legend__title">
            Frequency
            <e-tooltip content="tooltip content" type="helper"></e-tooltip>
          </div>
        </label>
        <div class="e-fieldset__item__indicator background-color-frequency"></div></div></div></div>
</fieldset>

<fieldset class="e-fieldset"><div class="e-row"><div class="e-col-12"><div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active"><input class="e-checkbox e-checkbox-impressions" id="legend-impressions2" type="checkbox" checked="checked" data-id="0"><label class="e-legend" title="Impressions" for="legend-impressions2"><div class="e-legend__value text-color-impressions">34.7K&nbsp;<small>18K</small></div><div class="e-legend__title">Impressions<e-tooltip content="tooltip content" type="helper"></e-tooltip></div></label><div class="e-fieldset__item__indicator background-color-impressions"></div></div><div class="e-fieldset__item e-fieldset__item-chart"><input class="e-checkbox" id="legend-reach2" type="checkbox" data-id="1"><label class="e-legend" title="Reach" for="legend-reach2"><div class="e-legend__value">24.1K&nbsp;<small>11K</small></div><div class="e-legend__title">Reach<e-tooltip content="tooltip content" type="helper"></e-tooltip></div></label><div class="e-fieldset__item__indicator"></div></div><div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active"><input class="e-checkbox e-checkbox-frequency" id="legend-frequency2" type="checkbox" data-id="2" checked=""><label class="e-legend" title="Frequency" for="legend-frequency2"><div class="e-legend__value text-color-frequency">18.3K&nbsp;<small>8K</small></div><div class="e-legend__title">Frequency<e-tooltip content="tooltip content" type="helper"></e-tooltip></div></label><div class="e-fieldset__item__indicator background-color-frequency"></div></div></div></div></fieldset>