# nord-accordion > Accordion is a set of collapsible sections, each with a header that toggles > the visibility of its content. It coordinates a group of > Accordion Item elements, keyboard focus > movement between them, and which items are open. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. > **Do:** - Use to group several related sections of content, such as a list of frequently asked questions or grouped settings. - Give each [Accordion Item](/components/accordion-item/) a unique `value` so the open state can be tracked. - Use the `multiple` attribute when more than one section should be expandable at the same time. - Control which sections are open with the `value` property (an array of item values); it is the single source of truth. Render the full set of items up front rather than adding or removing them after the accordion has connected. - Keep [Accordion Trigger](/components/accordion-trigger/) labels short and descriptive so users can scan the sections. > **Don't:** - Don’t use for a single disclosure of content, use [Collapsible](/components/collapsible/) instead. - Don’t nest interactive controls inside a trigger that compete with toggling the section. - Don’t hide content that the user always needs, such as primary actions or critical information. ## Examples ### Basic ```html What are your shipping options? We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders. What is your return policy? Returns accepted within 30 days. Items must be unused and in original packaging. Refunds processed within 5-7 business days. How can I contact customer support? Reach us via email, live chat, or phone. We respond within 24 hours during business days. ``` ### Overview ```html What are your shipping options? We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders. What is your return policy? Returns accepted within 30 days. Items must be unused and in original packaging. ``` ### Disabled ```html What are your shipping options? We offer standard (5-7 days), express (2-3 days), and overnight shipping. What is your return policy? Returns accepted within 30 days. Items must be unused and in original packaging. ``` ### Multiple ```html Notification Settings Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices. Privacy & Security Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account. Billing & Subscription View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription. ``` ### Start ```html What are your shipping options? We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders. What is your return policy? Returns accepted within 30 days. Items must be unused and in original packaging. ``` ### Custom Icon ```html What are your shipping options? We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders. What is your return policy? Returns accepted within 30 days. Items must be unused and in original packaging. ``` ### Custom Gap ```html What are your shipping options? We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders. What is your return policy? Returns accepted within 30 days. Items must be unused and in original packaging. ``` ## API Reference ### Properties - **multiple** (`boolean`, default: `false`) — Whether multiple items can be open at the same time. - **disabled** (`boolean`, default: `false`) — Whether the component should ignore user interaction. - **orientation** (`'vertical' | 'horizontal'`, default: `'vertical'`) — The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys. - **loop-focus** (`boolean`, default: `true`) — Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. ### Events - **change** (`AccordionChangeEvent`) — Dispatched when an item is expanded or collapsed. The event includes a value array of the currently open item values. ### Slots - **(default)** — Default slot for Accordion Item elements. ### CSS Custom Properties - `--n-accordion-item-gap` — Spacing between accordion items.