Tabs let you organize multiple views within a single container and display one view at a time. By default, a bottom-line indicator is used to show the selected tab, but a fill color can also be used instead.
Content 1
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eveniet, voluptate eum laborum incidunt quasi similique atque perspiciatis iure officiis?
Content 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur mollitia at itaque in consectetur quas magnam et esse laborum illo!
Content 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora iste non reiciendis ex quam id impedit vitae voluptatum! Est.
<div class="flexy-tabs">
<div class="flexy-tablist" role="tablist">
<div class="flexy-tab" role="tab" aria-selected="true">Tab 1</div>
<div class="flexy-tab" role="tab" aria-selected="false">Tab 2</div>
<div class="flexy-tab" role="tab" aria-selected="false">Tab 3</div>
<div class="flexy-tab-indicator"></div>
</div>
<div class="flexy-tab-panels">
<div class="flexy-tab-panel" role="tabpanel">
<p>Content 1</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
eveniet, voluptate eum laborum incidunt quasi similique atque
perspiciatis iure officiis?
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 2</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
mollitia at itaque in consectetur quas magnam et esse laborum illo!
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 3</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora
iste non reiciendis ex quam id impedit vitae voluptatum! Est.
</p>
</div>
</div>
</div>
Remove the .flexy-tab-indicator element to drop the bottom-line indicator and use fill color instead.
Content 1
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eveniet, voluptate eum laborum incidunt quasi similique atque perspiciatis iure officiis?
Content 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur mollitia at itaque in consectetur quas magnam et esse laborum illo!
Content 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora iste non reiciendis ex quam id impedit vitae voluptatum! Est.
<div
class="flexy-tabs"
style="
--flexy-comp-tabs-tab-selected-fill-color: var(--flexy-sys-color-on-surface);
--flexy-comp-tabs-tab-selected-label-color: var(--flexy-sys-color-surface);
--flexy-comp-tabs-tab-indicator-color: var(--flexy-sys-color-on-surface);
"
>
<div class="flexy-tablist" role="tablist">
<div class="flexy-tab" role="tab" aria-selected="true">Tab 1</div>
<div class="flexy-tab" role="tab" aria-selected="false">Tab 2</div>
<div class="flexy-tab" role="tab" aria-selected="false">Tab 3</div>
</div>
<div class="flexy-tab-panels">
<div class="flexy-tab-panel" role="tabpanel">
<p>Content 1</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
eveniet, voluptate eum laborum incidunt quasi similique atque
perspiciatis iure officiis?
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 2</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
mollitia at itaque in consectetur quas magnam et esse laborum illo!
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 3</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora
iste non reiciendis ex quam id impedit vitae voluptatum! Est.
</p>
</div>
</div>
</div>
Content 1
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eveniet, voluptate eum laborum incidunt quasi similique atque perspiciatis iure officiis?
Content 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur mollitia at itaque in consectetur quas magnam et esse laborum illo!
Content 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora iste non reiciendis ex quam id impedit vitae voluptatum! Est.
<div class="flexy-tabs">
<div class="flexy-tablist" role="tablist">
<div class="flexy-tab" role="tab" aria-selected="true">
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="hiking"><path d="M436-360 371-72q-3 14-14.5 23T330-40q-20 0-32-15t-8-34l113-573q6-29 27-43.5t44-14.5q23 0 42.5 10t31.5 30l40 64q18 29 46.5 52.5T700-529v-41q0-13 8.5-21.5T730-600q13 0 21.5 8.5T760-570v500q0 13-8.5 21.5T730-40q-13 0-21.5-8.5T700-70v-376q-48-11-89-35t-71-59l-24 120 72 68q6 6 9 13.5t3 15.5v243q0 17-11.5 28.5T560-40q-17 0-28.5-11.5T520-80v-200l-84-80Zm-178-82-46-9q-16-3-25-16.5t-6-30.5l30-157q6-34 36-51.5t65-10.5q17 3 25.5 16.5T343-670l-38 196q-3 17-16.5 26t-30.5 6Zm282-298q-33 0-56.5-23.5T460-820q0-33 23.5-56.5T540-900q33 0 56.5 23.5T620-820q0 33-23.5 56.5T540-740Z"/></svg>
</span>
<span>Hiking</span>
</div>
<div class="flexy-tab" role="tab" aria-selected="false">
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="rowing"><path d="m692-28-80-80q-6-6-9-13.5t-3-15.5v-43L316-464q-9 2-18 3t-18 1v-88q50 2 102-21.5t84-58.5l56-62q13-15 30.5-22.5T590-720q38 0 64 26t26 64v230q0 26-9.5 47.5T644-314L500-456v-92q-20 17-43 31t-49 25l252 252h43q8 0 15.5 3t13.5 9l80 80q12 12 12 28t-12 28l-64 64q-12 12-28 12t-28-12ZM360-280 250-170q-13 13-30 13t-30-13q-13-13-13-30t13-30l150-150 100 100h-80Zm240-480q-33 0-56.5-23.5T520-840q0-33 23.5-56.5T600-920q33 0 56.5 23.5T680-840q0 33-23.5 56.5T600-760ZM280-460q-18 0-31-13t-13-31q0-18 13-31t31-13q18 0 31 13t13 31q0 18-13 31t-31 13Z"/></svg>
</span>
<span>Rowing</span>
</div>
<div class="flexy-tab" role="tab" aria-selected="false">
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="surfing"><path d="M120-40q-17 0-28.5-11.5T80-80q0-17 11.5-28.5T120-120q26 0 51.5-6.5T220-147q9-5 20-5t20 5q23 14 48.5 20.5T360-120q26 0 51.5-6.5T460-147q9-5 20.5-5t19.5 5q23 14 48.5 20.5T600-120q26 0 51.5-6.5T700-147q8-5 20-5t20 5q23 14 48.5 20.5T840-120q17 0 28.5 11.5T880-80q0 17-11.5 28.5T840-40q-31 0-61-7.5T720-70q-29 15-59 22.5T600-40q-31 0-61-7.5T480-70q-29 15-59 22.5T360-40q-31 0-61-7.5T240-70q-29 15-59 22.5T120-40Zm367-520 153 120v154q16 11 31 23t29 23q-21 18-46 29t-54 11q-36 0-67-17t-53-43q-22 26-53 43t-67 17q-10 0-19.5-1.5T322-206q-86-59-144-119t-58-104q0-31 24-41t50-10q29 0 67 8.5t81 24.5l-21-124q-4-20 4.5-39.5T352-642l86-58q-3 0-14.5-2.5t-25.5-5-25.5-5Q361-715 358-715l-80 55q-14 9-30 6t-26-17q-9-14-6-30.5t17-25.5l93-64q7-5 14.5-6.5t15.5.5l206 38q14 2 27 11t22 25l35 62q21 38 56.5 64t80.5 34q16 3 26.5 15t10.5 28q0 17-12 28t-28 9q-66-9-118.5-46T577-621l-90 61Zm-75 44 18 106q27 13 67 34.5t63 35.5v-60L412-516Zm268-224q-33 0-56.5-23.5T600-820q0-33 23.5-56.5T680-900q33 0 56.5 23.5T760-820q0 33-23.5 56.5T680-740Z"/></svg>
</span>
<span>Surfing</span>
</div>
<div class="flexy-tab-indicator"></div>
</div>
<div class="flexy-tab-panels">
<div class="flexy-tab-panel" role="tabpanel">
<p>Content 1</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
eveniet, voluptate eum laborum incidunt quasi similique atque
perspiciatis iure officiis?
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 2</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
mollitia at itaque in consectetur quas magnam et esse laborum illo!
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 3</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora
iste non reiciendis ex quam id impedit vitae voluptatum! Est.
</p>
</div>
</div>
</div>
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Content 9
Content 10
Content 11
Content 12
Content 13
Content 14
Content 15
Content 16
Content 17
Content 18
Content 19
Content 20
<div class="flexy-tabs">
<div class="flexy-tablist" role="tablist">
<div class="flexy-tab" role="tab" aria-selected="true">Tab 1</div>
<div class="flexy-tab" role="tab">Tab 2</div>
<div class="flexy-tab" role="tab">Tab 3</div>
<div class="flexy-tab" role="tab">Tab 4</div>
<div class="flexy-tab" role="tab">Tab 5</div>
<div class="flexy-tab" role="tab">Tab 6</div>
<div class="flexy-tab" role="tab">Tab 7</div>
<div class="flexy-tab" role="tab">Tab 8</div>
<div class="flexy-tab" role="tab">Tab 9</div>
<div class="flexy-tab" role="tab">Tab 10</div>
<div class="flexy-tab" role="tab">Tab 11</div>
<div class="flexy-tab" role="tab">Tab 12</div>
<div class="flexy-tab" role="tab">Tab 13</div>
<div class="flexy-tab" role="tab">Tab 14</div>
<div class="flexy-tab" role="tab">Tab 15</div>
<div class="flexy-tab" role="tab">Tab 16</div>
<div class="flexy-tab" role="tab">Tab 17</div>
<div class="flexy-tab" role="tab">Tab 18</div>
<div class="flexy-tab" role="tab">Tab 19</div>
<div class="flexy-tab" role="tab">Tab 20</div>
<div class="flexy-tab-indicator"></div>
</div>
<div class="flexy-tab-panels">
<div class="flexy-tab-panel" role="tabpanel">
<p>Content 1</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 2</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 3</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 4</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 5</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 6</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 7</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 8</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 9</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 10</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 11</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 12</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 13</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 14</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 15</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 16</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 17</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 18</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 19</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 20</p>
</div>
</div>
</div>
Content 1
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem eveniet, voluptate eum laborum incidunt quasi similique atque perspiciatis iure officiis?
Content 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur mollitia at itaque in consectetur quas magnam et esse laborum illo!
Content 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora iste non reiciendis ex quam id impedit vitae voluptatum! Est.
<div
class="flexy-tabs"
style="
--flexy-comp-tabs-tab-selected-fill-color: var(--flexy-sys-color-on-surface);
--flexy-comp-tabs-tab-selected-label-color: var(--flexy-sys-color-surface);
--flexy-comp-tabs-tab-shape: 999px;
--flexy-comp-tabs-tab-height: 40px;
--flexy-comp-tabs-tab-unselected-fill-color: transparent;
--flexy-comp-tabs-tab-unselected-label-color: var(--flexy-sys-color-on-surface);
--flexy-comp-tabs-tablist-height: 56px;
--flexy-comp-tabs-tablist-shape: 999px;
--flexy-comp-tabs-tablist-padding: 8px;
--flexy-comp-tabs-tablist-spacing: 8px;
--flexy-comp-tabs-tablist-divider-height: 0px;
--flexy-comp-tabs-tablist-fill-color: var(--flexy-sys-palette-grey-20);
"
>
<div class="flexy-tablist" role="tablist">
<div class="flexy-tab" role="tab" aria-selected="true">Tab 1</div>
<div class="flexy-tab" role="tab" aria-selected="false">Tab 2</div>
<div class="flexy-tab" role="tab" aria-selected="false">Tab 3</div>
</div>
<div class="flexy-tab-panels">
<div class="flexy-tab-panel" role="tabpanel">
<p>Content 1</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
eveniet, voluptate eum laborum incidunt quasi similique atque
perspiciatis iure officiis?
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 2</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
mollitia at itaque in consectetur quas magnam et esse laborum illo!
</p>
</div>
<div class="flexy-tab-panel" role="tabpanel" hidden>
<p>Content 3</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam tempora
iste non reiciendis ex quam id impedit vitae voluptatum! Est.
</p>
</div>
</div>
</div>
flexy-tabsflexy-tabs--reverseflexy-tablistflexy-tablist--align-startflexy-tablist--align-centerflexy-tablist--align-endflexy-tabflexy-tab-indicatorflexy-tab-indicator--outlinedflexy-tab-panelsflexy-tab-paneltab-heighttab-paddingtab-indicator-heighttab-indicator-colortab-selected-fill-colortab-selected-label-colortab-shapetab-spacingtab-unselected-fill-colortab-unselected-label-colortablist-divider-heighttablist-divider-colortablist-divider-margintablist-fill-colortablist-heighttablist-paddingtablist-shapetablist-spacingLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)