The <Tabbable> utility component makes elements navigable by keyboard users.


import { Tabbable } from 'bumbag';


Editable example



  • The Tabbable component has a tabindex set to 0 by default. If it is disabled, then the tabindex is removed.
  • When the Tabbable is disabled, then the aria-disabled attribute is set to true.
  • When the Tabbable is disabled, then the click, mouse down and mouse over events are not triggered.
  • Focus is automatically set on Tabbable when it's clicked, which prevents inconsistencies between browsers.


#Tabbable Props

disabled boolean

Same as the HTML attribute.

focusable boolean

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.

Inherits Box props


  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string


  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string


  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;

elementRef ((instance: any) => void) | RefObject<any>

themeKey string


Hello world
On this page
Copyright © 2021 Jake Moxey