Components

DisclosureGroup

DisclosureGroup is a view that shows or hides its content based on a disclosure state. DisclosureGroup creates an expandable/collapsible section with a toggle control.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<DisclosureGroup label="More Info">{(
      <VStack spacing={10} style={{ padding: '15px' }}>
        <Text>Hidden content</Text>
        <Text>This content is shown when expanded</Text>
      </VStack>
    )}</DisclosureGroup>

Default Expanded

Preview unavailable for this example in the static docs build.

Show code

<DisclosureGroup label="Details" defaultExpanded>{(
      <VStack spacing={10} style={{ padding: '15px' }}>
        <Text>This content is shown by default</Text>
        <Text>You can collapse it by clicking the label</Text>
      </VStack>
    )}</DisclosureGroup>

Controlled Mode

Preview unavailable for this example in the static docs build.

Show code

function ControlledDisclosureGroup() {
  const [expanded, setExpanded] = useState(false)

  return (
    <VStack spacing={20}>
      <Button onClick={() => setExpanded(!expanded)}>
        {expanded ? 'Collapse' : 'Expand'} Programmatically
      </Button>
      <DisclosureGroup
        label="Settings"
        expanded={expanded}
        onExpandedChange={setExpanded}
      >
        <VStack spacing={10} style={{ padding: '15px' }}>
          <Text>Setting 1</Text>
          <Text>Setting 2</Text>
          <Text>Setting 3</Text>
        </VStack>
      </DisclosureGroup>
    </VStack>
  )
}

Multiple Groups

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={15}>
      <DisclosureGroup label="Section 1">
        <VStack spacing={10} style={{ padding: '15px' }}>
          <Text>Content for section 1</Text>
        </VStack>
      </DisclosureGroup>
      <DisclosureGroup label="Section 2">
        <VStack spacing={10} style={{ padding: '15px' }}>
          <Text>Content for section 2</Text>
        </VStack>
      </DisclosureGroup>
      <DisclosureGroup label="Section 3">
        <VStack spacing={10} style={{ padding: '15px' }}>
          <Text>Content for section 3</Text>
        </VStack>
      </DisclosureGroup>
    </VStack>

With Complex Content

Preview unavailable for this example in the static docs build.

Show code

<DisclosureGroup label="Advanced Options">{(
      <VStack spacing={15} style={{ padding: '15px' }}>
        <Text style={{ fontWeight: 'bold' }}>Advanced Settings</Text>
        <Text>Option 1: Enable feature A</Text>
        <Text>Option 2: Enable feature B</Text>
        <Text>Option 3: Enable feature C</Text>
        <Button>Apply Settings</Button>
      </VStack>
    )}</DisclosureGroup>

API

Prop	Type	Required	Description
`label`	`string`	Yes	The label for the disclosure toggle.
`defaultExpanded`	`boolean`	No	Whether the group is initially expanded. Default: `false`
`expanded`	`boolean`	No	Controlled expanded state. If provided, the component becomes controlled.
`onExpandedChange`	`(expanded: boolean) => void`	No	Callback fired when the expanded state changes.

Inherits additional props from IBaseComponent.

Overview

DisclosureGroup is a view that shows or hides its content based on a disclosure state. DisclosureGroup creates an expandable/collapsible section with a toggle control.

SwiftUI Correspondence: Similar to SwiftUI's DisclosureGroup. Web behavior: The toggle is linked to its content with stable IDs and aria-controls / aria-labelledby.

Notes

DisclosureGroup requires a label prop
DisclosureGroup supports controlled and uncontrolled modes
Use defaultExpanded for uncontrolled mode
Use expanded and onExpandedChange for controlled mode
DisclosureGroup automatically handles expand/collapse state and accessibility linkage

Best Practices

Clear labels: Use descriptive labels that indicate what's inside
Content organization: Use DisclosureGroup to organize related content
State management: Choose controlled or uncontrolled mode based on your needs
Accessibility: DisclosureGroup includes proper ARIA attributes
Performance: DisclosureGroup only renders content when expanded

DefaultScrollAnchor

DefaultScrollAnchor adapts SwiftUI's `defaultScrollAnchor` modifier into an explicit wrapper.

Divider

Divider is a visual element that can be used to separate other content. Dividers are commonly used in Lists to separate items and create visual hierarchy.

DisclosureGroup

Examples

API

Overview

Notes

Best Practices

On this page