If you want the user to be able to switch between different content options, the tab is your component!
Overview
The tabs tend to be used to get some part of the content displaying different subjects. It's a nice and clear way to display content in a condensed but intuitive way.
A tab will take the whole width of its parent container.
Les trois petits cochons et leurs maisons
Il était évident qu'une maison construite en paille ne tiendrait pas la route. Il s'agit pourtant d'un matériau écologique, facile à maîtriser et possédant d'excellentes propriétés isolantes. Hélas! Le grand méchant loup...
Le bois, ça n'était pas une mauvaise idée même si ce matériau ne suffit pas à lui tout seul. Malgré ça, probablement le meilleur choix du point de vue de l'esthétique. De plus, notre grand méchant loup possède des poumons à hautes prestations.
La brique, par contre, c'est solide! Solide oui, mais pas incassable. Il suffit de rajouter une cheminée pour faire croire qu'il est possible de rentrer par ce côté. Puis de préparer un peu de bois sec... La suite vient toute seule!
My three favourite beers
Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.
Other beers
A light and refreshing hallmark of the beer family, pilsners are identified by their crisp body, lightness of color and superb drinkability on hot summer days. Examples include Becks, Prima Pils, Harpoon Pilsner, Bitburger, St. Pauli Girl, and Spaten Pils.
Like the name, stouts are thick, dark and rich, although not necessarily possessed of high alcohol content. Examples: Guinness, Old Rasputin Imperial Stout, Young’s Double Chocolate Stout, and Samuel Smith’s Oatmeal Stout.
Similar to stouts, porters can also be like drinking a (albeit delicious) loaf of bread, but often pack more of a punch than their heady cousins. Examples: Fuller’s London Porter, Duck-Rabbit Porter, People’s Porter, Founders Porter, Deschutes Black Butte Porter, and Mayflower Porter.
Bocks, of which there are many, reside in the lager family but are often stronger and sweeter. Lightly hopped, the modern derivation is a lighter spinoff of its darker ancestral cousin. Examples: Sam Adams, Winter Lager, Anchor Bock Beer, Great Lakes Rockefeller Bock, Einbecker Ur-Bock Dunkel, and St. Nikolaus Bock Bier.
Weissbier, particularly hefeweizens, are popular white beers brewed in the Bavarian style and renowned for their sweetness. This is accomplished by using malted wheat instead of barley and can result in a very strong beer. Examples: Blue Moon, Hoegaarden, Shock Top, Boulevard Unfiltered Wheat, and Paulaner Hefe-Weissbier Naturtrub.
Although comparatively unknown, lambics do enjoy an audience among connoisseurs due to its unique spontaneous fermentation method used by Belgians that gives it a dry, cider-like taste and strong punch. Examples: Lindemans Framboise, Cantillon Rosé De Gambrinus, and Drie Fonteinen Schaerbeekse Kriek.
Kölsch stands alone as a beer type if only because its brewing methods are strictly defined and regulated (warm fermented and aged at cold temperatures), although it arguably falls within the lager family. Kölsch is pale, clear and hoppy, and is most appreciated among German beer purists. Originally only brewed in Köln (Cologne), Germany, a few American breweries and brewpubs have started creating their own varieties. Examples: Sunner Kölsch, Gaffel Kölsch, Harpoon Summer Beer, and Alaskan Summer Ale.
Usage
Dependencies
To get the tabs component working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"@import 'design-system/src/scss/02-molecules/tabs';import initButtonGroups from 'design-system/src/js/02-molecules/tabs';
Basic code
Tabs are structured in the following way:
div class="tabs"general container which contains:div class="tablist"a group in which you include as many tabs as you wantbutton class="tablist__tab"Label 1button class="tablist__tab"Label 2button class="tablist__tab"Label 3
div class="tabpanel"Tabpanel 1div class="tabpanel__body"wrapper for the content.
div class="tabpanel"Tabpanel 2div class="tabpanel__body"wrapper for the content.
div class="tabpanel"Tabpanel 3div class="tabpanel__body"wrapper for the content.
<div class="tabs">
<div class="tablist" role="tablist" aria-labelledby="#favourite-beers">
<button class="tablist__tab tablist__tab--md tablist__tab--selected" role="tab" aria-selected="true" aria-controls="ale-tab" id="ale" tabindex="-1">Ale </button>
<button class="tablist__tab tablist__tab--md" role="tab" aria-selected="false" aria-controls="lager-tab" id="lager" tabindex="-1">Lager </button>
<button class="tablist__tab tablist__tab--md" role="tab" aria-selected="false" aria-controls="malt-tab" id="malt" tabindex="-1">Malt </button>
</div>
<div class="tabpanel" role="tabpanel" id="ale-tab" aria-labelledby="ale" tabindex="0">
<div class="tabpanel__body">
<p>Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.</p>
</div>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager" tabindex="0" hidden="hidden">
<div class="tabpanel__body">
<p>Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
</div>
</div>
<div class="tabpanel" role="tabpanel" id="malt-tab" aria-labelledby="malt" tabindex="0" hidden="hidden">
<div class="tabpanel__body">
<p>Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.</p>
</div>
</div>
</div>
.tabs
.tablist(role="tablist", aria-labelledby="#tabid1", data-switching="auto")
button.tablist__tab.tablist__tab--md.tablist__tab--selected(role="tab", aria-selected="true", aria-controls="-tab", id="ale", tabindex="-1") Ale
button.tablist__tab.tablist__tab--md(role="tab", aria-selected="false", aria-controls="lager-tab", id="lager", tabindex="-1") Lager
button.tablist__tab.tablist__tab--md(role="tab", aria-selected="false", aria-controls="malt-tab", id="malt", tabindex="-1", data-deletable="") Malt
.tabpanel(role="tabpanel", id="ale-tab", aria-labelledby="ale", tabindex="0")
.tabpanel__body
p Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
.tabpanel(role="tabpanel", id="lager-tab", aria-labelledby="lager", tabindex="0", hidden="hidden")
.tabpanel__body
p Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
.tabpanel(role="tabpanel", id="malt-tab", aria-labelledby="malt", tabindex="0", hidden="hidden")
.tabpanel__body
p Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.
Tabs();
Modifiers
Add the following modifier to change the appearance of tabs.
Size
Size modifier comes in 3 variants: small, medium and large. It allows you to change the font size and the padding of the tablist items making them smaller or bigger.
Small (sm)
Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.
Medium (md)
Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.
Large (lg)
Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.
<!-- Small modifier -->
<button class="tablist__tab tablist__tab--sm" role="tab">Ale</button>
<!-- Medium modifier -->
<button class="tablist__tab tablist__tab--md" role="tab">Ale</button>
<!-- Large modifier -->
<button class="tablist__tab tablist__tab--lg" role="tab">Ale</button>//- Small modifier
button.tablist__tab.tablist__tab--sm Ale
//- Medium modifier
button.tablist__tab.tablist__tab--md Ale
//- Large modifier
button.tablist__tab.tablist__tab--lg Ale
Selected
Selected modifier is intended for selecting a tab by default. If not applied, tab won't be selected ¯\_(ツ)_/¯.
The second tablist is selected here:
Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.
No tablist selected here: (also changed the relevant attributes)
Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Sweet tooth? Malts, often containing notes of caramel, toffee, and nuts, are dark and sweet in flavour.
<div class="tabs">
<div class="tablist" role="tablist" aria-labelledby="#tabid1">
<button class="tablist__tab tablist__tab--md" role="tab" aria-selected="false" aria-controls="lager-tab" id="lager">Lager</button>
<button class="tablist__tab tablist__tab--md tablist__tab--selected" role="tab" aria-selected="true" aria-controls="lager-tab" id="lager">Lager</button>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager" tabindex="0">
<div class="tabpanel__body">Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.</div>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager" tabindex="0">
<div class="tabpanel__body">Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.</div>
</div>
</div>.tabs
.tablist(role="tablist", aria-labelledby="#tabid1")
button.tablist__tab(role="tab", aria-selected="false", aria-controls="ale-tab", id="ale", tabindex="-1") Ale
button.tablist__tab.tablist__tab--md.tablist__tab--selected(role="tab", aria-selected="true", aria-controls="lager-tab", id="lager", tabindex="-1") Lager
.tabpanel(role="tabpanel", id="ale-tab", aria-labelledby="ale", tabindex="0", hidden="hidden")
.tabpanel__body
p Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
.tabpanel(role="tabpanel", id="lager-tab", aria-labelledby="lager", tabindex="0")
.tabpanel__body
p Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
HTML attributes
Attributes are important for the a11y.
Role
The
role
attribute is intended to clarify screen-reader users on which element is a tab of the tablist, and which element is a tabpanel. Here we must use three options:
"tablist""tab""tabpanel"
<div class="tabs">
<div class="tablist" role="tablist" aria-labelledby="#tabid1">
<button class="tablist__tab tablist__tab--md" role="tab" aria-selected="false" aria-controls="ale-tab" id="ale" tabindex="-1">Ale</button>
<button class="tablist__tab tablist__tab--md tablist__tab--selected" role="tab" aria-selected="true" aria-controls="lager-tab" id="lager" tabindex="-1">Lager</button>
</div>
<div class="tabpanel" role="tabpanel" id="ale-tab" aria-labelledby="ale" tabindex="0">
<div class="tabpanel__body">Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.</div>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager" tabindex="0">
<div class="tabpanel__body">Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.</div>
</div>
</div>.tabs
.tablist(role="tablist", aria-labelledby="#tabid1")
button.tablist__tab(role="tab", aria-selected="false", aria-controls="ale-tab", id="ale", tabindex="-1") Ale
button.tablist__tab.tablist__tab--md.tablist__tab--selected(role="tab", aria-selected="true", aria-controls="lager-tab", id="lager", tabindex="-1") Lager
.tabpanel(role="tabpanel", id="ale-tab", aria-labelledby="ale", tabindex="0", hidden="hidden")
.tabpanel__body
p Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
.tabpanel(role="tabpanel", id="lager-tab", aria-labelledby="lager", tabindex="0")
.tabpanel__body
p Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Aria-labelledby
The
aria-labelledby
attribute establishes relationships between objects and their label. Its value should be one or more element ID. Here it must relate the
tabpanel
to its
tab (button). It's also useful to use it to point the whole
tablist
to its
label
if there is one, as you can see
for the first example.
<h4 id="two-favourite-beers">Two of my favourite beers<h4>
<div class="tabs">
<div class="tablist" role="tablist" aria-labelledby="#two-favourite-beers">
<button class="tablist__tab tablist__tab--md" id="ale-id" role="tab" aria-selected="false" aria-controls="ale-tab" tabindex="-1">Lager</button>
<button class="tablist__tab tablist__tab--md tablist__tab--selected" id="lager-id" role="tab" aria-selected="true" aria-controls="lager-tab" tabindex="-1">Lager</button>
</div>
<div class="tabpanel" role="tabpanel" id="ale-tab" aria-labelledby="ale-id" tabindex="0">
<div class="tabpanel__body">Ale are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.</div>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager-id" tabindex="0">
<div class="tabpanel__body">Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.</div>
</div>
</div>h4#two-favourite-beers Two of my favourite beers
.tabs
.tablist(role="tablist", aria-labelledby="#two-favourite-beers")
button.tablist__tab(id="ale-id", role="tab", aria-selected="false", aria-controls="ale-tab", tabindex="-1") Ale
button.tablist__tab.tablist__tab--md.tablist__tab--selected(id="lager", role="tab", aria-selected="true", aria-controls="lager-tab", tabindex="-1") Lager
.tabpanel(aria-labelledby="ale", role="tabpanel", id="ale-tab", tabindex="0", hidden="hidden")
.tabpanel__body
p Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
.tabpanel(aria-labelledby="lager", role="tabpanel", id="lager-tab", tabindex="0")
.tabpanel__body
p Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Aria-controls
The
aria-controls
attribute denotes which
tabpanel
a
tab
has control over.
The content of the tab's
aria-controls
attribute must match the tabpanel's
id.
<div class="tabs">
<div class="tablist" role="tablist" aria-labelledby="#two-favourite-beers">
<button class="tablist__tab tablist__tab--md" id="ale-id" role="tab" aria-controls="ale-tab" aria-selected="false" tabindex="-1">Lager</button>
<button class="tablist__tab tablist__tab--md tablist__tab--selected" id="lager-id" role="tab" aria-controls="lager-tab" aria-selected="true" tabindex="-1">Lager</button>
</div>
<div class="tabpanel" role="tabpanel" id="ale-tab" aria-labelledby="ale-id" tabindex="0">
<div class="tabpanel__body">Ale are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.</div>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager-id" tabindex="0">
<div class="tabpanel__body">Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.</div>
</div>
</div>.tabs
.tablist(role="tablist", aria-labelledby="#two-favourite-beers")
button.tablist__tab(id="ale-id", role="tab", aria-selected="false", aria-controls="ale-tab", tabindex="-1") Ale
button.tablist__tab.tablist__tab--md.tablist__tab--selected(id="lager", role="tab", aria-selected="true", aria-controls="lager-tab", tabindex="-1") Lager
.tabpanel(aria-labelledby="ale", role="tabpanel", id="ale-tab", tabindex="0", hidden="hidden")
.tabpanel__body
p Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
.tabpanel(aria-labelledby="lager", role="tabpanel", id="lager-tab", tabindex="0")
.tabpanel__body
p Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Aria-selected
The
aria-selected
attribute establishes which tab is selected by default and which one is not. It's applied only to the tab element.
As it is a boolean attribute, so values can be
aria-selected="false"
or
aria-selected="true"
Please note that in our Design System we also assign a CSS modifier class (tablist__tab--selected) to the tab that will be selected by default.
<div class="tabs">
<div class="tablist" role="tablist" aria-labelledby="#two-favourite-beers">
<button class="tablist__tab tablist__tab--md" aria-selected="false" id="ale-id" role="tab" aria-controls="ale-tab" tabindex="-1">Lager</button>
<button class="tablist__tab tablist__tab--md tablist__tab--selected" aria-selected="true" id="lager-id" role="tab" aria-controls="lager-tab" tabindex="-1">Lager</button>
</div>
<div class="tabpanel" role="tabpanel" id="ale-tab" aria-labelledby="ale-id" tabindex="0">
<div class="tabpanel__body">Ale are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.</div>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager-id" tabindex="0">
<div class="tabpanel__body">Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.</div>
</div>
</div>.tabs
.tablist(role="tablist", aria-labelledby="#two-favourite-beers")
button.tablist__tab(aria-selected="false", id="ale-id", role="tab", aria-controls="ale-tab", tabindex="-1") Ale
button.tablist__tab.tablist__tab--md.tablist__tab--selected(aria-selected="true", id="lager", role="tab", aria-controls="lager-tab", tabindex="-1") Lager
.tabpanel(aria-labelledby="ale", role="tabpanel", id="ale-tab", tabindex="0", hidden="hidden")
.tabpanel__body
p Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
.tabpanel(aria-labelledby="lager", role="tabpanel", id="lager-tab", tabindex="0")
.tabpanel__body
p Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Tabindex
The
tabindex
attribute is here to prevent the
tabs
to be focusable (as they are buttons so they are focusable by default), and to make the
tabpanels
focusable (as they are divs and aren't focusable by default).
We assign the value
tabindex="-1"
to the tab that won't be focusable, and the value
tabindex="0"
to the tabpanel that will be focusable.
<div class="tabs">
<div class="tablist" role="tablist" aria-labelledby="#two-favourite-beers">
<button class="tablist__tab tablist__tab--md" tabindex="-1" aria-selected="false" id="ale-id" role="tab" aria-controls="ale-tab">Lager</button>
<button class="tablist__tab tablist__tab--md tablist__tab--selected" tabindex="-1" aria-selected="true" id="lager-id" role="tab" aria-controls="lager-tab">Lager</button>
</div>
<div class="tabpanel" role="tabpanel" id="ale-tab" aria-labelledby="ale-id" tabindex="0">
<div class="tabpanel__body">Ale are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.</div>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager-id" tabindex="0">
<div class="tabpanel__body">Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.</div>
</div>
</div>.tabs
.tablist(role="tablist", aria-labelledby="#two-favourite-beers")
button.tablist__tab(tabindex="-1", aria-selected="false", id="ale-id", role="tab", aria-controls="ale-tab") Ale
button.tablist__tab.tablist__tab--md.tablist__tab--selected(tabindex="-1", aria-selected="true", id="lager", role="tab", aria-controls="lager-tab") Lager
.tabpanel(aria-labelledby="ale", role="tabpanel", id="ale-tab", tabindex="0", hidden="hidden")
.tabpanel__body
p Ales are full-bodied with hints of fruit or spice. They're also known to quench a mean thirst.
.tabpanel(aria-labelledby="lager", role="tabpanel", id="lager-tab", tabindex="0")
.tabpanel__body
p Lager, the beer style almost everyone's familiar with, is known for its crispness and refreshing finish.
Hidden
The
hidden
attribute is applied only to the hidden
tabpanels
of our tablist. It's intended to be used like this
hidden="hidden".
<div class="tablist" role="tablist" aria-labelledby="#favourite-beers">
<button class="tablist__tab tablist__tab--md" role="tab" aria-selected="false" aria-controls="lager-tab" id="lager" tabindex="-1">Lager</button>
</div>
<div class="tabpanel" role="tabpanel" id="lager-tab" aria-labelledby="lager" tabindex="0">.tablist(role="tablist", aria-labelledby="#tabid1")
button.tablist__tab(role="tab", aria-selected="false", aria-controls="ale-tab", id="ale") Ale
.tabpanel(role="tabpanel", id="ale-tab", aria-labelledby="ale", tabindex="0", hidden="hidden")