Accordion
Vertically stacked collapsible sections.
Basic
Morada.ai’s design system — tokens, components, and templates for consistent UIs.
With border
Name, address, type, number of units, and basic information.
Card variant
Each item becomes a bordered card with a gap between them — use it when the accordion is the primary content of a section, not a sidebar list.
Defines how new leads are assigned to agents — round-robin, weighted, or by skill match.
Props (Accordion root)
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "card" | "default" | Visual style. `default` is borderless rows separated by dividers; `card` wraps each item in a bordered card with a gap between them. |
| type | single | multiple | — | Required. `single` keeps at most one section open; `multiple` allows several at once. |
| value | string | string[] | — | Controlled: the open item value, or (for multiple) open item values. |
| defaultValue | string | string[] | — | Uncontrolled: which item(s) are open on first render. |
| onValueChange | function | — | Callback when the open value(s) change. Payload shape follows `type` (string vs. string[]). |
| collapsible | boolean | false | For `type="single"` only: whether the active item can be fully collapsed (none open). |
| disabled | boolean | false | When true, disables the entire accordion. |
On AccordionItem: `value` is required and must be unique per section; set `disabled` to disable a single item.
Full API, examples, and Radix details: shadcn/ui — Accordion (Radix)