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 you to craft collapsible content sections. Users can reveal and hide the content by simply clicking on the disclosure button.

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.

Controlling Collapse Behavior#

The collapseAll property lets you control the initial state of accordion panels. When set to true, all panels are collapsed by default. Users can then expand individual panels as needed.

Visual Context with Left-Side Icons#

Using the iconPosition="left" property in the AccordionPanel, you can position icons on the left side of the panel header. This allows you to offer context or indicate the content within the panel.

Customizing Icons#

If you prefer custom icons, you have the freedom to choose your preferred icons for the accordion's open and close states. Utilize the openIcon and closeIcon props for this purpose.

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.

Panels That Stay Open#

With the alwaysOpen={true} property, you can configure all panels to remain expanded. This eliminates the need for users to manually toggle panels, ensuring all content is consistently visible.

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.

Disabled Accordions#

If you need to control which panels users can interact with, the disabled property on specific AccordionPanel components makes certain panels non-interactive.

API Reference#

Explore the available props for the Accordion component

PropertyDescriptionTypeDefault
alwaysOpenKeep first panels always open.booleanfalse
flushAccordion without outer border and rounded corners.booleanfalse
collapseAllCollapse panels by default.booleanfalse
iconPositionPosition of the arrow icon.
left
right
left
disabledDisable interaction with the accordion.booleanfalse