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 appearance Attribute appearance	The appearance of the tab context, e.g dark, or light. type: IcThemeForegroundNoDefault - "dark" \| "light"	"dark"
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 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

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

appearance

Attribute

appearance

The appearance of the tab context, e.g dark, or light.

type: IcThemeForegroundNoDefault - "dark" | "light"

Default: "dark"

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

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

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 tabSelect React onTabSelect	This event should not be used anymore. Use icTabSelect instead. Deprecated	IcTabSelectEventDetail

Web component

icTabSelect

React

onIcTabSelect

Emitted when a user selects a tab.

IcTabSelectEventDetail

Web component

tabSelect

React

onTabSelect

This event should not be used anymore. Use icTabSelect instead.

Deprecated

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 contextId Attribute context-id	This is no longer required. The context id is passed down from `ic-tab-context` Deprecated	"default"
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

contextId

Attribute

context-id

This is no longer required. The context id is passed down from `ic-tab-context`

Deprecated

Default: "default"

Property

inline

Attribute

inline

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

type: boolean

Default: false

Tab panel details

Props

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

Name	Description	Default
Property contextId Attribute context-id	This is no longer required. The context id is passed down from `ic-tab-context` Deprecated	"default"

Property

contextId

Attribute

context-id

This is no longer required. The context id is passed down from `ic-tab-context`

Deprecated

Default: "default"

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>

Light

Interactive example

Ingredients

Method

History

Tab One - Ingredients

Web component

React

<ic-tab-contextappearance="light">
<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>

<IcTabContextappearance="light">
<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>

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>

Last reviewed 31 May 2024 .