Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub
Reakit is featured on Product Hunt!

Hidden

Hidden is an abstract component based on the WAI-ARIA Disclosure Pattern.

#Installation

npm install reakit

Learn more in Get started.

#Usage

Hidden
import { useHiddenState, Hidden, HiddenDisclosure } from "reakit/Hidden";

function Example() {
  const state = useHiddenState({ visible: true });
  return (
    <>
      <HiddenDisclosure {...state}>Toggle</HiddenDisclosure>
      <Hidden {...state}>Hidden</Hidden>
    </>
  );
}

#Accessibility

  • HiddenDisclosure extends the accessibility features of Button.
  • HiddenDisclosure has a value specified for aria-controls that refers to Hidden.
  • When Hidden is visible, HiddenDisclosure has aria-expanded set to true. When Hidden is hidden, it is set to false.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#useHiddenState

  • visible boolean

    Whether it's visible or not.

#Hidden

  • visible boolean

    Whether it's visible or not.

  • unstable_animated boolean | undefined

    If true, the hidden element attributes will be set in different timings to enable CSS transitions. This means that you can safely use the .hidden selector in the CSS to create transitions.

    • When it becomes visible, immediatelly remove the hidden attribute, then add the hidden class.
    • When it becomes hidden, immediatelly remove the hidden class, then add the hidden attribute.

#HiddenDisclosure

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

  • visible boolean

    Whether it's visible or not.

  • toggle () => void

    Toggles the visible state