Looking for Reakit's successor?Visit Ariakit
Skip to main content


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.


npm install reakit

Learn more in Get started.


import { Tabbable } from "reakit/Tabbable";

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


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


Learn more in Composition.



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

Powered by Vercel

Released under the MIT License

Copyright © 2017-2023 Diego Haz