Accordion
Conteúdo colapsável organizado em seções verticais.
Uso básico
O design system da Morada.ai — tokens, componentes e templates para construir interfaces consistentes.
Com borda
Nome, endereço, tipo, número de unidades e informações básicas do empreendimento.
Variante card
Cada item vira um card com borda e espaçamento entre eles — use quando o accordion é o conteúdo principal da seção, não uma lista lateral.
Define como novos leads são atribuídos aos atendentes — rodízio, ponderado ou por afinidade de skill.
Props (raiz Accordion)
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
| variant | "default" | "card" | "default" | Estilo visual. `default` são linhas sem borda separadas por divisórias; `card` envolve cada item em um card com borda e espaçamento entre eles. |
| type | single | multiple | — | Obrigatório. `single` mantém no máximo uma seção aberta; `multiple` permite várias ao mesmo tempo. |
| value | string | string[] | — | Controlado: valor (ou lista) do(s) item(ns) aberto(s). |
| defaultValue | string | string[] | — | Não controlado: qual(is) item(ns) inicia(m) aberto(s). |
| onValueChange | function | — | Chamada quando o(s) valor(es) aberto(s) mudam. O parâmetro segue `type` (string vs. string[]). |
| collapsible | boolean | false | Apenas com `type="single"`: se o item ativo pode ser fechado por completo (nenhum aberto). |
| disabled | boolean | false | Quando verdadeiro, desativa todo o acordeão. |
Em AccordionItem: `value` é obrigatório e único por seção; use `disabled` para desativar só um item.
API completa, exemplos e detalhes (Radix): shadcn/ui — Accordion (Radix)