Component for displaying information with a tabbed UI

Usage

Tabs can be controlled or uncontrolled to give the consumer the option to control which tab the user is currently viewing.

Loading examples...

Uncontrolled tabs:

import Tabs, { Tab } from '@nerdwallet/react-tabs';
<Tabs>
<Tab label="Hello">
<h1>Hello</h1>
</Tab>
<Tab label="World">
<h1>World</h1>
</Tab>
</Tabs>

Controlled tabs:

import { Tab, ControlledTabs } from '@nerdwallet/react-tabs';
class ControlledTabsExample extends Component {
constructor(props) {
super(props);
this.state = {
activeTabIndex: 0,
};
this.onActiveTabChange = this.onActiveTabChange.bind(this);
}
onActiveTabChange(activeTabIndex) {
if (this.state.activeTabIndex !== activeTabIndex) {
this.setState({ activeTabIndex });
}
}
render(
<ControlledTabs
activeTabIndex={this.state.activeTabIndex}
onActiveTabChange={this.onActiveTabChange}
>
<Tab label="Hello">
<h1>Hello</h1>
</Tab>
<Tab label="World">
<h1>World</h1>
</Tab>
</ControlledTabs>
);
}

Maintainers

This component was created by Raissa Policarpio.

See Also