useDisclosure

Provides the behavior and accessibility implementation for a disclosure component.

Example

Disclosure.tsx

Disclosure.css

Content.css

Example

Disclosure.tsx

Disclosure.css

Content.css

import {Disclosure} from './Disclosure';

<Disclosure title="System Requirements">
  Details about system requirements here.
</Disclosure>

API

<Disclosure>
  <Heading>
    <Button slot="trigger" />
  </Heading>
  <DisclosurePanel />
</Disclosure>

useDisclosureState(props: DisclosureProps): DisclosureStateuseDisclosureGroupState(props: DisclosureGroupProps): DisclosureGroupState

useDisclosure(
  props: AriaDisclosureProps,
state: DisclosureState,
ref: RefObject<HTMLElement | null>
): DisclosureAria

Name	Type
`isExpanded`	`boolean`
Whether the disclosure is currently expanded.

`setExpanded(isExpanded: boolean): void`
Sets whether the disclosure is expanded.
`expand(): void`
Expand the disclosure.
`collapse(): void`
Collapse the disclosure.
`toggle(): void`
Toggles the disclosure's visibility.

Name	Type
`isDisabled`	`boolean`
Whether the disclosure is disabled.
`isExpanded`	`boolean`
Whether the disclosure is expanded (controlled).
`defaultExpanded`	`boolean`
Whether the disclosure is expanded by default (uncontrolled).

Name	Type
`buttonProps`	`AriaButtonProps`
Props for the disclosure button.
`panelProps`	`HTMLAttributes<HTMLElement>`
Props for the disclosure panel.