Collapse

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

O br-collapse mostra e esconde um bloco de conteúdo ao clicar no título. Funciona como um <details>.

<br-collapse>
  <span slot="trigger">Quem pode solicitar?</span>
  <p>Qualquer pessoa com CPF regular.</p>
</br-collapse>

Use open para começar aberto. Para que só um item fique aberto por vez (sanfona), dê o mesmo accordion-group a todos:

<br-collapse accordion-group="faq">…</br-collapse>
<br-collapse accordion-group="faq">…</br-collapse>

Os ícones de abrir e fechar podem ser trocados por icon-to-show e icon-to-hide, como propriedade ou como slot.

Quando usar

• Perguntas frequentes e conteúdos longos divididos em tópicos.
• Seções opcionais de um formulário longo.

Quando evitar

• Informação essencial, que precisa ficar sempre visível.
• Alternar entre visões diferentes da mesma tela: use br-tab.

Consulte as diretrizes de design do GovBR.

Exemplos

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Ativar movimento reduzido

Mudar fundo

Abrir no StackBlitz

Mais opções

Tela cheia

Carregando preview…

HTML

Controles do componente

Console: logs, eventos e erros

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Desfazer alteração

Refazer alteração

Comparar alterações

Formatar código

Resetar código para o estado inicial

Escolher formato para copiar

Propriedades

accordionGroup

Atributo	accordion-group
Descrição	Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez entre os irmãos do mesmo pai imediato.
Tipo	string
Valor padrão	null

colorMode

Atributo	color-mode
Descrição	Tema visual do Collapse/Accordion.
Tipo	"dark" | "light"
Valor padrão	'light'

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

divider

Atributo	divider
Descrição	Indica se o componente possui um divisor (divider) inferior.
Tipo	boolean
Valor padrão	false

expansionDirection

Atributo	expansion-direction
Descrição	Direção em que o conteúdo é expandido e para a qual o ícone aponta.
Tipo	"down" | "left" | "right" | "up"
Valor padrão	'down'

iconPosition

Atributo	icon-position
Descrição	Define a posição do ícone no acionador: 'left' ou 'right'.
Tipo	"left" | "right"
Valor padrão	'right'

iconToHide

Atributo	icon-to-hide
Descrição	Identificador de ícone Font Awesome 5 Free presente no cache local, exibido quando o conteúdo está visível. Para ícones por classe CSS, use o slot icon-to-hide.
Tipo	string
Valor padrão	'fa-solid:chevron-up'

iconToShow

Atributo	icon-to-show
Descrição	Identificador de ícone Font Awesome 5 Free presente no cache local, exibido quando o conteúdo está oculto. Para ícones por classe CSS, use o slot icon-to-show.
Tipo	string
Valor padrão	'fa-solid:chevron-down'

open

Atributo	open
Descrição	Controla se o collapse está aberto.
Tipo	boolean
Valor padrão	false

triggerVariant

Atributo	trigger-variant
Descrição	Forma visual do acionador sem alterar sua semântica nativa.
Tipo	"button" | "surface" | "text"
Valor padrão	'surface'

useIcons

Atributo	use-icons
Descrição	Controla se o identificador visual de expansão/retração será renderizado.
Tipo	boolean
Valor padrão	true

Slots

Nome	Descrição
"default"	Slot para o conteúdo expansível exibido ao abrir o collapse.
"icon-to-hide"	Ícone exibido quando o conteúdo está visível. Forma preferida para ícones por classe CSS; tem precedência sobre a prop iconToHide.
"icon-to-show"	Ícone exibido quando o conteúdo está oculto (ex.: <i slot="icon-to-show" class="fas fa-plus"></i>). Forma preferida para ícones por classe CSS; tem precedência sobre a prop iconToShow.
"trigger"	Slot para personalizar o acionador (texto, ícones, imagens, etc.).

Eventos

Evento	Descrição	Depreciação	Propagação
brCollapseClose	Evento emitido ao recolher.	---	true
brCollapseOpen	Evento emitido ao expandir.	---	true
brDidClose Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.		Use brCollapseClose.	true
brDidOpen Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.		Use brCollapseOpen.	true

Métodos

closeCollapse Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Descrição	Fecha o collapse programaticamente.
Assinatura	closeCollapse() => Promise<void>
Depreciação	Atualize a propriedade open.
Parâmetros	---

openCollapse Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Descrição	Abre o collapse programaticamente.
Assinatura	openCollapse() => Promise<void>
Depreciação	Atualize a propriedade open.
Parâmetros	---

toggle

Descrição	Alterna o estado aberto. O elemento também redispara o evento nativo toggle no host; essa ocorrência é sintética (isTrusted === false).
Assinatura	toggle() => Promise<void>
Parâmetros	---

CSS Shadow Parts

Nome	Descrição
"content"	Área de conteúdo expansível.
"details"	Elemento details nativo do collapse.
"trigger"	Acionador (summary) do collapse.

Eventos nativos

Ouça toggle no br-collapse, como em um <details>. Ele ocorre sempre que o conteúdo abre ou fecha.

const collapse = document.querySelector('br-collapse');
collapse.addEventListener('toggle', () => console.log(collapse.open));

toggle não se propaga para os elementos pais. Para tratar vários collapses em um só listener, use brCollapseOpen e brCollapseClose, que se propagam. brDidOpen e brDidClose são os nomes antigos desses eventos.

Atributos nativos

open funciona como no <details>. Para agrupar itens em sanfona, use accordion-group, não o atributo name do <details>.

Dependências

Usado por

• br-list

Depende de

• br-icon

Gráfico

Migração de <br-collapse> (1.x → 2.x)

collapsed indicava o estado fechado. Na 2.x, use open para o estado aberto, com o valor invertido.

1.x	2.x	O que fazer
—	accordion-group	Mantém só um item aberto por grupo.
collapsed	open	Inverta o valor.
nameIconCollapsed	icon-to-hide	Ícone mostrado quando o conteúdo está aberto.
nameIconNotCollapsed	icon-to-show	Ícone mostrado quando o conteúdo está fechado.
showIcon	use-icons	Use use-icons="false" para esconder os ícones.
title	slot="trigger"	Coloque o título no slot.

Para acompanhar a abertura e o fechamento, ouça brCollapseOpen e brCollapseClose.

1.x:

<br-collapse title="Detalhes">Conteúdo</br-collapse>

2.x:

<br-collapse>
  <span slot="trigger">Detalhes</span>
  Conteúdo
</br-collapse>