Black Lives Matter.  Support the Equal Justice Initiative.
Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub

Tabbable

Tabbable is an abstract component that makes elements perceivable for keyboard users.

If you also want to make a tabbable element clickable with Enter and Space, see Clickable.

#Installation

npm install reakit

Learn more in Get started.

#Usage

Tabbable
Disabled
Focusable
import { Tabbable } from "reakit/Tabbable";

function Example() {
  return (
    <>
      <Tabbable>Tabbable</Tabbable>
      <Tabbable disabled>Disabled</Tabbable>
      <Tabbable disabled focusable>
        Focusable
      </Tabbable>
    </>
  );
}

#Accessibility

  • Tabbable has tabindex set to 0 by default. If it's disabled and not focusable, the tabindex attribute is removed.
  • Tabbable has aria-disabled set to true when the disabled prop is passed in.
  • click, mouseDown and mouseOver events aren't triggered when the disabled prop is passed in.
  • Focus is automatically set on Tabbable when it's clicked, which prevents inconsistencies between browsers.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#Tabbable

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