Expansion Panel

The Expansion Panel is a versatile component that allows users to show or hide content as needed. It's useful for optimizing screen real estate by hiding content that isn't immediately necessary and making it accessible with a single click or tap.

Report Issue Github

Usage

The Expansion Panel is particularly handy when you have a lot of information to display but don't want to overwhelm the user all at once. By grouping related content and allowing users to expand or collapse it as needed, you can provide a cleaner and more user-friendly UI.

Multiple Items

Display several panels in one go, with the ability to expand multiple at a time.


<ExpansionPanel
  items={[
    {
      header: 'Panel 1',
      children: <div>This is the content for Panel 1.</div>,
    },
    {
      header: 'Panel 2',
      children: <div>This is the content for Panel 2.</div>,
    },
    {
      header: 'Panel 3',
      children: <div>This is the content for Panel 3.</div>,
    },
    {
      header: 'Panel 4',
      children: <div>This is the content for Panel 4.</div>,
    },
  ]}
  multiple={true}
/>

Container Borderless Design

Show panels without the default borders for a minimalist appearance.


<ExpansionPanel
  items={[
    {
      header: 'Panel 1',
      children: <div>This is the content for Panel 1.</div>,
    },
    {
      header: 'Panel 2',
      children: <div>This is the content for Panel 2.</div>,
    },
    {
      header: 'Panel 3',
      children: <div>This is the content for Panel 3.</div>,
    },
    {
      header: 'Panel 4',
      children: <div>This is the content for Panel 4.</div>,
    },
  ]}
  containerOutlined={false}
/>

Header Borderless Design

Show panels without the default borders for a minimalist appearance.


<ExpansionPanel
  items={[
    {
      header: 'Panel 1',
      children: <div>This is the content for Panel 1.</div>,
    },
    {
      header: 'Panel 2',
      children: <div>This is the content for Panel 2.</div>,
    },
    {
      header: 'Panel 3',
      children: <div>This is the content for Panel 3.</div>,
    },
    {
      header: 'Panel 4',
      children: <div>This is the content for Panel 4.</div>,
    },
  ]}
  outlined={false}
/>

Sizes

Show panels without the different sizing.


<ExpansionPanel
  items={[
    {
      header: 'Panel 1',
      children: <div>This is the content for Panel 1.</div>,
    },
    {
      header: 'Panel 2',
      children: <div>This is the content for Panel 2.</div>,
    },
    {
      header: 'Panel 3',
      children: <div>This is the content for Panel 3.</div>,
    },
    {
      header: 'Panel 4',
      children: <div>This is the content for Panel 4.</div>,
    },
  ]}
  size={'xlarge'}
/>

Custom Appearance

Modify the Expansion Panel's visual presentation with a custom color for a unique look.


<ExpansionPanel
  color="violet"
  items={[
    {
      header: 'Panel 1',
      children: <div>This is the content for Panel 1.</div>,
    },
    {
      header: 'Panel 2',
      children: <div>This is the content for Panel 2.</div>,
    },
    {
      header: 'Panel 3',
      children: <div>This is the content for Panel 3.</div>,
    },
    {
      header: 'Panel 4',
      children: <div>This is the content for Panel 4.</div>,
    },
  ]}
  multiple={true}
/>

API

Props

Expansion Panel

Prop	Type	Default	Required
`items`	`ExpansionPanelItem[]`	-	-
`multiple`	`boolean`	`false`	-
`outlined`	`boolean`	`true`	-
`containerOutlined`	`boolean`	`true`	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-

Expansion Item

Prop	Type	Default	Required
`header`	`ReactNode`	-	Yes
`children`	`ReactNode`	-	Yes

Carousel

Image