Accordion

---

Simple and unstyled

EuiAccordion has been purposely designed with minimal styles, allowing you to visually enhance it as needed (see the accordion form example). The only styling enforced by EUI is the caret icon, which indicates to users that the item can be opened.

A buttonContent prop defines the content of the clickable area. On click it will expose the children and animate based on the height of those children.

For styling needs, classes can be individually applied with className (for the entire accordion), and buttonClassName (for the clickable area).

Arrow display

The arrow helps indicate the current state of the accordion (open or not) and points to the main triggering button text. If you must hide or change the side in which the arrow appears, use arrowDisplay: 'right' or 'none'

Multiple accordions

Use any number of EuiAccordion elements to visually display them as a group.

Due to the previously mentioned bare styles, it is recommended to place an EuiSpacer between accordion items. Padding within each accordion item can be applied via the paddingSize prop.

Extra actions

Use the extraAction prop to pass an extra action displayed on the right of any accordion. Usually this is a delete or button, but can be anything. Note that this action is separate from the click state that expands the accordion. This is needed to make it accessible.

Opened on initial render

Use the initialIsOpen prop to open the accordion when first rendered.

Controlling toggled state

Typically, the open and closed state of EuiAccordion is maintained by the component's internal state. Though, you can manually control it with:

• forceState: Accepts either 'open' or 'closed'.
• onToggle: A callback function returning true if the accordion is open

Loading state

Use the isLoading prop when not all of the accordion's content is ready yet. When using isLoading, the content of extraAction is replaced with a loading spinner.

Manage the content of the accordion using isLoadingMessage. By default, it is set to false and the content will remain unaltered. Set it to true to show a default loading message or pass a node to show a custom loading message.

Disabled state

In some cases you might want to prevent the user from closing the EuiAccordion. For example, if a form field is displaying an error, opening the accordion and preventing its closure until the error has been addressed will help the user find and fix the error.

The isDisabled prop will disable interaction on the button and the arrow. Use it in conjunction with initialIsOpen to achieve the desired effect.

warning

When disabling the interaction of accordions based on user input, it's advisable to ensure there is further explanation through the use of help or error text.

When content changes dynamically

If an accordion’s content changes height while the accordion is open, it will resize dynamically.

Interactive content in the trigger

Passing interactive content like links, buttons, or form elements as the buttonContent, will cause issues with the wrapping button element. To fix this, you can change this wrapping element to a div using buttonElement="div".

If you don't want the interactive content to trigger the accordion expansion, you will have to apply e.stopPropagation() to your element manually.

warning

Accordions need a focusable button for accessibility, so changing the element to anything other than a button will enforce the display of the arrow.

Styled for forms

Accordions are unstyled by default, but EuiAccordion supports several props around padding sizes and borders, as well as letting you pass in your own custom CSS styles. See the snippet tab below for a quick preview of said props, and the and the demo code tab below for custom hover and focus CSS overrides.

We also recommend creating a fieldset/legend combination for better accessibility and DOM structure by passing element="fieldset". This will set the entire accordion as a <fieldset> and automatically change the buttonElement to a <legend>.