# Accordion **Category**: react **URL**: https://www.heroui.com/docs/react/components/accordion **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(navigation)/accordion.mdx > A collapsible content panel for organizing information in a compact space *** ## Import ```tsx import { Accordion } from '@heroui/react'; ``` ### Usage ```tsx import { ArrowsRotateLeft, Box, ChevronDown, CreditCard, PlanetEarth, Receipt, ShoppingBag, } from "@gravity-ui/icons"; import {Accordion} from "@heroui/react"; const items = [ { content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase.", icon: , title: "How do I place an order?", }, { content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes.", icon: , title: "Can I modify or cancel my order?", }, { content: "We accept all major credit cards, including Visa, Mastercard, and American Express.", icon: , title: "What payment methods do you accept?", }, { content: "Shipping costs vary based on your location and the size of your order. We offer free shipping for orders over $50.", icon: , title: "How much does shipping cost?", }, { content: "Yes, we ship to most countries. Please check our shipping rates and policies for more information.", icon: , title: "Do you ship internationally?", }, { content: "If you're not satisfied with your purchase, you can request a refund within 30 days of purchase. Please contact our customer support team for assistance.", icon: , title: "How do I request a refund?", }, ]; export function Basic() { return ( {items.map((item, index) => ( {item.icon ? ( {item.icon} ) : null} {item.title} {item.content} ))} ); } ``` ### Anatomy Import the Accordion component and access all parts using dot notation. ```tsx import { Accordion } from '@heroui/react'; export default () => ( ) ``` ### Surface ```tsx import { ArrowsRotateLeft, Box, ChevronDown, CreditCard, PlanetEarth, Receipt, ShoppingBag, } from "@gravity-ui/icons"; import {Accordion} from "@heroui/react"; const items = [ { content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase.", icon: , title: "How do I place an order?", }, { content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes.", icon: , title: "Can I modify or cancel my order?", }, { content: "We accept all major credit cards, including Visa, Mastercard, and American Express.", icon: , title: "What payment methods do you accept?", }, { content: "Shipping costs vary based on your location and the size of your order. We offer free shipping for orders over $50.", icon: , title: "How much does shipping cost?", }, { content: "Yes, we ship to most countries. Please check our shipping rates and policies for more information.", icon: , title: "Do you ship internationally?", }, { content: "If you're not satisfied with your purchase, you can request a refund within 30 days of purchase. Please contact our customer support team for assistance.", icon: , title: "How do I request a refund?", }, ]; export function Surface() { return ( {items.map((item, index) => ( {item.icon ? ( {item.icon} ) : null} {item.title} {item.content} ))} ); } ``` ### Multiple Expanded ```tsx import {Accordion} from "@heroui/react"; export function Multiple() { return ( Getting Started Learn the basics of HeroUI and how to integrate it into your React project. This section covers installation, setup, and your first component. Core Concepts Understand the fundamental concepts behind HeroUI, including the compound component pattern, styling with Tailwind CSS, and accessibility features. Advanced Usage Explore advanced features like custom variants, theme customization, and integration with other libraries in your React ecosystem. Best Practices Follow our recommended best practices for building performant, accessible, and maintainable applications with HeroUI components. ); } ``` ### Controlled ```tsx "use client"; import {ChevronDown, ChevronUp} from "@gravity-ui/icons"; import {Accordion, Button, useDisclosureGroupNavigation} from "@heroui/react"; import React from "react"; const items = [ { content: "Learn the basics of HeroUI and how to integrate it into your React project. This section covers installation, setup, and your first component.", id: "getting-started", title: "Getting Started", }, { content: "Understand the fundamental concepts behind HeroUI, including the compound component pattern, styling with Tailwind CSS, and accessibility features.", id: "core-concepts", title: "Core Concepts", }, { content: "Explore advanced features like custom variants, theme customization, and integration with other libraries in your React ecosystem.", id: "advanced-usage", title: "Advanced Usage", }, ]; export function Controlled() { const [expandedKeys, setExpandedKeys] = React.useState( new Set(["getting-started"]), ); const itemIds = items.map((item) => item.id); const {isNextDisabled, isPrevDisabled, onNext, onPrevious} = useDisclosureGroupNavigation({ expandedKeys, itemIds, onExpandedChange: setExpandedKeys, }); return (

Expanded: {[...expandedKeys].join(", ") || "none"}

{items.map((item) => ( {item.title} {item.content} ))}
); } ``` ### Custom Indicator ```tsx "use client"; import type {Key} from "@heroui/react"; import {ChevronsDown, CircleChevronDown, Minus, Plus} from "@gravity-ui/icons"; import {Accordion} from "@heroui/react"; import React from "react"; export function CustomIndicator() { const [expandedKeys, setExpandedKeys] = React.useState>(new Set([""])); return ( Using Plus/Minus Icon {expandedKeys.has("1") ? : } This accordion uses a plus icon that transforms when expanded. The icon automatically rotates 45 degrees to form an X. Using Caret Icon This item uses a caret icon for the indicator. The rotation animation is applied automatically. Using Arrow Icon This item uses an arrow icon. Any icon you pass will receive the rotation animation when the item expands. ); } ``` ### Disabled State ```tsx import {Accordion} from "@heroui/react"; export function Disabled() { return (

Entire accordion disabled

Disabled Item 1 This content cannot be accessed when the accordion is disabled. Disabled Item 2 This content cannot be accessed when the accordion is disabled.

Individual items disabled

Active Item This item is active and can be toggled normally. Disabled Item This content cannot be accessed when the item is disabled. Another Active Item This item is also active and can be toggled.
); } ``` ### FAQ Layout ```tsx import {ChevronDown} from "@gravity-ui/icons"; import {Accordion} from "@heroui/react"; export function FAQ() { const categories = [ { items: [ { content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase.", title: "How do I place an order?", }, { content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes.", title: "Can I modify or cancel my order?", }, ], title: "General", }, { items: [ { content: "You can purchase a license directly from our website. Select the license type that fits your needs and proceed to checkout.", title: "How do I purchase a license?", }, { content: "A standard license is for personal use or small projects, while a pro license includes commercial use rights and priority support.", title: "What is the difference between a standard and a pro license?", }, ], title: "Licensing", }, { items: [ { content: "You can reach our support team through the contact form on our website, or email us directly at support@example.com.", title: "How do I get support?", }, ], title: "Support", }, ]; return (

Frequently Asked Questions

Everything you need to know about licensing and usage.

{categories.map((category) => (

{category.title}

{category.items.map((item, index) => ( {item.title} {item.content} ))}
))}
); } ``` ### Custom Styles ```tsx import {ChevronDown} from "@gravity-ui/icons"; import {Accordion, cn} from "@heroui/react"; const items = [ { content: "Stay informed about your account activity with real-time notifications. ", iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/bell-small.png", subtitle: "Receive account activity updates", title: "Set Up Notifications", }, { content: "Enhance your browsing experience by installing our official browser extension", iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/compass-small.png", subtitle: "Connect you browser to your account", title: "Set up Browser Extension", }, { content: "Begin your journey into the world of digital collectibles by creating your first NFT. ", iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/mint-collective-small.png", subtitle: "Create your first collectible", title: "Mint Collectible", }, ]; export function CustomStyles() { return ( {items.map((item, index) => ( {item.iconUrl ? ( {item.title} ) : null}
{item.title} {item.subtitle}
{item.content} ))} ); } ``` ### Without Separator ```tsx import {ChevronDown, CreditCard, Receipt, ShoppingBag} from "@gravity-ui/icons"; import {Accordion} from "@heroui/react"; const items = [ { content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase.", icon: , title: "How do I place an order?", }, { content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes.", icon: , title: "Can I modify or cancel my order?", }, { content: "We accept all major credit cards, including Visa, Mastercard, and American Express.", icon: , title: "What payment methods do you accept?", }, ]; export function WithoutSeparator() { return ( {items.map((item, index) => ( {item.icon ? ( {item.icon} ) : null} {item.title} {item.content} ))} ); } ``` ### Custom Render Function ```tsx "use client"; import { ArrowsRotateLeft, Box, ChevronDown, CreditCard, PlanetEarth, Receipt, ShoppingBag, } from "@gravity-ui/icons"; import {Accordion} from "@heroui/react"; const items = [ { content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase.", icon: , title: "How do I place an order?", }, { content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes.", icon: , title: "Can I modify or cancel my order?", }, { content: "We accept all major credit cards, including Visa, Mastercard, and American Express.", icon: , title: "What payment methods do you accept?", }, { content: "Shipping costs vary based on your location and the size of your order. We offer free shipping for orders over $50.", icon: , title: "How much does shipping cost?", }, { content: "Yes, we ship to most countries. Please check our shipping rates and policies for more information.", icon: , title: "Do you ship internationally?", }, { content: "If you're not satisfied with your purchase, you can request a refund within 30 days of purchase. Please contact our customer support team for assistance.", icon: , title: "How do I request a refund?", }, ]; export function CustomRenderFunction() { return (
} > {items.map((item, index) => (
}>
}>