Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub

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

Clickable
Disabled
Focusable
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

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.