Disclosure

An interactive component which expands/collapses a panel.

#
Documentation

#
Usage

Use the open and defaultOpen props to toggle between controlled and uncontrolled usage. And combine it with onOpenChange to listen for changes to the state.


import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger>Disclosure label</DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Indicator position

Use the chevronPosition prop on DisclosureTrigger to control which side the chevron is placed.

Chevron position


import type { ComponentPropsWithRef } from "react";
 
import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
 
export function App({
  chevronPosition,
}: Pick<ComponentPropsWithRef<typeof DisclosureTrigger>, "chevronPosition">) {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger chevronPosition={chevronPosition}>
        Disclosure label
      </DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Addons

Use the addonBefore and addonAfter prop to add icons, text, or any other interactive elements to the start or end of the trigger.


import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
  toaster,
} from "@optiaxiom/react";
import { Pill } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger
        addonAfter={
          <Pill onClick={() => toaster.create("Clicked pill")}>3</Pill>
        }
      >
        Categories
      </DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Props

#
Disclosure

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`defaultOpen` The initial open state in uncontrolled mode. `false \| true`
`disabled` `false \| true`
`onOpenChange` Handler that is called when the open state changes. `(open: boolean) => void`
`open` The open state in controlled mode. `false \| true`

#
DisclosureTrigger

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`addonAfter` `ReactNode`
`addonBefore` `ReactNode`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`chevronPosition` `"end" \| "start"` Default: `start`
`className` `string`

#
DisclosureContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`transitionType` `"pop" \| "fade" \| "slide" \| "slidePop"` Default: `slide`

#
Changelog

#
0.1.0

Added component