AccordionWithDisabled() — ui Function Reference

Architecture documentation for the AccordionWithDisabled() function in accordion-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AccordionWithDisabled() — ui Function Reference

Dependency Diagram

graph TD
  40d6446e_c8e1_1f76_1d98_5213ba809012["AccordionWithDisabled()"]
  aeea2cc4_46f4_ba87_3e70_fbf4ce4112e9["accordion-example.tsx"]
  40d6446e_c8e1_1f76_1d98_5213ba809012 -->|defined in| aeea2cc4_46f4_ba87_3e70_fbf4ce4112e9
  style 40d6446e_c8e1_1f76_1d98_5213ba809012 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/accordion-example.tsx lines 295–345

function AccordionWithDisabled() {
  const items = [
    {
      value: "item-1",
      trigger: "Can I access my account history?",
      content:
        "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.",
      disabled: false,
    },
    {
      value: "item-2",
      trigger: "Premium feature information",
      content:
        "This section contains information about premium features. Upgrade your plan to access this content.",
      disabled: true,
    },
    {
      value: "item-3",
      trigger: "How do I update my email address?",
      content:
        "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.",
      disabled: false,
    },
  ]

  return (
    <Example title="With Disabled">
      <Accordion
        type="single"
        collapsible
        className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border"
      >
        {items.map((item) => (
          <AccordionItem
            key={item.value}
            value={item.value}
            disabled={item.disabled}
            className="data-open:bg-muted/50 p-1"
          >
            <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
              {item.trigger}
            </AccordionTrigger>
            <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </Example>
  )
}