ExpandableItem

ExpandableItem creates expandable/collapsible section, similar to the HTML details disclosure element. When the user clicks on the summary the content expands or collapses.

Key features:

• Progressive disclosure: Show/hide content on demand to reduce visual clutter
• Flexible summary: Use text or rich components for the summary trigger
• Keyboard accessible: Full keyboard navigation support with Enter/Space keys
• Customizable icons: Choose your own expand/collapse icons or use a switch

Behaviors

This component supports the following behaviors:

Properties

contentWidth

default: "100%"

Sets the width of the expanded content area. Defaults to 100% to fill the parent container.

Controls the width of the expanded content area. Defaults to 100% to fill the parent container.

<App>
  <VStack gap="space-4">
    <ExpandableItem 
      summary="Default content width (100%)" 
      initiallyExpanded="true">
      <Stack backgroundColor="lightblue" padding="space-3">
        <Text>Content fills the full width</Text>
      </Stack>
    </ExpandableItem>
    
    <ExpandableItem 
      summary="Custom content width (50%)" 
      contentWidth="50%"
      initiallyExpanded="true">
      <Stack backgroundColor="lightgreen" padding="space-3">
        <Text>Content is 50% width</Text>
      </Stack>
    </ExpandableItem>
  </VStack>
</App>

<App>
  <VStack gap="space-4">
    <ExpandableItem 
      summary="Default content width (100%)" 
      initiallyExpanded="true">
      <Stack backgroundColor="lightblue" padding="space-3">
        <Text>Content fills the full width</Text>
      </Stack>
    </ExpandableItem>
    
    <ExpandableItem 
      summary="Custom content width (50%)" 
      contentWidth="50%"
      initiallyExpanded="true">
      <Stack backgroundColor="lightgreen" padding="space-3">
        <Text>Content is 50% width</Text>
      </Stack>
    </ExpandableItem>
  </VStack>
</App>

enabled

default: true

When true, the expandable item can be opened and closed. When false, it cannot be toggled.

fullWidthSummary

default: false

When true, the summary section takes the full width of the parent container. When combined with iconPosition='end', the icon is aligned to the far edge.

When true, the summary section takes the full width of the parent container, with the icon aligned to the far edge.

<App>
  <VStack gap="space-4" width="100%">
    <ExpandableItem 
      summary="Default summary (inline width)" 
      initiallyExpanded="true">
      <Text>The summary only takes up the space it needs.</Text>
    </ExpandableItem>
    
    <ExpandableItem 
      summary="Full width summary" 
      fullWidthSummary="true"
      initiallyExpanded="true">
      <Text>The summary spans the full width of the parent container.</Text>
    </ExpandableItem>
  </VStack>
</App>

<App>
  <VStack gap="space-4" width="100%">
    <ExpandableItem 
      summary="Default summary (inline width)" 
      initiallyExpanded="true">
      <Text>The summary only takes up the space it needs.</Text>
    </ExpandableItem>
    
    <ExpandableItem 
      summary="Full width summary" 
      fullWidthSummary="true"
      initiallyExpanded="true">
      <Text>The summary spans the full width of the parent container.</Text>
    </ExpandableItem>
  </VStack>
</App>

iconCollapsed

default: "chevronright"

The icon to display when the item is collapsed.

iconExpanded

default: "chevrondown"

The icon to display when the item is expanded.

iconPosition

default: "end"

Determines the position of the icon (start or end).

Available values:

initiallyExpanded

default: false

Determines if the component is initially expanded when rendered.

summary

The summary content that is always visible and acts as the trigger.

The summary property accepts either a simple text string or a component definition for rich content.

<App>
  <VStack gap="space-4">
    <ExpandableItem summary="Simple text summary" initiallyExpanded="true">
      <Text>This expandable item uses a simple text string for its summary.</Text>
    </ExpandableItem>
    
    <ExpandableItem initiallyExpanded="false">
      <property name="summary">
        <CHStack gap="space-2">
          <Icon name="apps" />
          <Text fontWeight="600">Custom Summary with Icon</Text>
          <Badge label="New" variant="success" />
        </CHStack>
      </property>
      <Text>
        This expandable item uses a rich component 
        definition with icons and badges in the summary.
      </Text>
    </ExpandableItem>
  </VStack>
</App>

<App>
  <VStack gap="space-4">
    <ExpandableItem summary="Simple text summary" initiallyExpanded="true">
      <Text>This expandable item uses a simple text string for its summary.</Text>
    </ExpandableItem>
    
    <ExpandableItem initiallyExpanded="false">
      <property name="summary">
        <CHStack gap="space-2">
          <Icon name="apps" />
          <Text fontWeight="600">Custom Summary with Icon</Text>
          <Badge label="New" variant="success" />
        </CHStack>
      </property>
      <Text>
        This expandable item uses a rich component 
        definition with icons and badges in the summary.
      </Text>
    </ExpandableItem>
  </VStack>
</App>

withSwitch

default: false

When true, a switch is used instead of an icon to toggle the expanded state.

Events

expandedChange

This event fires when the expandable item is expanded or collapsed. It provides a boolean value indicating the new state.

Signature: expandedChange(isExpanded: boolean): void

• isExpanded: A boolean indicating whether the item is now expanded (true) or collapsed (false).

Exposed Methods

collapse

This method collapses the item.

Signature: collapse(): void

expand

This method expands the item.

Signature: expand(): void

isExpanded

This method returns a boolean indicating whether the item is currently expanded.

Signature: isExpanded(): boolean

toggle

This method toggles the item's expanded state.

Signature: toggle(): void

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• content: The content section that is expanded or collapsed.
• summary: The summary section that is always visible and acts as the trigger.

Styling

Theme Variables