Clickable

Clickable is an abstract component that implements all the interactions an interactive element needs to be fully accessible when it's not rendered as its respective native element.

#Installation

npm install reakit

Learn more in Get started.

#Usage

import { Clickable } from "reakit/Clickable";

function Example() {
  const onClick = () => alert("clicked");
  return (
    <>
      <Clickable as="div" onClick={onClick}>
        Clickable
      </Clickable>
      <Clickable as="div" onClick={onClick} disabled>
        Disabled
      </Clickable>
      <Clickable as="div" onClick={onClick} disabled focusable>
        Focusable
      </Clickable>
    </>
  );
}

#Accessibility

• Pressing Enter or Space triggers a click event on Clickable regardless of its rendered element.
• Clickable extends the accessibility features of Tabbable.

Learn more in Accessibility.

#Composition

• Clickable uses Tabbable, and is used by Button, Checkbox, and CompositeItem.

Learn more in Composition.

#Props

#Clickable

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