Accordion

Recolhe e expande seções de conteúdo, uma ou várias por vez.

O Accordion esconde o conteúdo secundário atrás de um cabeçalho, como "Mais capacidades" no cartão de próximo passo. Use quando a informação é opcional; não esconda o que a pessoa precisa para decidir.

import { Accordion } from "@rastreio-x/ui";

Padrão

Cada Accordion.Item tem um id. Por padrão, abrir um item recolhe o outro.

Vários abertos

allowsMultipleExpanded deixa mais de um item aberto; defaultExpandedKeys define os iniciais.

Logo, cores e nome da loja.

Variante de superfície

variant="surface" desenha o acordeão como um bloco de superfície, para usar fora de um cartão.

Item desabilitado

Explique no próprio rótulo por que o item não abre.

Anatomia

Accordion
├── Accordion.Body
├── Accordion.Heading
├── Accordion.Indicator
├── Accordion.Item
├── Accordion.Panel
└── Accordion.Trigger

Accordion.Item: cada seção, identificada por id.
Accordion.Heading: o título semântico (level define o nível de h1 a h6).
Accordion.Trigger: o botão que abre e fecha; leva o texto e o Accordion.Indicator.
Accordion.Panel e Accordion.Body: a região recolhível e o seu conteúdo.

Propriedades

Raiz (Accordion):

Accordion
Prop	Tipo	Padrão	Descrição
`allowsMultipleExpanded`	`boolean`	-	Permite abrir vários itens ao mesmo tempo.
`children`	`ChildrenOrFunction<DisclosureGroupRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<DisclosureGroupRenderProps>`	`'react-aria-DisclosureGroup'`	Classes CSS aplicadas ao elemento.
`defaultExpandedKeys`	`Iterable<Key>`	-	Chaves das linhas expandidas inicialmente (não controlado).
`expandedKeys`	`Iterable<Key>`	-	Chaves das linhas expandidas (controlado).
`hideSeparator`	`boolean`	-	Esconde a linha entre os itens.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`onExpandedChange`	`((keys: Set<Key>) => any)`	-	Chamada quando as linhas expandidas mudam.
`render`	`DOMRenderFunction<'div', DisclosureGroupRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<DisclosureGroupRenderProps>`	-	Estilos em linha aplicados ao elemento.
`variant`	`'default' \| 'surface'`	-	Estilo: `default` ou `surface` (itens sobre uma superfície).

Item (Accordion.Item):

Accordion.Item
Prop	Tipo	Padrão	Descrição
`children`	`ChildrenOrFunction<DisclosureRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<DisclosureRenderProps>`	`'react-aria-Disclosure'`	Classes CSS aplicadas ao elemento.
`defaultExpanded`	`boolean`	-	Abre o item na primeira renderização (não controlado).
`id`	`Key`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`isExpanded`	`boolean`	-	Estado expandido (controlado).
`onExpandedChange`	`((isExpanded: boolean) => void)`	-	Chamada quando as linhas expandidas mudam.
`render`	`DOMRenderFunction<'div', DisclosureRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<DisclosureRenderProps>`	-	Estilos em linha aplicados ao elemento.

Título (Accordion.Heading):

Accordion.Heading
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	`'react-aria-Heading'`	Classes CSS aplicadas ao elemento.
`level`	`number`	`3`	Nível do título (1 a 6).
`render`	`DOMRenderFunction<'h1', undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.

Animações

CSS
indicativo

O painel abre e fecha com transição de altura em cerca de 250 ms, e o indicador gira. Com prefers-reduced-motion, o tema aplica motion-reduce:transition-none e o painel muda sem animar.

Acessibilidade

Cada gatilho é um button dentro de um título (h3 por padrão), com aria-expanded e aria-controls.
Tab percorre os gatilhos; Enter e Espaço abrem ou fecham.
O painel é uma região nomeada pelo gatilho.
O indicador é decorativo; o estado vem de aria-expanded.

Boas práticas

Faça

Esconder conteúdo opcional ou secundário, com título que diz o que há dentro.

Evite

Esconder o motivo de uma ação estar bloqueada ou campos obrigatórios.

Rótulos curtos e informativos, em Title Case.
Ajuste o level do título para respeitar a hierarquia da página.
Evite acordeões aninhados.
Para alternar visões equivalentes, use Tabs.

Relacionados

Tabs para alternar visões em vez de recolher conteúdo.
Card como contêiner do acordeão.
Switch para configurações dentro das seções.

Como o prazo é calculado?

Quais Marcos a Jornada tem?

Marca

Fontes

Créditos

Mais Capacidades

Detalhes do Pedido

Rastreio da Transportadora (em breve)