HextaUI

Accordion: Disabled

Disable a single item with disabled on <AccordionItem />, or the whole accordion on the root.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    value: "what",
    question: "What is HextaUI?",
    answer:
      "A collection of components built on top of shadcn/ui, with careful attention to structure and micro-interactions.",
  },
  {
    value: "install",
    question: "How do I install a component?",
    answer:
      "Copy the source into your project, then edit it like any other file you own.",
  },
  {
    value: "license",
    question: "Can I use it in commercial projects?",
    answer:
      "Yes. Every component is free and open source, for personal and commercial work.",
  },
]

export function AccordionDisabled() {
  return (
    <Accordion variant="outline" className="w-full max-w-md">
      {items.map((item) => (
        <AccordionItem
          key={item.value}
          value={item.value}
          disabled={item.value === "install"}
        >
          <AccordionTrigger>{item.question}</AccordionTrigger>
          <AccordionContent>{item.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

This adds the example as components/examples/accordion/disabled.tsx, together with the Accordion component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/accordion-disabled.json

To add only the component, follow the Accordion installation.

Props in this example

The Accordion props this example sets, from the API reference.

PropTypeDefault
variant
"default" | "outline" | "separated" | "ghost""default"
PropTypeDefault
valueGenerated automatically when omitted.
Value–
disabled
booleanfalse

Every prop is in the Accordion API reference.

See them all, with keyboard support and accessibility notes, on the Accordion page.