DisclosureGroup

Group multiple disclosures into an accordion.

Documentation: React Aria
Pattern: W3C ARIA
Source: GitHub
Issues: Report

We offer a 30-day no-questions-asked refund policy.

DisclosureGroup example

import {
  Disclosure,
  DisclosureHeader,
  DisclosurePanel,
} from "@/shim-ui/disclosure";
import { DisclosureGroup } from "@/shim-ui/disclosure-group";

export default () => (
  <DisclosureGroup defaultExpandedKeys={["refund"]}>
    <Disclosure id="refund">
      <DisclosureHeader>What is your refund policy?</DisclosureHeader>
      <DisclosurePanel>
        We offer a 30-day no-questions-asked refund policy.
      </DisclosurePanel>
    </Disclosure>

    <Disclosure>
      <DisclosureHeader>What is your return policy?</DisclosureHeader>
      <DisclosurePanel>
        We offer a 30-day no-questions-asked return policy.
      </DisclosurePanel>
    </Disclosure>

    <Disclosure>
      <DisclosureHeader>What is your exchange policy?</DisclosureHeader>
      <DisclosurePanel>
        We offer a 30-day no-questions-asked exchange policy.
      </DisclosurePanel>
    </Disclosure>
  </DisclosureGroup>
);

Install

Use the CLI or copy the source code manually.

Command

Source code

pnpm dlx @kkga/shim add disclosure-group

Size

Use the size prop on DisclosureGroup to size the childDisclosure components.

We offer refunds.

Size example

"use client";
import {
  Disclosure,
  DisclosureHeader,
  DisclosurePanel,
} from "@/shim-ui/disclosure";
import { DisclosureGroup } from "@/shim-ui/disclosure-group";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <DisclosureGroup defaultExpandedKeys={["refund"]} key={size} size={size}>
      <Disclosure id="refund">
        <DisclosureHeader>Refund policy?</DisclosureHeader>
        <DisclosurePanel>We offer refunds.</DisclosurePanel>
      </Disclosure>

      <Disclosure>
        <DisclosureHeader>Return policy?</DisclosureHeader>
        <DisclosurePanel>30-day return policy.</DisclosurePanel>
      </Disclosure>

      <Disclosure>
        <DisclosureHeader>Exchange policy?</DisclosureHeader>
        <DisclosurePanel>30-day exchange policy.</DisclosurePanel>
      </Disclosure>
    </DisclosureGroup>
  ));