Collapsible

Overview

The Collapsible component is a specialized component that allows users to hide and show content.

Default

import * as UI from "@iyk/ui"

export default () => (
  <UI.Collapsible.Root>
    <UI.Collapsible.Trigger>Toggle</UI.Collapsible.Trigger>
    <UI.Collapsible.Content>
      <div className="my-2 px-4 py-2 border">Content</div>
    </UI.Collapsible.Content>
  </UI.Collapsible.Root>
)

With large content

import * as UI from "@iyk/ui"

export default () => (
  <UI.Collapsible.Root>
    <UI.Collapsible.Trigger>Toggle</UI.Collapsible.Trigger>
    <UI.Collapsible.Content>
      <div className="my-2 px-4 py-2 border">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
      </div>
    </UI.Collapsible.Content>
  </UI.Collapsible.Root>
)

If you want to adjust the width to the available space, you can add w-max to the content container

import * as UI from "@iyk/ui"

export default () => (
  <UI.Collapsible.Root>
    <UI.Collapsible.Trigger>Toggle</UI.Collapsible.Trigger>
    <UI.Collapsible.Content>
      <div className="my-2 px-4 py-2 border w-max">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
      </div>
    </UI.Collapsible.Content>
  </UI.Collapsible.Root>
)

Hook

The Collapsible component also provides a hook that can be used to control the collapsible state. This is useful if you want to control the collapsible state and create custom triggers or content.

import * as UI from "@iyk/ui"

export default () => (
  <UI.Collapsible.Root>
    <MyCustomTrigger />
    <UI.Collapsible.Content>
      <div className="my-2 px-4 py-2 border">Content</div>
    </UI.Collapsible.Content>
  </UI.Collapsible.Root>
)

const MyCustomTrigger = () => {
  const { isOpen, toggle } = UI.Collapsible.useCollapsible()

  return (
    <UI.Button onClick={toggle} kind="outline" size="sm" type="button">
      {isOpen ? "Close" : "Open"}
    </UI.Button>
  )
}