DisclosureGroup

A SwiftUI DisclosureGroup component for displaying expandable content. Also called Collapsible (Universal).

Expo UI DisclosureGroup matches the official SwiftUI DisclosureGroup API and displays a disclosure indicator that reveals or hides content.

Usage

Basic disclosure group

DisclosureGroup is most commonly used inside a Form so it picks up the standard iOS list styling with a chevron indicator.

import { useState } from 'react';
import {
  DisclosureGroup,
  Form,
  Host,
  Section,
  Text,
} from '@expo/ui/swift-ui';

export default function BasicDisclosureGroupExample() {
  const [isExpanded, setIsExpanded] = useState(true);
  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section>
          <DisclosureGroup
            label="Advanced settings"
            isExpanded={isExpanded}
            onIsExpandedChange={setIsExpanded}>
            <Text>Auto-update apps</Text>
            <Text>App downloads</Text>
            <Text>Offload unused apps</Text>
          </DisclosureGroup>
        </Section>
      </Form>
    </Host>
  );
}

An expanded Advanced settings group in a form, listing three settings rows

Initially expanded

Set isExpanded to true initially to show the content by default.

import { useState } from 'react';
import { Host, DisclosureGroup, Text } from '@expo/ui/swift-ui';

export default function InitiallyExpandedExample() {
  const [isExpanded, setIsExpanded] = useState(true);

  // A disclosure group fills the width it is given, so `matchContents` collapses it.
  return (
    <Host style={{ flex: 1 }}>
      <DisclosureGroup
        label="Details"
        isExpanded={isExpanded}
        onIsExpandedChange={setIsExpanded}>
        <Text>This content is visible by default.</Text>
      </DisclosureGroup>
    </Host>
  );
}

A Details group outside a form, expanded to show one line of content

Custom label

Use DisclosureGroup.Label when the label needs custom SwiftUI content or modifiers instead of the label string prop.

import { useState } from 'react';
import {
  DisclosureGroup,
  Form,
  Host,
  Section,
  Text,
} from '@expo/ui/swift-ui';
import { font, foregroundStyle } from '@expo/ui/swift-ui/modifiers';

export default function CustomLabelDisclosureGroupExample() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section>
          <DisclosureGroup
            isExpanded={isExpanded}
            onIsExpandedChange={setIsExpanded}>
            <DisclosureGroup.Label>
              <Text
                modifiers={[
                  font({ weight: 'semibold' }),
                  foregroundStyle('#0a7ea4'),
                ]}>
                Network options
              </Text>
            </DisclosureGroup.Label>
            <Text>Wi-Fi</Text>
            <Text>Bluetooth</Text>
            <Text>Cellular data</Text>
          </DisclosureGroup>
        </Section>
      </Form>
    </Host>
  );
}

A collapsed group in a form with a semibold teal Network options label

API

import { DisclosureGroup } from '@expo/ui/swift-ui';

Component