NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

TabGroup

import TabGroup from '@concur/nui-widgets/lib/Tabs/TabGroup';
import Tab from '@concur/nui-widgets/lib/Tabs/Tab';

TabGroup organizes and groups related content. It conserves screen space and maximizes user focus by displaying only one tab at a time. Tab components are organized within TabGroup containers.

Examples

Default

The following shows three tabs, the last of which is disabled.

<TabGroup>
    <Tab label='Expense UI'>
        <Tab.Body>Expense UI Team</Tab.Body>
    </Tab>
    <Tab label='Core UI'>
        <Tab.Body>Core UI Team</Tab.Body>
    </Tab>
    <Tab disabled label='Travel UI'>
        <Tab.Body>Travel UI Team</Tab.Body>
    </Tab>
</TabGroup>

Rich Tab Labels

When using icons for tab labels, use the optional Tab.RichLabelIcon component in the Tab’s label prop.

When using numbers for tab labels, use the optional Tab.RichLabelCount component in the Tab’s label prop.

<TabGroup>
    <Tab label={<Tab.RichLabelIcon iconName='pencil' text='Create New' />}>
        <Tab.Body>Create New</Tab.Body>
    </Tab>
    <Tab label={<Tab.RichLabelCount count='05' text='Favorites' />}>
        <Tab.Body>Favorites</Tab.Body>
    </Tab>
    <Tab label={<Tab.RichLabelIcon iconName='search' text='Search' />}>
        <Tab.Body>Search</Tab.Body>
    </Tab>
    <Tab
        disabled
        label={<Tab.RichLabelIcon iconName='gear' text='Settings' />}>
        <Tab.Body>Settings</Tab.Body>
    </Tab>
</TabGroup>

Use the optional Tab.Footer component to add tab-specific content (such as buttons) to the bottom of a tab container. The Tab.ButtonToolbar component would work to add spacing and alignment to the buttons in the footer.

<TabGroup>
    <Tab label='Expense UI'>
        <Tab.Body>
            <FormGroup>
                <ControlLabel>Field 1</ControlLabel>
                <FormControl />
            </FormGroup>
            <FormGroup>
                <ControlLabel>Field 2</ControlLabel>
                <FormControl />
            </FormGroup>
        </Tab.Body>
        <Tab.Footer>
            <ButtonToolbar muted>
                <ButtonToolbar.End>
                    <Button type='link'>Revert</Button>
                    <Button>Complete</Button>
                </ButtonToolbar.End>
            </ButtonToolbar>
        </Tab.Footer>
    </Tab>
    <Tab label='Core UI'>
        <Tab.Body>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
        </Tab.Body>
        <Tab.Footer>
            <ButtonToolbar muted>
                <ButtonToolbar.End>
                    <Button>Complete</Button>
                </ButtonToolbar.End>
            </ButtonToolbar>
        </Tab.Footer>
    </Tab>
    <Tab disabled label='Travel UI'>
        <Tab.Body>Travel UI Team</Tab.Body>
    </Tab>
</TabGroup>

Usage

TabGroup

Properties

Property Type Default Description
children Node   Collection of React components to be placed in the top-level <ul> tag that defines the tabs structure. These should be one or more Tab components.
className String   Custom classes to be added to the <div> that wraps the <ul>.
fixedHeight Boolean false If true the tab content has a max height of 225px.
muted Boolean false If true, border and padding are removed from Tab.Body
selectedTab Number 0 Index of the selected (active) tab. NOTE: The first tab is index 0.
tabContentClassName String   Custom classes to be added to the <div> that wraps the tab contents.
tabListClassName String   Custom classes to be added to the <ul> around the tabs.

Callbacks

Property Parameters Description
onTabChange index Fires when the active tab changes.

Tab

Properties

Property Type Default Description
alwaysRender Boolean false If true, the content area of the tab will be rendered even if it’s not the active tab.
children Node   Collection of React components to be placed in the tab’s content area.
className String   Custom classes to be added to the <div> that defines the tab’s content.
disabled Boolean false Controls whether the tab is enabled or disabled.
id String   id attribute of the <div> tag surrounding the tab content. Also corresponds with the tab’s aria-controls attribute
label Node   Renderable content for the tab’s label.

Callbacks

Property Parameters Description
onClick event Fires when a tab is clicked. In addition onClick event will change active tab.

Tab.Body

Properties

Property Type Default Description
children Node   Collection of React components to be placed in the tab content’s body area.
className String   Custom classes to be added to the <div> that defines the tab content’s body.

Tab.Footer

Properties

Property Type Default Description
children Node   Collection of React components to be placed in the tab content’s footer area.
className String   Custom classes to be added to the <div> that defines the tab content’s footer.

Tab.RichLabelIcon

Properties

Property Type Default Description
iconName String   The name of the desired icon. See Available Icons for a complete list.
className String   Custom classes to be added to the <div> that wraps the tab label.
text String   Extra text content beneath the icon.

Tab.RichLabelCount

Properties

Property Type Default Description
count String or Number   The number to display.
className String   Custom classes to be added to the <div> that wraps the tab label.
text String   Extra text content beneath the count.