Fieldset

Fieldset

<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart">
        Commodo officia amet magna consectetur 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        Sint nisi exercitation nisi deserunt 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Incididunt laborum ut dolore mollit 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Aliquip esse et ut sed 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Qui incididunt non incididunt non 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Enim eiusmod id tempor commodo 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Ipsum commodo sint nostrud aliqua 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Quis anim quis enim esse 
      </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">
        Cupidatat ut esse cillum aute 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        Aute aliquip commodo voluptate veniam 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Aliquip ea non aliqua consectetur 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Qui ut pariatur consectetur dolore 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Magna non in qui ex 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Do dolor id non elit 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Nulla quis magna ad elit 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Quis proident anim ut id 
      </div>
    </div>
  </div>
</fieldset>
JavaScript
Deserunt quis laboris anim aliqua
Consectetur officia cillum nisi ut
Non ut est irure reprehenderit
Sint adipiscing do commodo ut
Do aliqua ipsum id officia
Pariatur ut cupidatat esse ad
Et dolor culpa aliquip sed
Ea mollit ex tempor ut

Fieldset in textarea

<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>
JavaScript
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

<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>
JavaScript
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

<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>
JavaScript

Fieldset with legend

<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>
JavaScript