Skip to main content
PROYECTOVIVIANA

Disclosure

Disclosure shows and hides content with an expand/collapse interaction. Use DisclosureGroup to create accordion patterns where disclosures coordinate their expanded state.

Import

import {
  Disclosure,
  DisclosureGroup,
  DisclosureTrigger,
  DisclosurePanel
} from '@proyecto-viviana/solid-spectrum';

Single Disclosure

A standalone disclosure panel that toggles between expanded and collapsed.

<Disclosure id="details">
  <DisclosureTrigger>Show Details</DisclosureTrigger>
  <DisclosurePanel>
    Content that can be shown or hidden...
  </DisclosurePanel>
</Disclosure>

Accordion (Single Expand)

A group of disclosures where only one can be expanded at a time, creating an accordion pattern. Expanding one panel automatically collapses the others.

Expanded: notifications

<DisclosureGroup>
  <Disclosure id="faq-1">
    <DisclosureTrigger>Question 1</DisclosureTrigger>
    <DisclosurePanel>Answer 1</DisclosurePanel>
  </Disclosure>
  <Disclosure id="faq-2">
    <DisclosureTrigger>Question 2</DisclosureTrigger>
    <DisclosurePanel>Answer 2</DisclosurePanel>
  </Disclosure>
</DisclosureGroup>

Multiple Expand

Allow multiple disclosures to be expanded simultaneously by setting allowsMultipleExpanded.

<DisclosureGroup allowsMultipleExpanded>
  <Disclosure id="section-1">...</Disclosure>
  <Disclosure id="section-2">...</Disclosure>
  <Disclosure id="section-3">...</Disclosure>
</DisclosureGroup>

Variants

Disclosures can be styled with different visual variants.

<Disclosure variant="default">...</Disclosure>
<Disclosure variant="bordered">...</Disclosure>
<Disclosure variant="filled">...</Disclosure>
<Disclosure variant="ghost">...</Disclosure>

Disclosure Props

Props

PropTypeDefaultDescription
idstring—Unique identifier for the disclosure, required when used inside a DisclosureGroup
variant'default' | 'bordered' | 'filled' | 'ghost''default'Visual style variant
isExpandedboolean—Whether the disclosure is expanded (controlled)
defaultExpandedbooleanfalseWhether the disclosure starts expanded (uncontrolled)
onExpandedChange(isExpanded: boolean) => void—Handler called when expanded state changes
isDisabledbooleanfalseWhether the disclosure is disabled
childrenJSX.Element—DisclosureTrigger and DisclosurePanel

DisclosureGroup Props

Props

PropTypeDefaultDescription
allowsMultipleExpandedbooleanfalseWhether multiple disclosures can be expanded at once
expandedKeysSet<string>—Keys of currently expanded disclosures (controlled)
defaultExpandedKeysSet<string>—Keys of initially expanded disclosures (uncontrolled)
onExpandedChange(keys: Set<string>) => void—Handler called when expanded state changes
isDisabledbooleanfalseWhether all disclosures in the group are disabled
childrenJSX.Element—Disclosure elements

DisclosureTrigger Props

Props

PropTypeDefaultDescription
childrenJSX.Element—Trigger label content

DisclosurePanel Props

Props

PropTypeDefaultDescription
childrenJSX.Element—Content shown when the disclosure is expanded

Accessibility

  • Trigger uses button element with aria-expanded state
  • Panel is linked to trigger via aria-controls
  • Enter or Space toggles the disclosure open/closed
  • Focus is managed properly when content is shown/hidden
  • In accordion mode, aria-expanded correctly reflects group coordination
  • Disabled state prevents interaction and is communicated via ARIA
  • Content is hidden from screen readers when collapsed