# Accordion **Category**: react **URL**: https://heroui.com/en/docs/react/components/accordion **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/react/components/(navigation)/accordion.mdx > A collapsible content panel for organizing information in a compact space *** ## Usage ```tsx import { Accordion } from '@heroui/react'; ``` ```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 ```tsx import { Accordion } from '@heroui/react'; export default () => ( ) ``` ## Examples ### 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} ))} ); } ``` ### 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} ))} ); } ``` ### 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. ); } ``` ### 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.
); } ``` ### 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. ); } ``` ### 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 RenderFunction() { return (
} > {items.map((item, index) => (
}>
}>