Accordion - Keep React

The Accordion Component in the Keep React allows you to create collapsible sections of content, commonly known as accordions. Users can toggle the visibility of the content by clicking on the disclosure button. With customizable options for the theme, open state, type, and state, you can create accordion components that fit seamlessly into your design and provide an intuitive user experience.

Table of Contents#

Default Accordion#

The default Accordion component allows users to reveal and hide content by simply clicking on the disclosure button.

Flush Accordion#

Control the initial state of accordion panels with the flush property.

Accordion First Open Panel#

Use the openFirstPanel property to set the first accordion panel to be open by default.

The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified user experience across our products. It simplifies the design and development process by providing ready-to-use components that can be easily customized and integrated into various applications.

Accordion With Icon#

Enhance your accordion with icons for a more visually appealing experience.

Disabled Accordions#

Control user interactions by making specific AccordionPanel components non-interactive with the disabled property.

API Reference#

Explore the available props for the Accordion component

openFirstPanelKeep first panels always open.booleanfalse
flushAccordion without outer border and and background colorbooleanfalse
disabledDisable interaction with the accordion.booleanfalse