Expandable

Expandable reveals and hides its content by animating the space it takes on the page, letting the surrounding layout make room for it instead of jumping. It comes with no styles of its own, so you can put any content inside it and control the visibility with the active property.

By default, the content expands vertically and the animation runs on its height. Pass orientation="horizontal" to animate the width instead, which keeps the siblings next to it from being pushed around.

<Expandable
  active={detailsToggle.active}
  attributes={{ "aria-label": "Order details" }}
>
  <View paddingTop={4}>
    <View
      backgroundColor="neutral-faded"
      borderRadius="medium"
      padding={3}
      width="240px"
    >
      <Text variant="body-3" color="neutral-faded">
        Your order is packed and leaves the warehouse tomorrow morning.
      </Text>
    </View>
  </View>
</Expandable>

Expandable powers the Accordion component from the inside. Use Accordion when you also need a trigger and a toggle icon, and Expandable when you're building the trigger yourself, for example for filters, inline forms and details panels.

• Content is hidden with the hidden attribute when it's collapsed, which keeps it out of the keyboard navigation and the accessibility tree
• Pass aria-label or aria-labelledby through the attributes property to render the content as a labelled region landmark