Accordion Controlled

accordion-controlled.tsx

"use client"

import * as React from "react"

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"

export default function AccordionControlledDemo() {
  const [value, setValue] = React.useState<string[]>([])

  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      <Accordion className="w-full" value={value} onValueChange={setValue}>
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Base UI?</AccordionTrigger>
          <AccordionPanel>
            Honest UI gives you thoughtful components with visible, editable
            code that stays in your project.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>How do I get started?</AccordionTrigger>
          <AccordionPanel>
            Head to the “Get started” guide in the docs. If you’ve used
            component libraries before, you’ll feel at home.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>
            Can I use it for my project?
          </AccordionTrigger>
          <AccordionPanel>
            Yes. Honest UI is free and open source.
          </AccordionPanel>
        </AccordionItem>
      </Accordion>

      <div className="flex flex-col items-start gap-4">
        <Button
          variant="secondary"
          onClick={() => setValue(["item-1", "item-2"])}
        >
          Open First Two
        </Button>
        <p className="text-sm text-muted-foreground">
          Open items: {value.length > 0 ? value.join(", ") : "None"}
        </p>
      </div>
    </div>
  )
}