Collapsible

An interactive component that expands/collapses a panel.

When To Use

Use the Collapsible component when you need to:

Toggle the visibility of content to save space
Create expandable sections for detailed information
Build FAQ interfaces with show/hide answers
Provide progressive disclosure for complex interfaces
Create expandable code blocks or additional details

Collapsible elements help simplify interfaces by hiding content until it's needed.

Examples

Basic#

Project Settings

Manage your project preferences here

With Icon#

Animated#

Slide Animation

Scale Animation

Props

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Checkbox

A control that allows the user to toggle between checked and unchecked states.

Command

Command menu for keyboard-first interfaces and quick actions.