Tabs

Skip to page content

BETA

Component demo

Interactive example

Ingredients

Method

History

Tab One - Ingredients

Web component

React

<ic-tab-context>
<ic-tab-grouplabel="Example tab group">
<ic-tab>Ingredients</ic-tab>
<ic-tab>Method</ic-tab>
<ic-tab>History</ic-tab>
</ic-tab-group>
<ic-tab-panel>Tab One - Ingredients</ic-tab-panel>
<ic-tab-panel>Tab Two - Method</ic-tab-panel>
<ic-tab-panel>Tab Three - History</ic-tab-panel>
</ic-tab-context>
<script>
  const tabContext = document.querySelector('ic-tab-context');
  tabContext.addEventListener('icTabSelect', (ev) => 
    console.log({
      tabIndex: ev.detail.tabIndex,
      tabLabel: ev.detail.tabLabel,
    })
  )
</script>

<IcTabContext
onIcTabSelect={(ev)=>
console.log({
      tabIndex: ev.detail.tabIndex,
      tabLabel: ev.detail.tabLabel,
})
}
>
<IcTabGrouplabel="Example tab group">
<IcTab>Ingredients</IcTab>
<IcTab>Method</IcTab>
<IcTab>History</IcTab>
</IcTabGroup>
<IcTabPanel>Tab One - Ingredients</IcTabPanel>
<IcTabPanel>Tab Two - Method</IcTabPanel>
<IcTabPanel>Tab Three - History</IcTabPanel>
</IcTabContext>

Tab details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean	false

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean

Default: false

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot badge	Badge component displayed inline with the tab.
Slot icon	Content will be rendered next to the tab label.

Methods

Name	Description	Signature
Method setFocus	Sets focus on the tab.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the tab.

setFocus() => Promise<void>

Tab context details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property activationType Attribute activation-type	Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation. type: IcActivationTypes - "automatic" \| "manual"	"automatic"
Property contextId Attribute context-id	The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel. type: string	"default"
Property monochrome Attribute monochrome	If`true` , the tabs will display as black in the light theme. type: boolean	false
Property selectedTabIndex Attribute selected-tab-index	The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection. type: number
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"

Property

activationType

Attribute

activation-type

Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.

type: IcActivationTypes - "automatic" | "manual"

Default: "automatic"

Property

contextId

Attribute

context-id

The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.

type: string

Default: "default"

Property

monochrome

Attribute

monochrome

Iftrue , the tabs will display as black in the light theme.

type: boolean

Default: false

Property

selectedTabIndex

Attribute

selected-tab-index

The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.

type: number

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icTabSelect React onIcTabSelect	Emitted when a user selects a tab.	IcTabSelectEventDetail

Web component

icTabSelect

React

onIcTabSelect

Emitted when a user selects a tab.

IcTabSelectEventDetail

Tab list details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label to describe the purpose of the set of tabs to screen reader users. Required type: string
Property inline Attribute inline	If`true` , the tabs and tab panels will be positioned separately. type: boolean	false

Property

label

Attribute

label

The label to describe the purpose of the set of tabs to screen reader users.

Required

type: string

Property

inline

Attribute

inline

Iftrue , the tabs and tab panels will be positioned separately.

type: boolean

Default: false

Tab panel details

Variants

With icons

Interactive example

Ingredients

Method

History

Tab One - Ingredients

Web component

React

<ic-tab-context>
<ic-tab-grouplabel="Example tab group">
<ic-tab>
      Ingredients
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z"/>
</svg>
</ic-tab>
<ic-tab>
      Method
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z"/>
</svg>
</ic-tab>
<ic-tab>
      History
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3"/>
</svg>
</ic-tab>
</ic-tab-group>
<ic-tab-panel>Tab One - Ingredients</ic-tab-panel>
<ic-tab-panel>Tab Two - Method</ic-tab-panel>
<ic-tab-panel>Tab Three - History</ic-tab-panel>
</ic-tab-context>

<IcTabContext>
<IcTabGrouplabel="Example tab group">
<IcTab>
      Ingredients
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z"/>
</SlottedSVG>
</IcTab>
<IcTab>
      Method
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z"/>
</SlottedSVG>
</IcTab>
<IcTab>
      History
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3"/>
</SlottedSVG>
</IcTab>
</IcTabGroup>
<IcTabPanel>Tab One - Ingredients</IcTabPanel>
<IcTabPanel>Tab Two - Method</IcTabPanel>
<IcTabPanel>Tab Three - History</IcTabPanel>
</IcTabContext>

Disabled

Interactive example

Ingredients

Method

History

Tab One - Ingredients

Web component

React

<ic-tab-context>
<ic-tab-grouplabel="Example tab group">
<ic-tab>Ingredients</ic-tab>
<ic-tabdisabled="true">Method</ic-tab>
<ic-tab>History</ic-tab>
</ic-tab-group>
<ic-tab-panel>Tab One - Ingredients</ic-tab-panel>
<ic-tab-panel>Tab Two - Method</ic-tab-panel>
<ic-tab-panel>Tab Three - History</ic-tab-panel>
</ic-tab-context>

<IcTabContext>
<IcTabGrouplabel="Example tab group">
<IcTab>Ingredients</IcTab>
<IcTabdisabled>Method</IcTab>
<IcTab>History</IcTab>
</IcTabGroup>
<IcTabPanel>Tab One - Ingredients</IcTabPanel>
<IcTabPanel>Tab Two - Method</IcTabPanel>
<IcTabPanel>Tab Three - History</IcTabPanel>
</IcTabContext>

Compact

Interactive example

Ingredients

Method

History

Drinks

Recipes

Tab One - Ingredients

Web component

React

<ic-tab-contextclass="tabs">
<ic-tab-grouplabel="Example tab group">
<ic-tab>Ingredients</ic-tab>
<ic-tab>Method</ic-tab>
<ic-tab>History</ic-tab>
<ic-tab>Drinks</ic-tab>
<ic-tab>Recipes</ic-tab>
</ic-tab-group>
<ic-tab-panel>Tab One - Ingredients</ic-tab-panel>
<ic-tab-panel>Tab Two - Method</ic-tab-panel>
<ic-tab-panel>Tab Three - History</ic-tab-panel>
<ic-tab-panel>Tab Four - Drinks</ic-tab-panel>
<ic-tab-panel>Tab Five - Recipes</ic-tab-panel>
</ic-tab-context>

<IcTabContext>
<IcTabGrouplabel="Example tab group">
<IcTab>Ingredients</IcTab>
<IcTab>Method</IcTab>
<IcTab>History</IcTab>
<IcTab>Drinks</IcTab>
<IcTab>Recipes</IcTab>
</IcTabGroup>
<IcTabPanel>Tab One - Ingredients</IcTabPanel>
<IcTabPanel>Tab Two - Method</IcTabPanel>
<IcTabPanel>Tab Three - History</IcTabPanel>
<IcTabPanel>Tab Four - Drinks</IcTabPanel>
<IcTabPanel>Tab Five - Recipes</IcTabPanel>
</IcTabContext>

Nested Tabs

Interactive example

Ingredients

Method

History

Espresso

Water

Milk

Nested Tab Panel One - Espresso

Web component

React

<ic-tab-context>
<ic-tab-grouplabel="Example tab group">
<ic-tab>Ingredients</ic-tab>
<ic-tab>Method</ic-tab>
<ic-tab>History</ic-tab>
</ic-tab-group>
<ic-tab-panel>
<ic-tab-contextcontext-id="context-nested">
<ic-tab-grouplabel="Example tab group">
<ic-tab>Espresso</ic-tab>
<ic-tab>Water</ic-tab>
<ic-tab>Milk</ic-tab>
</ic-tab-group>
<ic-tab-panel>Nested Tab Panel One - Espresso</ic-tab-panel>
<ic-tab-panel>Nested Tab Panel Two - Water</ic-tab-panel>
<ic-tab-panel>Nested Tab Panel Three - Milk</ic-tab-panel>
</ic-tab-context>
</ic-tab-panel>
<ic-tab-panel>Outer Tab Panel Two - Method</ic-tab-panel>
<ic-tab-panel>Outer Tab Panel Three - History</ic-tab-panel>
</ic-tab-context>

<IcTabContext>
<IcTabGrouplabel="Example tab group">
<IcTab>Ingredients</IcTab>
<IcTab>Method</IcTab>
<IcTab>History</IcTab>
</IcTabGroup>
<IcTabPanel>
<IcTabContextcontextId="context-nested">
<IcTabGrouplabel="Example tab group">
<IcTab>Espresso</IcTab>
<IcTab>Water</IcTab>
<IcTab>Milk</IcTab>
</IcTabGroup>
<IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>
<IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>
<IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>
</IcTabContext>
</IcTabPanel>
<IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>
<IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>
</IcTabContext>

Theme

Interactive example

Ingredients

Method

History

Tab One - Ingredients

Web component

React

<ic-tab-contexttheme="dark"monochrome="true">
<ic-tab-grouplabel="Example tab group">
<ic-tab>Ingredients</ic-tab>
<ic-tab>Method</ic-tab>
<ic-tab>History</ic-tab>
</ic-tab-group>
<ic-tab-panel>Tab One - Ingredients</ic-tab-panel>
<ic-tab-panel>Tab Two - Method</ic-tab-panel>
<ic-tab-panel>Tab Three - History</ic-tab-panel>
</ic-tab-context>

<IcTabContexttheme="dark"monochrome>
<IcTabGrouplabel="Example tab group">
<IcTab>Ingredients</IcTab>
<IcTab>Method</IcTab>
<IcTab>History</IcTab>
</IcTabGroup>
<IcTabPanel>Tab One - Ingredients</IcTabPanel>
<IcTabPanel>Tab Two - Method</IcTabPanel>
<IcTabPanel>Tab Three - History</IcTabPanel>
</IcTabContext>

Last reviewed 31 May 2024 .