DisclosureGroup

Group multiple disclosures into an accordion.

Documentation: React Aria
Pattern: W3C ARIA
Source: GitHub
Issues: Report
Composes: Disclosure
Install: pnpm dlx @kkga/shim add disclosure-group

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

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

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

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

    <Disclosure title="What is your exchange policy?">
      We offer a 30-day no-questions-asked exchange policy.
    </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.

"use client";
import { Disclosure } 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" title="What is your refund policy?">
        We offer refunds.
      </Disclosure>

      <Disclosure title="What is your return policy?">
        30-day return policy.
      </Disclosure>

      <Disclosure title="What is your exchange policy?">
        30-day exchange policy.
      </Disclosure>
    </DisclosureGroup>
  ));

Variant

Use the variant prop on DisclosureGroup to set the visual style of the child Disclosure components.

We offer refunds.

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

export default () =>
  (["soft", "surface", "ghost"] as const).map((variant) => (
    <DisclosureGroup
      defaultExpandedKeys={["refund"]}
      key={variant}
      variant={variant}
    >
      <Disclosure id="refund" title="What is your refund policy?">
        We offer refunds.
      </Disclosure>

      <Disclosure title="What is your return policy?">
        30-day return policy.
      </Disclosure>

      <Disclosure title="What is your exchange policy?">
        30-day exchange policy.
      </Disclosure>
    </DisclosureGroup>
  ));