Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Tabs

Guidance Code Accessibility

Component demo

Interactive example

Ingredients Method History Tab One - Ingredients
Web component React
StackBlitz
Show full code 
<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>

Tab details

Props

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

Name Description Default
Property disabled
Attribute disabled

Iftrue , the disabled state will be set.

type: boolean - boolean | undefined
false
Property disabled
Attribute disabled

Iftrue , the disabled state will be set.

type: boolean - boolean | undefined
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.

Read more about slots .


Name Description
Slot badge
Badge component displayed inline with the tab.
Slot icon
Content will be rendered next to the tab label.
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" | undefined
"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 - string | undefined
"default"
Property monochrome
Attribute monochrome

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

type: boolean - boolean | undefined
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 - number | undefined
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" | undefined
"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" | undefined
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 - string | undefined
Default: "default"
Property monochrome
Attribute monochrome

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

type: boolean - boolean | undefined
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 - number | undefined
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" | undefined
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

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

type: boolean - boolean | undefined
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 - boolean | undefined
Default: false

Tab panel details

Variants

With icons

Interactive example

Ingredients Method History Tab One - Ingredients
Web component React
StackBlitz
Show full code 
<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>

Disabled

Interactive example

Ingredients Method History Tab One - Ingredients
Web component React
StackBlitz
Show full code 
<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>

Compact

Interactive example

Ingredients Method History Drinks Recipes Tab One - Ingredients
Web component React
StackBlitz
Show full code 
<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>

Nested Tabs

Interactive example

Ingredients Method History Espresso Water Milk Nested Tab Panel One - Espresso
Web component React
StackBlitz
Show full code 
<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>

Theme

Interactive example

Ingredients Method History Tab One - Ingredients
Web component React
StackBlitz
Show full code 
<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>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Tabs - Intelligence Community Design System