Accordion

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

export default function AccordionDemo() {
  return (
    <Accordion defaultValue={["shipping"]} className="w-full max-w-sm">
      <AccordionItem value="shipping">
        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
        <AccordionContent>
          Orders ship within one business day. Delivery takes 2–4 days in the EU
          and 5–8 days everywhere else.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>Can I return an item?</AccordionTrigger>
        <AccordionContent>
          Yes — within 30 days, in its original condition. Returns are free for
          members.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="warranty">
        <AccordionTrigger>Is there a warranty?</AccordionTrigger>
        <AccordionContent>
          Every product carries a two-year warranty against manufacturing
          defects.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

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

const questions = [
  {
    value: "seats",
    question: "How are seats billed?",
    answer:
      "You pay for active members only. Someone who hasn't signed in during a billing period isn't charged, and seats are prorated to the day when you add people mid-cycle.",
  },
  {
    value: "switch",
    question: "Can I switch plans later?",
    answer:
      "Any time. Upgrades take effect immediately; downgrades apply at the end of the current billing period so you never lose access to features you paid for.",
  },
  {
    value: "trial",
    question: "What happens when my trial ends?",
    answer:
      "Your workspace moves to the Free plan. Nothing is deleted — projects above the Free limits become read-only until you upgrade or archive them.",
  },
  {
    value: "invoices",
    question: "Do you provide invoices with VAT?",
    answer:
      "Yes. Add your company details and VAT ID under Billing and every invoice will include them. Invoices are available as PDF and can be sent to a separate billing email.",
  },
  {
    value: "security",
    question: "Where is my data stored?",
    answer:
      "In the EU by default, encrypted at rest and in transit. Enterprise workspaces can choose a data region and bring their own encryption keys.",
  },
]

export default function AccordionFaq() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-6">
      <div className="flex flex-col gap-1.5">
        <h3 className="text-heading-md text-foreground">
          Frequently asked questions
        </h3>
        <p className="text-sm text-muted-foreground">
          Everything about plans, billing and your data.
        </p>
      </div>
      <Accordion>
        {questions.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger>{item.question}</AccordionTrigger>
            <AccordionContent>{item.answer}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

const filters = [
  {
    value: "status",
    label: "Status",
    options: ["Backlog", "In progress", "In review", "Done"],
  },
  {
    value: "priority",
    label: "Priority",
    options: ["Urgent", "High", "Medium", "Low"],
  },
  {
    value: "team",
    label: "Team",
    options: ["Design", "Engineering", "Marketing"],
  },
]

export default function AccordionMultiple() {
  return (
    <Accordion
      multiple
      defaultValue={["status", "priority"]}
      className="w-full max-w-64"
    >
      {filters.map((filter) => (
        <AccordionItem key={filter.value} value={filter.value}>
          <AccordionTrigger>{filter.label}</AccordionTrigger>
          <AccordionContent>
            {/* pt-1 keeps the first checkbox's 24px target clear of the trigger. */}
            <FieldGroup className="gap-2.5 pt-1">
              {filter.options.map((option, index) => {
                const id = `${filter.value}-${index}`
                return (
                  <Field key={id} orientation="horizontal">
                    <Checkbox id={id} defaultChecked={index === 1} />
                    <FieldLabel htmlFor={id} className="font-normal">
                      {option}
                    </FieldLabel>
                  </Field>
                )
              })}
            </FieldGroup>
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

import {
  KeyRoundIcon,
  MonitorSmartphoneIcon,
  ShieldCheckIcon,
} from "lucide-react"

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

const sections = [
  {
    value: "2fa",
    icon: ShieldCheckIcon,
    title: "Two-factor authentication",
    summary: "Enabled · Authenticator app",
    body: "You'll be asked for a code from your authenticator app when you sign in on a new device. Keep your recovery codes somewhere safe — they're the only way back in if you lose your phone.",
  },
  {
    value: "passkeys",
    icon: KeyRoundIcon,
    title: "Passkeys",
    summary: "2 passkeys",
    body: "Passkeys let you sign in with Face ID, Touch ID or a security key instead of a password. They can't be phished and are stored on your devices.",
  },
  {
    value: "sessions",
    icon: MonitorSmartphoneIcon,
    title: "Active sessions",
    summary: "3 devices",
    body: "MacBook Pro · Warsaw — current session. iPhone 16 · Warsaw — 2 hours ago. Chrome on Windows · Berlin — 3 days ago.",
  },
]

export default function AccordionWithIcons() {
  return (
    <Accordion
      defaultValue={["2fa"]}
      className="w-full max-w-md rounded-xl border bg-card px-4 shadow-raised"
    >
      {sections.map((section) => (
        <AccordionItem key={section.value} value={section.value}>
          <AccordionTrigger>
            <span className="flex items-center gap-3">
              <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border bg-surface text-muted-foreground">
                <section.icon className="size-4" aria-hidden="true" />
              </span>
              <span className="flex flex-col gap-0.5">
                <span>{section.title}</span>
                <span className="text-body-xs text-muted-foreground">
                  {section.summary}
                </span>
              </span>
            </span>
          </AccordionTrigger>
          <AccordionContent className="pl-11">{section.body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

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

export default function AccordionDisabled() {
  return (
    <Accordion className="w-full max-w-sm">
      <AccordionItem value="profile">
        <AccordionTrigger>Profile</AccordionTrigger>
        <AccordionContent>
          Your name, photo and bio are visible to everyone in the workspace.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="sso" disabled>
        <AccordionTrigger>Single sign-on (Enterprise)</AccordionTrigger>
        <AccordionContent>
          Connect Okta, Entra ID or any SAML 2.0 provider.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="notifications">
        <AccordionTrigger>Notifications</AccordionTrigger>
        <AccordionContent>
          Choose which activity sends you an email or a push notification.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

"use client"

import * as React from "react"

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

const code =
  "rounded-md border bg-surface px-1 py-0.5 font-mono text-xs text-foreground"

const steps = [
  {
    value: "install",
    title: "Install the CLI",
    body: (
      <>
        Run the installer once per machine. It adds the{" "}
        <code className={code}>prfct</code> command to your path.
      </>
    ),
  },
  {
    value: "link",
    title: "Link your project",
    body: (
      <>
        Inside your repository, run <code className={code}>prfct link</code> and
        pick the workspace to connect to.
      </>
    ),
  },
  {
    value: "deploy",
    title: "Deploy",
    body: "Push to your main branch. Every commit gets a preview URL; main goes to production.",
  },
]

export default function AccordionControlled() {
  const [value, setValue] = React.useState<string[]>(["install"])
  const allOpen = value.length === steps.length

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex items-center justify-between">
        <span className="text-sm text-muted-foreground">
          {`${value.length} of ${steps.length} expanded`}
        </span>
        <Button
          variant="ghost"
          size="xs"
          onClick={() => setValue(allOpen ? [] : steps.map((s) => s.value))}
        >
          {allOpen ? "Collapse all" : "Expand all"}
        </Button>
      </div>
      <Accordion multiple value={value} onValueChange={setValue}>
        {steps.map((step) => (
          <AccordionItem key={step.value} value={step.value}>
            <AccordionTrigger>{step.title}</AccordionTrigger>
            <AccordionContent>{step.body}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}