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 thepaddingSize 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 returningtrueif 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.
Accessibility recommendation
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.
Accessibility requirement
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>.
Props
EuiAccordion
Prop | Description and type | Default value |
|---|---|---|
Prop id# | Description and type Type: string | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop role# | Description and type Defaults to the group role. If your accordion contains significant enough content to be a document AriaRole | Default value group |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop element# | Description and type Applied to the entire .euiAccordion wrapper. "div" | "fieldset" | Default value |
Prop isLoading# | Description and type Change boolean | Default value |
Prop isDisabled# | Description and type Disable the open/close interaction and visually subdues the trigger boolean | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop buttonClassName# | Description and type Class that will apply to the trigger for the accordion. string | Default value |
Prop buttonProps# | Description and type Apply more props to the triggering button. Includes optional CommonProps & HTMLAttributes<HTMLElement> & { paddingSize?: "s" | "m" | "l"; } | Default value |
Prop buttonContentClassName# | Description and type Class that will apply to the trigger content for the accordion. string | Default value |
Prop buttonContent# | Description and type The content of the clickable trigger ReactNode | Default value |
Prop buttonElement# | Description and type Applied to the main button receiving the "button" | "div" | "legend" | Default value |
Prop arrowProps# | Description and type Extra props to pass to the EuiButtonIcon containing the arrow. Partial<Omit<EuiButtonIconProps, "iconType" | "onClick" | "aria-labelledby">> | Default value |
Prop extraAction# | Description and type Will appear right aligned against the button. Useful for separate actions like deletions. ReactNode | Default value |
Prop initialIsOpen# | Description and type The accordion will start in the open state. boolean | Default value |
Prop onToggle# | Description and type Optional callback method called on open and close with a single (isOpen: boolean) => void | Default value |
Prop paddingSize# | Description and type The padding around the exposed accordion content. "xs" | "s" | "m" | "l" | "xl" | "none" | Default value |
Prop arrowDisplay# | Description and type Placement of the arrow indicator, or 'none' to hide it. "none" | "left" | "right" | Default value |
Prop borders# | Description and type Optional border styling. Defaults to 'none'. "none" | "horizontal" | "all" | Default value |
Prop forceState# | Description and type Control the opening of accordion via prop "open" | "closed" | Default value |
Prop isLoadingMessage# | Description and type Choose whether the loading message replaces the content. Customize the message by passing a node ReactNode | Default value |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<unknown> | Default value |