Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsAccordion
Designer doc
An accordion is a component that can be expanded or collapsed to show or hide content as needed. It consists of a header, which is shown at all times, and a content, which can be shown / hidden depending on user action.
Example
Basic Usage
Coral Accordion comes in three different styling variants: Contained (default), Outlined, and Borderless.
View code
Controlled Accordion
View code
Basic (Clickable) vs Interactive (Non-Clickable)
Coral Accordion also comes in two different types: Basic (default) and Interactive. This can be set using the clickable property found in AccordionHeader: true and false, respectively.
For Basic accordions, the whole of AccordionHeader is clickable, acting like a Button, to toggle the content. For Interactive accordions, only AccordionExpandButton is.
View code
Icon Customization
By default, AccordionExpandButton will display the Chevron and Caret icons for Basic and Interactive types, respectively. This can be overriden through its children property.
Furthermore, as the user expands / collapses the accordion, the icon will be rotated by 180 degrees for Basic accordions and 90 degrees for Interactive accordions, by default. This can be customised through disableRotate, getTransformFrom, and getTransformTo properties in AccordionExpandButton.
View code
Accordion Group
We can group multiple Accordions into an AccordionGroup to make them behave collectively. With it, we can specify the gap between the Accordion members and the mode: Single or Multiple. Using an AccordionGroup also enables keyboard arrow navigation between accordions.
View code
Controlled Accordion Group
We can control the AccordionGroup by overriding the expandedActiveIndexes and onExpandedIndexesChange props.
View code
API
Accordion
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| index | number | ||
| initialIsExpanded | boolean | ||
| isExpanded | boolean | ||
| onIsExpandedChange | (isExpanded: boolean) => void | ||
| variant | AccordionVariants | AccordionVariants.Contained |
AccordionContent
| Prop name | Type | Default | Description |
|---|---|---|---|
| animatedContainerProps | HTMLAttributes<HTMLDivElement> | {} | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| immediate | boolean | ||
| springProps | Remap<ControllerUpdate<Lookup<any>> & { ref?: SpringRef<Lookup<any>>; }> | {} |
AccordionExpandButton
| Prop name | Type | Default | Description |
|---|---|---|---|
| animatedContainerProps | HTMLAttributes<HTMLDivElement> | {} | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disableRotate | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| getTransformFrom | (isExpanded: boolean) => CSSProperties | ||
| getTransformTo | (isExpanded: boolean) => CSSProperties | ||
| immediate | boolean | ||
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| springProps | Remap<ControllerUpdate<Lookup<any>> & { ref?: SpringRef<Lookup<any>>; }> | {} | |
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |
AccordionGroup
| Prop name | Type | Default | Description |
|---|---|---|---|
| expandedIndexes | number[] | ||
| gap | number | 0 | Minimum gap value is 0 |
| initialExpandedIndexes | number[] | [] | |
| mode | AccordionGroupModes | AccordionGroupModes.Multiple | |
| onExpandedIndexesChange | (expandedIndexes: number[]) => void |
AccordionHeader
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| clickable | boolean | true | |
| leftElement | ReactNode | ||
| leftElementProps | HTMLAttributes<HTMLDivElement> | ||
| rightElement | ReactNode | ||
| rightElementProps | HTMLAttributes<HTMLDivElement> | ||
| titleProps | HTMLAttributes<HTMLDivElement> |