Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__tests__
README.md
Tab.ts
TabList.tsx
TabPanel.ts
TabState.ts
__utils.ts
index.ts

README.md

path redirect_from
/docs/tab/
/components/tabs/
/components/tabs/tabscontainer/
/components/tabs/tabsnext/
/components/tabs/tabspanel/
/components/tabs/tabsprevious/
/components/tabs/tabstab/

Tab

Tab follows the WAI-ARIA Tabs Pattern. It's a component that, when activated, display a TabPanel.

Installation

npm install reakit

Learn more in Get started.

Usage

import { useTabState, Tab, TabList, TabPanel } from "reakit/Tab";

function Example() {
  const tab = useTabState();
  return (
    <>
      <TabList {...tab}>
        <Tab stopId="tab1" {...tab}>
          Tab 1
        </Tab>
        <Tab stopId="tab2" disabled {...tab}>
          Tab 2
        </Tab>
        <Tab stopId="tab3" {...tab}>
          Tab 3
        </Tab>
      </TabList>
      <TabPanel stopId="tab1" {...tab}>
        Tab 1
      </TabPanel>
      <TabPanel stopId="tab2" {...tab}>
        Tab 2
      </TabPanel>
      <TabPanel stopId="tab3" {...tab}>
        Tab 3
      </TabPanel>
    </>
  );
}

Vertical tabs with manual activation

import { useTabState, Tab, TabList, TabPanel } from "reakit/Tab";

function Example() {
  const tab = useTabState({
    orientation: "vertical",
    manual: true,
    selectedId: "tab3"
  });
  return (
    <div style={{ display: "flex" }}>
      <TabList {...tab}>
        <Tab stopId="tab1" {...tab}>
          Tab 1
        </Tab>
        <Tab stopId="tab2" disabled {...tab}>
          Tab 2
        </Tab>
        <Tab stopId="tab3" {...tab}>
          Tab 3
        </Tab>
      </TabList>
      <TabPanel stopId="tab1" {...tab}>
        Tab 1
      </TabPanel>
      <TabPanel stopId="tab2" {...tab}>
        Tab 2
      </TabPanel>
      <TabPanel stopId="tab3" {...tab}>
        Tab 3
      </TabPanel>
    </div>
  );
}

Accessibility

  • Tab has role tab.
  • Tab has aria-controls referring to its associated TabPanel.
  • The selected Tab has aria-selected set to true and all other Tabs have it set to false.
  • Tab extends the accessibility features of Rover.
  • TabList has role tablist.
  • TabList has aria-orientation set to vertical or horizontal based on the value of the orientation option.
  • TabPanel has role tabpanel.
  • TabPanel has aria-labelledby referring to its associated Tab.

Learn more in Accessibility.

Composition

Learn more in Composition.

Props

useTabState

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

  • stops Stop[]

    A list of element refs and IDs of the roving items.

  • currentId string | null

    The current focused element ID.

  • loop boolean

    If enabled:

    • Jumps to the first item when moving next from the last item.
    • Jumps to the last item when moving previous from the first item.
  • selectedId string | null

    The current selected tab's stopId.

  • manual boolean

    Whether the tab selection should be manual.

Tab

  • disabled boolean | undefined

    Same as the HTML attribute.

  • focusable boolean | undefined

    When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

  • stops Stop[]

    A list of element refs and IDs of the roving items.

  • currentId string | null

    The current focused element ID.

  • register (id: string, ref: RefObject<HTMLElement>) => void

    Registers the element ID and ref in the roving tab index list.

  • unregister (id: string) => void

    Unregisters the roving item.

  • move (id: string | null) => void

    Moves focus to a given element ID.

  • next () => void

    Moves focus to the next element.

  • previous () => void

    Moves focus to the previous element.

  • first () => void

    Moves focus to the first element.

  • last () => void

    Moves focus to the last element.

  • stopId string | undefined

    Element ID.

  • manual boolean

    Whether the tab selection should be manual.

  • selectedId string | null

    The current selected tab's stopId.

  • select (id: string | null) => void

    Selects a tab by its stopId.

TabList

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

TabPanel

  • visible boolean

    Whether it's visible or not.

  • unstable_animated ⚠️ boolean | undefined

    If true, the hidden element attributes will be set in different timings to enable CSS transitions. This means that you can safely use the .hidden selector in the CSS to create transitions.

    • When it becomes visible, immediatelly remove the hidden attribute, then add the hidden class.
    • When it becomes hidden, immediatelly remove the hidden class, then add the hidden attribute.
  • selectedId string | null

    The current selected tab's stopId.

  • stopId string

    Tab's stopId.

You can’t perform that action at this time.