Collapsible

An interactive component that can be expanded or collapsed.

Demo

React

Vue

Example

React

import { Collapsible } from '@fintech-sandpit/ui/react';

return (
  <Collapsible.Root defaultOpen>
    <Collapsible.Trigger>
      What is a collapsible?

      <Collapsible.Indicator />
    </Collapsible.Trigger>

    <Collapsible.Content>
      A collapsible is a component that allows you to show and hide content.
    </Collapsible.Content>
  </Collapsible.Root>

  <Collapsible.Root>
    <Collapsible.Trigger>
      How does it work?

      <Collapsible.Indicator />
    </Collapsible.Trigger>

    <Collapsible.Content>
      Click the trigger button to toggle the visibility of the content.
    </Collapsible.Content>
  </Collapsible.Root>

  <Collapsible.Root>
    <Collapsible.Trigger>
      Can I customize it?

      <Collapsible.Indicator />
    </Collapsible.Trigger>

    <Collapsible.Content>
      Yes! You can customize the appearance using CSS classes and style props.
    </Collapsible.Content>
  </Collapsible.Root>
);

Vue

<script setup lang="ts">
import { Collapsible } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Collapsible.Root default-open>
    <Collapsible.Trigger>
      What is a collapsible?

      <Collapsible.Indicator />
    </Collapsible.Trigger>

    <Collapsible.Content>
      A collapsible is a component that allows you to show and hide content.
    </Collapsible.Content>
  </Collapsible.Root>

  <Collapsible.Root>
    <Collapsible.Trigger>
      How does it work?

      <Collapsible.Indicator />
    </Collapsible.Trigger>

    <Collapsible.Content>
      Click the trigger button to toggle the visibility of the content.
    </Collapsible.Content>
  </Collapsible.Root>

  <Collapsible.Root>
    <Collapsible.Trigger>
      Can I customize it?

      <Collapsible.Indicator />
    </Collapsible.Trigger>

    <Collapsible.Content>
      Yes! You can customize the appearance using CSS classes and style props.
    </Collapsible.Content>
  </Collapsible.Root>
</template>

Props

React

Name	Type	Default	Description
open	boolean	false	Controlled open state
defaultOpen	boolean	false	Whether the collapsible is open by default
disabled	boolean	false	Whether the collapsible is disabled

Vue

Name	Type	Default	Description
open	boolean	false	Controlled open state
default-open	boolean	false	Whether the collapsible is open by default
disabled	boolean	false	Whether the collapsible is disabled

Events

React

Name	Type	Description
onOpenChange	(value: OpenChangeDetails) => void	Callback fired when the open state changes

Vue

Name	Type	Description
open-change	(value: OpenChangeDetails) => void	Event emitted when the open state changes

Types

type OpenChangeDetails = {
  open: boolean;
}