Panel

A content panel that supports collapsible, shadow, and border containers.

Import

MainIndividual
import { Panel, PanelGroup } from 'rsuite';

Examples

Basic

With border

With shadow

Scroll shadows

With action button

No header

Card

Card group

Collapsible

Fill the container

Panel group

Collapsible panel group

Accordion effect

Only one panel can be expanded.

Accessibility

ARIA properties

  • When the Panel is collapsible, set the aria-expanded property on the button to identify whether the current panel is expanded.
  • When the Panel is collapsible, set the aria-controls property on the button to identify the content area of the current panel.
  • When the Panel is collapsible, set the aria-labelledby property on the content area to identify the title of the current panel.

Keyboard interactions

  • When the Panel is collapsible, press the Enter or Space key to expand or collapse the panel.
  • When the Panel is collapsible, press the Tab key to move the focus to the next focusable panel.

Props

<Panel>

Property Type (Default) Description
bodyFill boolean Content area filled with containers
bodyProps HTMLAttributes The properties of the content area
bordered boolean Show border
classPrefix string ('panel') The prefix of the component CSS class
collapsible boolean Whether it is a collapsible panel
defaultExpanded boolean Expand by default
eventKey string The event key corresponding to the panel.
expanded boolean Expand the Panel
header ReactNode The head displays information.
id string HTML ID attribute
scrollShadow boolean The shadow of the content when scrolling
shaded boolean Add shadow effect to the border

<PanelGroup>

Property Type (Default) Description
accordion boolean Whether it is a collapsible panel
activeKey string Expand the Panel, corresponding to the 'Panel' of 'eventkey'
classPrefix string The prefix of the component CSS class
defaultActiveKey string The default expansion panel
onSelect (eventKey: string, event) => void Toggles the callback function for the expand panel
Vercel banner