Accordion
Accordions allow users to expand and collapse sections of content, helping reduce visual clutter whilst keeping related information easily accessible.
Quick Start
Import the accordion components and compose them together to create expandable content sections.
Accordions allow content to be expanded and collapsed on demand.
1import { 2Accordion, 3AccordionContent, 4AccordionItem, 5AccordionTrigger, 6} from "@ecos/ui"; 7 8<Accordion 9 type="single" 10 collapsible 11> 12 <AccordionItem value="item-1"> 13 <AccordionTrigger> 14 What is an Accordion? 15 </AccordionTrigger> 16 17 <AccordionContent> 18 Accordions allow content to be 19 expanded and collapsed on demand. 20 </AccordionContent> 21 </AccordionItem> 22</Accordion>
Single Accordion
Use type="single" when only one item should be open at a time.
Standard delivery takes 3-5 business days.
Returns can be made within 30 days of purchase.
Contact our support team for further assistance.
1<Accordion 2 type="single" 3 collapsible 4> 5 <AccordionItem value="shipping"> 6 <AccordionTrigger> 7 Shipping Information 8 </AccordionTrigger> 9 10 <AccordionContent> 11 Standard delivery takes 12 3-5 business days. 13 </AccordionContent> 14 </AccordionItem> 15 16 <AccordionItem value="returns"> 17 <AccordionTrigger> 18 Returns Policy 19 </AccordionTrigger> 20 21 <AccordionContent> 22 Returns can be made within 23 30 days of purchase. 24 </AccordionContent> 25 </AccordionItem> 26</Accordion>
Multiple Expansion
Use type="multiple" when users should be able to expand more than one section at the same time.
View details about available platform features.
Review role-based access configuration.
Configure email and in-app notification settings.
1<Accordion type="multiple"> 2 <AccordionItem value="features"> 3 <AccordionTrigger> 4 Features 5 </AccordionTrigger> 6 7 <AccordionContent> 8 View details about available 9 platform features. 10 </AccordionContent> 11 </AccordionItem> 12 13 <AccordionItem value="permissions"> 14 <AccordionTrigger> 15 Permissions 16 </AccordionTrigger> 17 18 <AccordionContent> 19 Review role-based access 20 configuration. 21 </AccordionContent> 22 </AccordionItem> 23</Accordion>
Default Open Item
Use defaultValue to display important content in an expanded state when the page first loads.
This accordion item is expanded by default.
This content remains collapsed until opened.
1<Accordion 2 type="single" 3 collapsible 4 defaultValue="item-1" 5> 6 <AccordionItem value="item-1"> 7 <AccordionTrigger> 8 Important Information 9 </AccordionTrigger> 10 11 <AccordionContent> 12 This accordion item is 13 expanded by default. 14 </AccordionContent> 15 </AccordionItem> 16</Accordion>
Rich Content
Accordion content can contain any React content including text, lists, forms, and custom components.
- Full name
- Email address
- Telephone number
- Company details
1<AccordionItem value="profile"> 2 <AccordionTrigger> 3 Profile Requirements 4 </AccordionTrigger> 5 6 <AccordionContent> 7 <TypographyUnorderedList> 8 <TypographyListItem>Full name</TypographyListItem> 9 <TypographyListItem>Email address</TypographyListItem> 10 <TypographyListItem>Telephone number</TypographyListItem> 11 <TypographyListItem>Company details</TypographyListItem> 12 </TypographyUnorderedList> 13 </AccordionContent> 14</AccordionItem>
API Reference
Accordion
Property | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | - | Determines whether one or multiple items can be expanded. |
| collapsible | boolean | false | Allows an open item to be collapsed when using single mode. |
| defaultValue | string | string[] | - | Defines the initially expanded accordion item or items. |
AccordionItem
Property | Type | Default | Description |
|---|---|---|---|
| value | string | - | Unique identifier used to control the expanded state. |
| className | string | - | Additional classes applied to the accordion item. |
AccordionTrigger
Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content displayed within the trigger button. |
| className | string | - | Additional classes applied to the trigger element. |
AccordionContent
Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content rendered when the accordion item is expanded. |
| className | string | - | Additional classes applied to the content container. |
Visual Reference
State | Example |
|---|---|
| Collapsed | Example content. |
| Expanded | Example content. |