Skip to main content
Reakit
DocumentationNewsletter
Spectrum
GitHub
GitHub

Tab

Accessible Tab component that 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} aria-label="My tabs">
        <Tab {...tab} stopId="tab1">
          Tab 1
        </Tab>
        <Tab {...tab} stopId="tab2" disabled>
          Tab 2
        </Tab>
        <Tab {...tab} stopId="tab3">
          Tab 3
        </Tab>
      </TabList>
      <TabPanel {...tab} stopId="tab1">
        Tab 1
      </TabPanel>
      <TabPanel {...tab} stopId="tab2">
        Tab 2
      </TabPanel>
      <TabPanel {...tab} stopId="tab3">
        Tab 3
      </TabPanel>
    </>
  );
}

#Vertical tabs with manual activation

Tab 3
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} aria-label="My tabs">
        <Tab {...tab} stopId="tab1">
          Tab 1
        </Tab>
        <Tab {...tab} stopId="tab2" disabled>
          Tab 2
        </Tab>
        <Tab {...tab} stopId="tab3">
          Tab 3
        </Tab>
      </TabList>
      <TabPanel {...tab} stopId="tab1">
        Tab 1
      </TabPanel>
      <TabPanel {...tab} stopId="tab2">
        Tab 2
      </TabPanel>
      <TabPanel {...tab} stopId="tab3">
        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.

  • unstable_moves number

    Stores the number of moves that have been made by calling move, next, previous, first or last.

  • 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.

  • stopId string | undefined

    Element ID.

14 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

  • unstable_moves number

    Stores the number of moves that have been made by calling move, next, previous, first or last.

  • 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.

  • 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

1 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

#TabPanel

  • stopId string

    Tab's stopId.

4 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • visible boolean

    Whether it's visible or not.

  • unstable_animated number | boolean

    If true, animating will be set to true when visible changes. It'll wait for stopAnimation to be called or a CSS transition ends. If it's a number, stopAnimation will be called automatically after given milliseconds.

  • unstable_stopAnimation () => void

    Stops animation. It's called automatically if there's a CSS transition. It's called after given milliseconds if animated is a number.

  • selectedId string | null

    The current selected tab's stopId.