Tabs - React

View on Figma View on GitHub

import { Tabs } from "@sky-uk/ui-core";

Each Tabs.Tab must have one corresponding Tabs.Panel. Provide all panel content up front so Tabs can manage visibility and ARIA relationships. If panel content must be conditionally rendered, use the Navigation Bar component instead.

Props

Prop	Type	Default	Description
$appearance	string	default	The `$appearance` prop sets tab styles for various backgrounds, including a light version for dark backgrounds. It's responsive, allowing breakpoint-specific adjustments. `'default'` \| `'light'`
$fill	boolean	false	Dictates whether the Tabs proportionately fill the available space. This prop is responsive and can be used to set the `$fill` value at different breakpoints.
id	string		The `id` attribute assigns the relevant ARIA attributes to establish a semantic relationship between the Tab and its corresponding Panel.
onTabChange	(index: number) => void		The `onTabChange` callback triggers when a tab is changed, providing the index of the changed tab as a number. This enables custom actions based on the specific tab interaction.

Tabs.Tab

Prop	Type	Description
$active	boolean	Indicates the current tab selection.
$hover	boolean	Indicates if a tab is being hovered over.
$theme	string	The theme of the active indicator as a Sky gradient Note: if `$appearance` is set to `light`, the theme will be ignored.

Basic Tabs

<Tabs id="example-1">
    <Tabs.Tab>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
       See who's at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn't, you'll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

Tabs Props

$appearance

$appearance can be set to light or default to provide contrast with backgrounds.

<Tabs id="example-2" $appearance="light">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        <Text $color="white">See who's at your door from anywhere on your smart phone. Even chat with them.</Text>
    </Tabs.Panel>
    <Tabs.Panel>
        <Text $color="white">The ultimate house sitter. Keeps an eye on any room.</Text>
    </Tabs.Panel>
    <Tabs.Panel>
        <Text $color="white">If something moves or opens when it shouldn't, you'll know via the Sky Protect app.</Text>
    </Tabs.Panel>
</Tabs>

$fill

Set $fill to have Tabs proportionately take up the available space

<Tabs id="example-3" $fill={{ xs: false, md: true }}>
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who's at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn't, you'll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

id

The id attribute sets the appropriate aria attributes to provide semantic relationship between the Tab and Panel.

<Tabs id="example-4">

The id is essential for the Tabs to function correctly and must be a unique value when multiple Tabs are used on a page.

onTabChange

The onTabChange callback is triggered when a tab is changed. It receives the index of the changed tab as a number. This allows you to determine which tab was activated and perform additional actions or updates based on the selected tab.

function Example(){
  const [tabState, setTabState] = React.useState(null);

  const handleTabChange = index => {
    setTabState(index);
  };

  return (
    <Flex $flexDirection="column" $gap={5}>
      <Text>Current Tab index: {tabState}</Text>
      <Tabs id="example-5" onTabChange={handleTabChange}>
        <Tabs.Tab $active>Video Doorbell</Tabs.Tab>
        <Tabs.Tab>Indoor Camera</Tabs.Tab>
        <Tabs.Tab>Motion & Contact Sensors</Tabs.Tab>

        <Tabs.Panel>See who's at your door from anywhere on your smartphone. Even chat with them.</Tabs.Panel>
        <Tabs.Panel>The ultimate house sitter. Keeps an eye on any room.</Tabs.Panel>
        <Tabs.Panel>If something moves or opens when it shouldn't, you'll know via the Sky Protect app.</Tabs.Panel>
      </Tabs>
    </Flex>
  );
}

Tabs.Tab Props

$active

Add $active to indicate current selection on the initial render.

Note: You can only have one tab with the $active prop. If no tab has the $active prop, the first tab will be set as active by default.

<Tabs id="example-6">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who's at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn't, you'll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

$theme

Set $theme on an individual Tab to use any predefined gradient.

Note: Takes Precedence over Tabs $appearance

<Tabs id="example-7">
    <Tabs.Tab $active $theme="sky">
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab $theme="products.tv">
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab $theme="products.broadband">
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who's at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn't, you'll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

States

The hover and focus state can be set via $hover and $focused respectively to override default behavior.

<Tabs id="example-8">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab $hover>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab $focused>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who's at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn't, you'll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

Tabs with Icons

You can enhance the Tabs component by including Icon for a more visual representation.

Note: Ensure $size is implemented in accordance with guidance.

<Tabs id="example-9">
    <Tabs.Tab $active>
        <Icon src={wifiHouseLinear} $size={{ xs: 'medium', xl: 'large' }} />
        Broadband
    </Tabs.Tab>
    <Tabs.Tab>
        <Icon src={tvLinear} $size={{ xs: 'medium', xl: 'large' }} />
        TV
    </Tabs.Tab>
    <Tabs.Tab>
        <Icon src={mobileLinear} $size={{ xs: 'medium', xl: 'large' }} />
       Mobile
    </Tabs.Tab>

    <Tabs.Panel>
        We've got speeds for every household. Check out our broadband plans to find your perfect match.
    </Tabs.Panel>
    <Tabs.Panel>
        Built for the best entertainment. Sky Stream pairs brilliantly with our content. Stream your favourites over WiFi.
    </Tabs.Panel>
    <Tabs.Panel>
        Explore a world of possibilities and switch to Sky Mobile, the award-winning network
    </Tabs.Panel>
</Tabs>

System Modifiers

The Tabs component supports the props applied using the following system modifiers:

The Tabs.Panel component supports the props applied using the following system modifiers:

padding