Skip to Content
ComponentsDisclosure

Disclosure

An interactive component which expands/collapses a panel.

Documentation

Usage

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> ); }

Controlled

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.

Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis sapien, venenatis eu pharetra at, ullamcorper sed nibh.

State: open

"use client"; import { Disclosure, DisclosureContent, DisclosureTrigger, Flex, Text, } from "@optiaxiom/react"; import { useState } from "react"; export function App() { const [open, setOpen] = useState(true); return ( <Flex maxW="sm" w="full"> <Disclosure onOpenChange={setOpen} open={open}> <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> <Text fontSize="md">State: {open ? "open" : "closed"}</Text> </Flex> ); }

Indicator position

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

"use client"; 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.

"use client"; 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

Default: false

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

Display content after the button.

ReactNode

addonBefore

Display content before the button.

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

Control which side to place the chevron.

"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

Accessibility

Keyboard interactions

Key

Description

Space Enter
Opens/closes the panel.

Changelog

0.1.0

  • Added component
Last updated on