@kaizen/draft-collapsible NPM

title: "Collapsible" navTitle: "Collapsible" summaryParagraph: Collapsibles are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired. tags: "Expandable", "Accordion", "Show and hide", "Reveal", "Disclosure" githubLabels: "component:collapsible" needToKnow:

"We usually start collapsibles in a collapsed position by default so that users can see what's available."
"We often avoid accordions, which are a specific type of collapsible that allows only 1 section open at a time and is often an annoying constraint on user interaction." demoStoryId: components-collapsible--single-collapsible-kaizen-site-demo health: designed: true documented: true implemented: true latestDesign: false allVariants: true responsive: true internationalized: false accessible: false

import WhenToUseAndWhenNotToUse from "docs-components/WhenToUseAndWhenNotToUse" import WhenToUse from "docs-components/WhenToUse" import WhenNotToUse from "docs-components/WhenNotToUse"

Visuals

UI Kit

Options

Collapsible group: a group of related collapsible sections that may be combined or separated by whitespace.
Single collapsible: a standalone collapsible for 1 item of content.
Header:
- Default header: provide plain text for a title to use default styling.
- Custom header: supply your own header content and styling for the header and title.
Lazy-loading: when handling lots of data, you might lazy load collapsible content for performance reasons. This might limit animation.
Sticky header: when the user scrolls down a long way, they can keep context of where they are by looking at the sticky header. They may also collapse a long section easily using the sticky header.

We don't yet support:

Accordion: a collapsible group that only allows 1 section to be open at a time.
Show/hide button for outside of the collapsible group.

To keep in mind

Chevron:
- We only support chevron on the right. We show a downwards chevron when section is closed and upwards when open.
Avoid multi-level expansions.
Animation: we animate expansion using a reveal animation (see animation for guidance on timing and variable height animations).

When to use and when not to use

Use collapsibles when many users want an overview and some users want to dig into specific parts.
Use accordion when it’s extremely important to focus on one single thing at a time.

Use a Table when there’s a consistent heading and tabular data.

External links

@kaizen/brand @kaizen/button @kaizen/component-base @kaizen/component-library @kaizen/typography classnames react-animate-height uuid

@infinitebrahmanuniverse/nolb-_kai @everything-registry/sub-chunk-508 @zalastax/nolb-_kai

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

1.3.30-canary-pink-button.4

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

@kaizen/draft-collapsible v3.5.41

Visuals

UI Kit

Options

To keep in mind

When to use and when not to use

See also

External links