• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Usage
    1. Disabled
    2. Ghost
    3. Brand color
    4. Rounded corners
    5. Floating
    6. Floating on brand color
    7. Size
    8. With icons
    9. With many tabs
    10. Full width
  2. Events
  3. Select a tab programmatically
  4. Properties
  5. Events
  6. Methods
    1. switchTab(identifier: number | string) => Promise<void>
Components Tabs
(external link)

ld-tabs #

The ld-tabs component hides content behind selectable items and thereby helps to place content in a space-saving manner.


Usage #

Use ld-tabs as a container for a list of tabs - the ld-tablist which in turn contains a number of ld-tab items - and a container ld-tabpanellist which contains the same number of corresponding ld-tabpanel items.

<ld-tabs>
<ld-tablist>
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
<ld-tabpanellist>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
<a href="#apple">Apple</a>, orange, banana
</ld-typo>
</ld-tabpanel>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Potato, <a href="#cucumber">cucumber</a>, tomato
</ld-typo>
</ld-tabpanel>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Walnut, chestnut, <a href="#strawberry">strawberry</a>
</ld-typo>
</ld-tabpanel>
</ld-tabpanellist>
</ld-tabs>
<LdTabs>
<LdTablist>
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
<LdTabpanellist>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
<a href="#apple">Apple</a>, orange, banana
</LdTypo>
</LdTabpanel>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Potato,
<a href="#cucumber">cucumber</a>, tomato
</LdTypo>
</LdTabpanel>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Walnut, chestnut,
<a href="#strawberry">strawberry</a>
</LdTypo>
</LdTabpanel>
</LdTabpanellist>
</LdTabs>
Fruits Vegetables Nuts Apple, orange, banana Potato, cucumber, tomato Walnut, chestnut, strawberry

Disabled #

<ld-tabs>
<ld-tablist>
<ld-tab selected>Fruits</ld-tab>
<ld-tab disabled>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist>
<LdTab selected>Fruits</LdTab>
<LdTab disabled>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts

Ghost #

<ld-tabs>
<ld-tablist mode="ghost">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist mode="ghost">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts

Brand color #

<ld-tabs>
<ld-tablist mode="brand-color">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist mode="brand-color">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts

Rounded corners #

<ld-tabs>
<ld-tablist mode="brand-color" rounded="all">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs>
<ld-tablist mode="brand-color" rounded="all-lg">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs>
<ld-tablist mode="brand-color" rounded="top">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs>
<ld-tablist mode="brand-color" rounded="top-lg">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist mode="brand-color" rounded="all">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>

<LdTabs>
<LdTablist mode="brand-color" rounded="all-lg">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>

<LdTabs>
<LdTablist mode="brand-color" rounded="top">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>

<LdTabs>
<LdTablist mode="brand-color" rounded="top-lg">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts

Floating #

<ld-tabs>
<ld-tablist mode="floating">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab disabled>Scrap Metal</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist mode="floating">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab disabled>Scrap Metal</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Scrap Metal Nuts

Floating on brand color #

<ld-tabs>
<ld-tablist mode="floating-on-brand-color">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab disabled>Scrap Metal</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist mode="floating-on-brand-color">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab disabled>Scrap Metal</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Scrap Metal Nuts

Size #

<ld-tabs>
<ld-tablist size="sm">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs>
<ld-tablist>
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs>
<ld-tablist size="lg">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist size="sm">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>

<LdTabs>
<LdTablist>
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>

<LdTabs>
<LdTablist size="lg">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts

With icons #

<ld-tabs>
<ld-tablist>
<ld-tab selected><ld-icon name="placeholder" aria-label="Fruits"></ld-icon></ld-tab>
<ld-tab><ld-icon name="placeholder" aria-label="Vegetables"></ld-icon></ld-tab>
<ld-tab><ld-icon name="placeholder" aria-label="Nuts"></ld-icon></ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs>
<ld-tablist mode="ghost">
<ld-tab selected><ld-icon name="placeholder"></ld-icon>Fruits</ld-tab>
<ld-tab><ld-icon name="placeholder"></ld-icon>Vegetables</ld-tab>
<ld-tab><ld-icon name="placeholder"></ld-icon>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist>
<LdTab selected><LdIcon name="placeholder" aria-label="Fruits" /></LdTab>
<LdTab><LdIcon name="placeholder" aria-label="Vegetables" /></LdTab>
<LdTab><LdIcon name="placeholder" aria-label="Nuts" /></LdTab>
</LdTablist>
</LdTabs>

<LdTabs>
<LdTablist mode="ghost">
<LdTab selected><LdIcon name="placeholder" />Fruits</LdTab>
<LdTab><LdIcon name="placeholder" />Vegetables</LdTab>
<LdTab><LdIcon name="placeholder" />Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts

With many tabs #

You should try to avoid using tab bars with more than five tab items. But if you really must, the ld-tabs component has got you covered:

<ld-tabs>
<ld-tablist>
<ld-tab selected>Classical</ld-tab>
<ld-tab>Rock</ld-tab>
<ld-tab>Indie</ld-tab>
<ld-tab>Jazz</ld-tab>
<ld-tab>Blues</ld-tab>
<ld-tab>Soul</ld-tab>
<ld-tab>Gospel</ld-tab>
<ld-tab>Pop</ld-tab>
<ld-tab>Hip Hop</ld-tab>
<ld-tab>Raggea</ld-tab>
<ld-tab>Raggeaton</ld-tab>
<ld-tab>R&B</ld-tab>
<ld-tab>Electric</ld-tab>
<ld-tab>Country</ld-tab>
<ld-tab>Punk</ld-tab>
<ld-tab>Latin</ld-tab>
<ld-tab>Funk</ld-tab>
<ld-tab>Ambient</ld-tab>
<ld-tab>Bossa Nova</ld-tab>
<ld-tab>Flamenco</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs>
<LdTablist>
<LdTab selected>Classical</LdTab>
<LdTab>Rock</LdTab>
<LdTab>Indie</LdTab>
<LdTab>Jazz</LdTab>
<LdTab>Blues</LdTab>
<LdTab>Soul</LdTab>
<LdTab>Gospel</LdTab>
<LdTab>Pop</LdTab>
<LdTab>Hip Hop</LdTab>
<LdTab>Raggea</LdTab>
<LdTab>Raggeaton</LdTab>
<LdTab>R&B</LdTab>
<LdTab>Electric</LdTab>
<LdTab>Country</LdTab>
<LdTab>Punk</LdTab>
<LdTab>Latin</LdTab>
<LdTab>Funk</LdTab>
<LdTab>Ambient</LdTab>
<LdTab>Bossa Nova</LdTab>
<LdTab>Flamenco</LdTab>
</LdTablist>
</LdTabs>
Classical Rock Indie Jazz Blues Soul Gospel Pop Hip Hop Raggea Raggeaton R&B Electric Country Punk Latin Funk Ambient Bossa Nova Flamenco

Full width #

<ld-tabs style="width: 100%">
<ld-tablist mode="ghost">
<ld-tab selected>Fruits</ld-tab>
<ld-tab disabled>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs style="width: 100%">
<ld-tablist>
<ld-tab selected>Fruits</ld-tab>
<ld-tab disabled>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>

<ld-tabs style="width: 100%">
<ld-tablist mode="brand-color">
<ld-tab selected>Fruits</ld-tab>
<ld-tab disabled>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
</ld-tabs>
<LdTabs style={ { width: '100%' } }>
<LdTablist mode="ghost">
<LdTab selected>Fruits</LdTab>
<LdTab disabled>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>

<LdTabs style={ { width: '100%' } }>
<LdTablist>
<LdTab selected>Fruits</LdTab>
<LdTab disabled>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>

<LdTabs style={ { width: '100%' } }>
<LdTablist mode="brand-color">
<LdTab selected>Fruits</LdTab>
<LdTab disabled>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts

Events #

The ld-tabs component emits the ldtabchange event which you can use to bind custom event handlers. The event is only emmitted on clicks on non-disabled and non-selected tabs.

<ld-tabs id="tabs_events">
<ld-tablist mode="ghost">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
<ld-tab disabled>Grain</ld-tab>
</ld-tablist>
</ld-tabs>

<script>
document.getElementById('tabs_events').addEventListener('ldtabchange', ev => {
window.alert(`Current tab index is: ${ev.detail}`)
})
</script>
<LdTabs
onLdtabchange={(ev) => {
window.alert(`Current tab index is: ${ev.detail}`)
}}

>

<LdTablist mode="ghost">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
<LdTab disabled>Grain</LdTab>
</LdTablist>
</LdTabs>
Fruits Vegetables Nuts Grain

Select a tab programmatically #

There are two ways to programmatically select a tab:

  1. By using the switchTab-method exposed by the ld-tabs element:
<ld-tabs id="tabs_programmatic_1">
<ld-tablist mode="ghost">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
<ld-tabpanellist>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Apple, orange, banana
</ld-typo>
</ld-tabpanel>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Potato, cucumber, tomato
</ld-typo>
</ld-tabpanel>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Walnut, chestnut, strawberry
</ld-typo>
</ld-tabpanel>
</ld-tabpanellist>
</ld-tabs>

<ld-button id="nuts_button_1">Select nuts</ld-button>

<script>
document.getElementById('nuts_button_1').addEventListener('click', async (ev) => {
await document.getElementById('tabs_programmatic_1').switchTab(2)

console.log(`Tab successfully set to tab at index 2 using ld-tabs' "switchTab"-method.`)
})
</script>
const tabsRef = useRef(null)

return (
<LdTabs ref={ tabsRef }>
<LdTablist mode="ghost">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab>Nuts</LdTab>
</LdTablist>
<LdTabpanellist>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Apple, orange, banana
</LdTypo>
</LdTabpanel>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Potato, cucumber, tomato
</LdTypo>
</LdTabpanel>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Walnut, chestnut, strawberry
</LdTypo>
</LdTabpanel>
</LdTabpanellist>
</LdTabs>
<LdButton onClick={ () => tabsRef.current?.switchTab(2) }>
Select Nuts
</LdButton>
)
Fruits Vegetables Nuts Apple, orange, banana Potato, cucumber, tomato Walnut, chestnut, strawberry Select nuts
  1. By using the select-method exposed by the ld-tab element:
<ld-tabs id="tabs_programmatic_2">
<ld-tablist mode="ghost">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
<ld-tab>Nuts</ld-tab>
</ld-tablist>
<ld-tabpanellist>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Apple, orange, banana
</ld-typo>
</ld-tabpanel>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Potato, cucumber, tomato
</ld-typo>
</ld-tabpanel>
<ld-tabpanel>
<ld-typo style="margin-top: 1rem">
Walnut, chestnut, strawberry
</ld-typo>
</ld-tabpanel>
</ld-tabpanellist>
</ld-tabs>

<ld-button id="nuts_button_2">Select nuts</ld-button>

<script>
document.getElementById('nuts_button_2').addEventListener('click', async (ev) => {
await document.getElementById('tabs_programmatic_2').querySelectorAll('ld-tab')[2].select()

console.log(`Tab successfully set to tab at index 2 using ld-tab's "select"-method.`)
})
</script>
const nutTabRef = useRef(null)

return (
<LdTabs>
<LdTablist mode="ghost">
<LdTab selected>Fruits</LdTab>
<LdTab>Vegetables</LdTab>
<LdTab ref={ nutTabRef }>Nuts</LdTab>
</LdTablist>
<LdTabpanellist>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Apple, orange, banana
</LdTypo>
</LdTabpanel>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Potato, cucumber, tomato
</LdTypo>
</LdTabpanel>
<LdTabpanel>
<LdTypo style={ { marginTop: '1rem' } }>
Walnut, chestnut, strawberry
</LdTypo>
</LdTabpanel>
</LdTabpanellist>
</LdTabs>
<LdButton onClick={ () => nutTabRef.current?.select() }>
Select Nuts
</LdButton>
)
Fruits Vegetables Nuts Apple, orange, banana Potato, cucumber, tomato Walnut, chestnut, strawberry Select nuts

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined

Events #

Event Description Type
ldtabchange Emitted with the id of the selected tab. CustomEvent<string>

Methods #

switchTab(identifier: number | string) => Promise<void> #

Set selected tab to a certain index

Returns #

Type: Promise<void>


Built with StencilJS