Skip to content
Yuzur1ha Open

Component referenceDraft

Disclosure

Disclosure owns one independent expandable region with a labelled trigger.

Updated

Design notes

Its solid triangle points right when collapsed and down when expanded. Use Accordion when multiple regions share selection rules.

Playground

Playgrounddemo.tsx

Your input is retained when this section is collapsed.

content/components/disclosure/demo.tsx

import { useState } from "react"
import {
  Disclosure,
  DisclosureTrigger,
  DisclosureContent,
  TextField,
} from "@yuzur1ha/ui"
export function DisclosureDemo() {
  const [note, setNote] = useState("")
  return (
    <>
      <Disclosure defaultOpen>
        <DisclosureTrigger>Additional details</DisclosureTrigger>
        <DisclosureContent>
          <TextField
            label="Internal note"
            value={note}
            onChange={(event) => setNote(event.target.value)}
            placeholder="Optional note"
            hint="Your input is retained when this section is collapsed."
          />
        </DisclosureContent>
      </Disclosure>
      <Disclosure>
        <DisclosureTrigger>Privacy information</DisclosureTrigger>
        <DisclosureContent>
          <p>
            Only the information needed for this session is stored in this demo.
          </p>
        </DisclosureContent>
      </Disclosure>
      <Disclosure disabled>
        <DisclosureTrigger>Unavailable details</DisclosureTrigger>
        <DisclosureContent>Unavailable</DisclosureContent>
      </Disclosure>
    </>
  )
}

API

Disclosure

Radix collapsible root with controlled or uncontrolled open state. Native div attributes are forwarded.

DisclosureProps
PropertyTypeRequiredDefaultDescription
openbooleanNo—Controlled open state. Pair with onOpenChange.
defaultOpenbooleanNo—Initial open state when open is omitted.
onOpenChange((open: boolean) => void)No—Called when opening or closing is requested.
disabledbooleanNo—Disable disclosure trigger interactions.
childrenReactNodeNo—Content rendered inside the component.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
asChildbooleanNo—Render through one child element instead of the default element. The child must forward its ref and accept the supplied props.
refRef<HTMLDivElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

DisclosureTrigger

A native button in a semantic heading. The component owns its trigger ID and solid triangle; asChild is not supported.

DisclosureTriggerProps
PropertyTypeRequiredDefaultDescription
headingLevel2 | 3 | 4 | 5 | 6No3Semantic heading level wrapping the trigger button.
childrenReactNodeNo—Content rendered inside the component.
disabledbooleanNo—Disables the native control.
onClickMouseEventHandler<HTMLButtonElement>No—Native activation handler.
classNamestringNo""Additional classes applied to the component’s documented root or control.
refRef<HTMLButtonElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

DisclosureContent

A labelled collapsible region. Native attributes and ref apply to the outer panel, which contains a spacing wrapper.

DisclosureContentProps
PropertyTypeRequiredDefaultDescription
childrenReactNodeNo—Content rendered inside the component.
forceMounttrueNo—Keep the Radix content mounted for externally managed visibility or animation. The consumer must manage its closed presentation.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLDivElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.