Fieldset
Fieldset Copy Pug Copy HTML Open in playground 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">
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 Copy JavaScript
Fieldset in textarea Copy Pug Copy HTML Open in playground 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">
32%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
Russian -
<span class="text-color-shade">
7.5%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Deutsch -
<span class="text-color-shade">
2.6%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
French -
<span class="text-color-shade">
56%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Turkish -
<span class="text-color-shade">
86%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Hungarian -
<span class="text-color-shade">
12%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Spanish -
<span class="text-color-shade">
0.13%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Swedish -
<span class="text-color-shade">
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">
32%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
Russian -
<span class="text-color-shade">
7.5%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Deutsch -
<span class="text-color-shade">
2.6%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
French -
<span class="text-color-shade">
56%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Turkish -
<span class="text-color-shade">
86%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Hungarian -
<span class="text-color-shade">
12%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Spanish -
<span class="text-color-shade">
0.13%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Swedish -
<span class="text-color-shade">
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 Copy JavaScript
Fieldset in textarea Copy Pug Copy HTML Open in playground 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">
32%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
Russian -
<span class="text-color-shade">
7.5%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Deutsch -
<span class="text-color-shade">
2.6%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
French -
<span class="text-color-shade">
56%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Turkish -
<span class="text-color-shade">
86%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Hungarian -
<span class="text-color-shade">
12%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Spanish -
<span class="text-color-shade">
0.13%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Swedish -
<span class="text-color-shade">
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">
32%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
Russian -
<span class="text-color-shade">
7.5%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Deutsch -
<span class="text-color-shade">
2.6%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
French -
<span class="text-color-shade">
56%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Turkish -
<span class="text-color-shade">
86%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Hungarian -
<span class="text-color-shade">
12%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Spanish -
<span class="text-color-shade">
0.13%
</span>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
Swedish -
<span class="text-color-shade">
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 Copy JavaScript
Fieldset
Copy Pug Copy HTML Open in playground 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>JavaScript Copy JavaScript
Fieldset with legend
Copy Pug Copy HTML Open in playground 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
<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
<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
<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
<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
<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
<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 Copy JavaScript