Collapse

Collapse is a component that allows you to expand or collapse an element for display.

クリリンのことか……クリリンのことかーーーっ！！！！！

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open}>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

import { Collapse } from "@yamada-ui/react"

import { Collapse } from "@/components/ui"

import { Collapse } from "@workspaces/ui"

<Collapse />

Change the Duration

To change the duration, set a number (in seconds) to duration.

クリリンのことか……クリリンのことかーーーっ！！！！！

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open} duration={0.7}>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Unmount on Exit

To unmount the component when it is not visible, set unmountOnExit to true.

私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open} unmountOnExit>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>

    <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </Box>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Disable Opacity Animation

To disable the opacity animation, set animationOpacity to false.

クリリンのことか……クリリンのことかーーーっ！！！！！

私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse animationOpacity={false} open={open}>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>

    <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </Box>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Add a Starting Height

To add a starting height, set a string or number to startingHeight.

私の戦闘力は530000です。
ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……

const [open, { toggle }] = useBoolean()

return (
  <VStack alignItems="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open} startingHeight={23}>
      <Box>
        私の戦闘力は530000です。
        <br />
        ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Box>
    </Collapse>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Prop	Default	Type / Description
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`enter`	-	`any` Custom `enter`.
`exit`	-	`any` Custom `exit`. A target to animate to when this component is removed from the tree. This component must be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary.
`initial`	-	`any` Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation)
`animationOpacity`	`true`	`boolean` If `true`, the opacity of the content will be animated.
`delay`	`0`	`MotionLifecycleProps<number> \| number` Custom `delay` definition for `enter` and `exit`.
`duration`	`0.2`	`MotionLifecycleProps<number> \| number` Custom `duration` definition for `enter` and `exit`.
`endingHeight`	`"auto"`	`number \| string` The height you want the content in its expanded state.
`open`	-	`boolean` Show the component. triggers when enter or exit states.
`startingHeight`	`0`	`number \| string` The height you want the content in its collapsed state.
`transition`	-	`MotionLifecycleProps<Transition>` Custom `transition` definition for `enter` and `exit`.
`transitionEnd`	-	`MotionLifecycleProps<ResolvedValues>` Custom `transitionEnd` definition for `enter` and `exit`.
`unmountOnExit`	-	`boolean` If `true`, the element will unmount when `open={false}` and animation is done.

Similar Components

Fade is a component that gradually shows or hides an element.

FadeScale is a component that gradually scales up to reveal or scales down to hide an element.

Slide is a component that shows or hides an element from the corners of the page.

SlideFade is a component that gradually shows or hides an element while moving it from a specified position.

Accordion is a component for a list that displays information in an expandable or collapsible manner.

Airy is a component that provides a smooth animation to switch between two elements.

Drawer is a component for a panel that appears from the edge of the screen.

Flip is a component that provides an animation to switch between two elements while flipping.

Uses Components & Hooks

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Used By Components & Hooks

Accordion is a component for a list that displays information in an expandable or collapsible manner.