Slide

If a slide animation for some collapsible content is needed, the Slide component can be used.

Usage

The Slide component should wrap the content that collapse and expand.

import Slide from "@kiwicom/orbit-components/lib/utils/Slide";
<Slide expanded={isExpanded} maxHeight={height}>
  {collapsibleContent}
</Slide>;

Props

Name	Type	Default	Description
transitionDuration	`string`	`"fast"`	Determines the duration of the animation. Can be `"slow"`, `"normal"` or `"fast"`.
children	`React.Node`		The expandable content that should be animated.
maxHeight	`number \\| null`		The maximum height the animation should take. Usually it is the height of the container.
expanded	`boolean`	`false`	Determines if the content is expanded or not. When changed to `true`, the animation occurs.
id	`string`		Sets the id for the wrapper component responsible for the animation.
ariaLabelledBy	`string`		Sets the ariaLabelledBy for the wrapper component responsible for the animation.
stopClickPropagation	`boolean`	`true`	Prevents click events inside the component from propagating to parent elements.

Accessibility

Automatic Accessibility Features

The Slide component implements several accessibility features to ensure proper interaction for all users:

aria-hidden: Automatically set to true when the content is collapsed and false when expanded
aria-labelledby: When provided via the ariaLabelledBy prop, associates the collapsible content with its label element

Best Practices

When using Slide for expandable components (like accordions or collapsible panels), ensure that:

The control that toggles the expanded state is keyboard focusable and has the corresponding aria-expanded attribute
The control has appropriate aria-controls attribute pointing to the Slide component’s id
If the control is an icon or icon button, it should have an accessible name via aria-label

Example with Accessibility Features

import Slide from "@kiwicom/orbit-components/lib/utils/Slide";
import Button from "@kiwicom/orbit-components/lib/Button";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Text from "@kiwicom/orbit-components/lib/Text";
import ChevronDown from "@kiwicom/orbit-components/lib/icons/ChevronDown";
import ChevronUp from "@kiwicom/orbit-components/lib/icons/ChevronUp";
const CollapsibleSection = () => {
  const [expanded, setExpanded] = React.useState(false);
  const toggleExpanded = () => setExpanded(!expanded);
  return (
    <>
      <Button
        onClick={toggleExpanded}
        iconRight={expanded ? <ChevronUp ariaHidden /> : <ChevronDown ariaHidden />}
        aria-expanded={expanded}
        aria-controls="details-section"
      >
        Toggle Details
      </Button>
      <Slide
        expanded={expanded}
        maxHeight={200}
        id="details-section"
        ariaLabelledBy="details-heading"
      >
        <Heading type="title3" id="details-heading">
          Section Details
        </Heading>
        <Text>This content expands and collapses with animation.</Text>
      </Slide>
    </>
  );
};

Click Propagation

By default, the stopClickPropagation prop is set to true, which prevents click events inside the Slide component from bubbling up to parent elements. This helps avoid unintended behaviors when the collapsible content contains interactive elements.

If you need click events to propagate normally, set stopClickPropagation={false}.

Slide animation