Components

DisclosureGroup

Show or hide related content behind an expandable label.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { DisclosureGroup } from '@swiftuijs/ui';
export default function Example() {
    return (<DisclosureGroup label="More Info">{(<VStack spacing={10} style={{ padding: '15px' }}>
        <Text>Hidden content</Text>
        <Text>This content is shown when expanded</Text>
      </VStack>)}</DisclosureGroup>);
}

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

Usage and limitations

  • Provide a descriptive label. Use defaultExpanded for local state, or expanded and onExpandedChange for controlled state.
  • The trigger and content have linked ARIA attributes and keyboard activation.
  • Closing unmounts children. Keep editable state above the group if it must survive closing.

More examples

Default Expanded
Controlled Mode
Multiple Groups
With Complex Content

API reference

PropTypeRequiredDescription
labelstringYesThe label for the disclosure toggle.
defaultExpandedbooleanNoWhether the group is initially expanded. Default: false
expandedbooleanNoControlled expanded state. If provided, the component becomes controlled.
onExpandedChange(expanded: boolean) => voidNoCallback fired when the expanded state changes.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

DefaultScrollAnchor

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

Divider

Separate adjacent content with a decorative line.