Skip to content
Vy logo
Components

Collapsible

Collapsible are user-friendly interface elements that allow for the expansion or collapse of a section, enabling users to reveal or hide information as needed.

Examples

Example of a simple collapsible

<Collapsible.Root>
    <Collapsible.Trigger marginBottom={1}>
      <Button> Toggle </Button>
    </Collapsible.Trigger>
    <Collapsible.Content>
      <Box padding="4" borderWidth="1px">
        Collapsible content
      </Box>
    </Collapsible.Content>
  </Collapsible.Root>

A collapsible can also be open by default

<Collapsible.Root defaultOpen={true}>
    <Collapsible.Trigger marginBottom={1}>
      <Button> Toggle </Button>
    </Collapsible.Trigger>
    <Collapsible.Content>
      <Box padding="4" borderWidth="1px">
        Collapsible content
      </Box>
    </Collapsible.Content>
  </Collapsible.Root>

A collapsible that shows a given height of the content even when collapsed. 

<Collapsible.Root collapsedHeight="100px">
    <Collapsible.Content borderWidth="1px"
      minHeight="100px"
      _open={{
          animationName: 'expand-height',
          animationDuration: 'slow',
      }}
      _closed={{
          animation: 'collapse-height',
          animationDuration: 'slow',
      }}
    >
      <Box padding="4">
        <Text> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dapibus pharetra tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam id posuere nibh, eu dignissim lacus. Aenean eu mi sem. Etiam placerat eleifend est id volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Donec rhoncus nulla eros, quis molestie quam rhoncus eu. Proin tristique dictum enim ac tempus. Sed ut quam lacus. Praesent id pretium sem, vel porta sem. Nulla facilisi. Cras mattis odio ac sapien eleifend hendrerit. Nam convallis porta ipsum.
        </Text>
      </Box>
    </Collapsible.Content>
    <Collapsible.Trigger marginTop={2}>
      <Button> Toggle </Button>
    </Collapsible.Trigger>
  </Collapsible.Root>