v0.1.4

Tabs

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/tabs

npm @spark-web/tabs

Source GitHub.com

Bundle unpkg.com

Tabs are a set of layered sections of content (known as tab panels) that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along the top edge of the currently displayed panel.

Example

Content from first panel

Content from second panel

Open in Playroom

<Tabs>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Default Index

By default, users will be shown the first tab. This can be overridden by providing a defaultIndex prop. You can also have no tabs active by default by providing a defaultIndex of -1.

Content from first panel

Content from second panel (this should be selected by default)

Open in Playroom

<Tabs defaultIndex={1}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab (default)</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder
          label="Content from second panel (this should be selected by default)"
          height={64}
        />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs defaultIndex={1}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab (default)</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder
          label="Content from second panel (this should be selected by default)"
          height={64}
        />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Disabled tabs

Individual tabs can be be disabled by providing them with a disabled prop.

Content from first panel

Content from second panel

Content from third panel. You should not be able to see me!

Open in Playroom

<Tabs>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab disabled>Third tab (disabled)</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder
          label="Content from third panel. You should not be able to see me!"
          height={64}
        />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab disabled>Third tab (disabled)</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder
          label="Content from third panel. You should not be able to see me!"
          height={64}
        />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Manual Activation

By default, when a tab has focus, users can cycle through the enabled tabs using the arrow keys. If activationMode is set to "manual", users can activate a tab by pressing the Enter or Space key when the tab you want to view has focus.

It is very important for usability that functionality of components behaves in a consistent manor. It is therefore recommended that you do not use the manual activation mode unless you absolutely need it.

Content from first panel

Content from second panel

Open in Playroom

<Tabs activationMode="manual">
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

<Tabs activationMode="manual">
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from first panel" height={64} />
      </Stack>
    </TabPanel>
    <TabPanel>
      <Stack paddingY="medium">
        <Placeholder label="Content from second panel" height={64} />
      </Stack>
    </TabPanel>
  </TabPanels>
</Tabs>

Props

Tabs

Prop	Type	Description
children	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	Children elements to be rendered within the component. Expected to be `TabList` and `TabPanels`.
activationMode?	"automatic" \| "manual"	When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked. Default: `"'automatic'"`
data?	DataAttributeMap	Sets data attributes for the element.
defaultIndex?	number	The index of the tab that should be active when initially rendered.

TabList

Prop	Type	Description
children	ReactElement<TabProps, string \| JSXElementConstructor<any>>[]	Children elements to be rendered within the component. Expected to be more than one `Tab` component.
data?	DataAttributeMap	Sets data attributes for the element.

Tab

Prop	Type	Description
children	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	Children elements to be rendered within the component.
data?	DataAttributeMap	Sets data attributes for the element.
disabled?	boolean	When true, prevents the user from interacting with the tab.

TabPanels

Prop	Type	Description
children	ReactElement<TabPanelProps, string \| JSXElementConstructor<any>>[]	Children elements to be rendered within the component. Expected to be more than one `TabPanel` component.
data?	DataAttributeMap	Sets data attributes for the element.

TabPanel

Prop	Type	Description
children	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	Children elements to be rendered within the component.
data?	DataAttributeMap	Sets data attributes for the element.