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
collapsedHeightstring | numberThe height of the content while collapsed.
collapsedWidthstring | numberThe width of the content while collapsed
defaultOpenbooleanDefault false. The initial open state of the collapsible when rendered.
disabledbooleanDefault false. Whether the collapsible is disabled
onOpenChange(details: OpenChangeDetails) => voidThe callback invoked when the open state changes.
openbooleanThe controlled open state of the collapsible.