Tabs

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<Tabs items={[ { label: 'Tab one', href: '#one', id: 'one' }, { label: 'Tab two', href: '#two', id: 'two' }, { label: 'Tab three', href: '#three', id: 'three' }, { label: 'Tab four', href: '#four', id: 'four' }, { label: 'Tab five', href: '#five', id: 'five' } ]} />

<Tabs
  items={[
    { label: 'Tab one', href: '#one', id: 'one' },
    { label: 'Tab two', href: '#two', id: 'two' },
    { label: 'Tab three', href: '#three', id: 'three' },
    { label: 'Tab four', href: '#four', id: 'four' },
    { label: 'Tab five', href: '#five', id: 'five' }
  ]}
/>

Introduction

import { Tabs } from '@telus-uds/components-base'

Use Tabs to display a horizontal menu of tabs that change the content shown below when pressed.

If there are too many tabs to fit the horizontal space, left and right buttons are shown.

Guidance

• Use Tabs to show/hide a mutually exclusive content areas.
• If the tabs should link to a wholly different page with its own URL, use SubNavigation instead
• Recommend to use labels that are 35 characters or fewer
• Allow the use of hashes in the URL to automatically load a tab. Eg. http://t.com#premium should load the “Premium” tab
• Change the page URL to include the hash as tabs change

Accessibility

• If a user is using tabbed navigation and horizontal scrolling is required, tabbing through tabs scrolls them into view automatically
• Scrolling methods other than the scroll buttons may also be used, such as touchscreen swipes and touchpad or mousewheel scrolling
• Consider including an assertive focus effect inside content to move screenreader focus to the appropriate heading or content start when new content is rendered

Controlled usage

Pass value and onChange to control the tabs from a parent. This is usually the easiest way to render different content for different tabs:

• value should be the id property of the current tab in the items array
• onChange should be a function that updates the state that selects content and is passed to value
• To integrate with URL hashes on web so selections remain after returning to a page, choose the default state value based on the URL hash

Platform considerations

Touch swipes with momentum may be used to scroll through many tabs, in addition to the scroll buttons.

Keep in mind that URL hashes won't have any effect in an app.

Props

Name	Type	Default	Description
items	arrayOf	[]
value	string
initialValue	string
onChange	func
tokens	custom		System tokens prop, see tokens for more details
itemTokens	custom
scrollButtonTokens	custom
variant	objectOf		System variant prop, see variants for more details