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.