Tabs

Status: Stable

Latest released: 2018

Current version: v1.14.3

Storybook
GitHub

Standard NerdWallet tabbed UI component. Tabs can be controlled or uncontrolled to modify which tab the user is currently viewing.

Variants

Basic

Hello

World

Initial Tab Open

This tab is not the initial tab open

The example will show with this tab open initially

Development

import Tabs from '@nerdwallet/react-tabs';
<Tabs>
<Tab label="A Tab">A Tab</Tab>
</Tabs>;

Props

<Tab>

label

string

Required

The label for this tab (required)


active

boolean

Whether or not this tab is active (will be auto-generated by the <Tabs> component)

Default

false

className

string

Class name(s) to apply to the component

Default

null

onClick

Function

The click handler for this tab (will be auto-generated by the <Tabs> component)

Default

() => {}

onTabClick

Function

The click handler for this tab which will be called in the <Tabs> component

Default

() => {}

trackingProps

Object

Can be used to override the default tracking props. Note: this is implemented in tabs-component.jsx.

{
sectionCategory: string
elementContent: string
elementName: string
elementPosition: string
}

Default

{}

<Tabs>

children

node

The individual tabs to generate - should be <Tab> components

Default

null

className

string

Class name(s) to apply to the component

Default

null

disableTracking

boolean

Flag to disable tracking that is mainly for use when you don't want the component to cause any side effects (Storybook, NDS Style Guide, testing, etc). Should not be set in a practical use case.

Default

false

id

string

This id will be used for tracking purposes as the `sectionCategory`

Default

''

initialActiveTabIndex

number

The index of the active tab on render. Defaults to 0.

Default

0

rememberState

boolean

If true, the tab content will remember its state when switching tabs. Defaults to true

Default

true