Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
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.

GitHub

Code examples

<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>

Code

<Collapsible />

import { Collapsible } from "@vygruppen/spor-react";

OBS! These are the props that can be used for Collapsible.Root, which wraps Collapsible.Content and Collapsible.Trigger

Props

Name
Type
Required?
Description
disabledbooleanDefault false. Whether the collapsible is disabled
defaultOpenbooleanDefault false. The initial open state of the collapsible when rendered.
collapsedHeightstring | numberThe height of the content while collapsed.
collapsedWidthstring | numberThe width of the content while collapsed
onOpenChange(details: OpenChangeDetails) => voidThe callback invoked when the open state changes.
openbooleanThe controlled open state of the collapsible.