Primitivedisclosure

Collapsible

Stable

Primitive de disclosure para expandir e contrair áreas de conteúdo. Controlado por um estado interno ou externo, gerencia a acessibilidade via atributos ARIA e suporta animações de altura.

Instalação

npx up-web-ds add collapsible

Preview

Default

With Chevron

Default Open

Fonte: shadcn/ui
Licença: MIT
Arquivos: 1

Disabled

All states

Default

With Chevron

Default Open

Fonte: shadcn/ui
Licença: MIT
Arquivos: 1

Disabled

Usage

Imports de Collapsible

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'
import { Button } from '@/components/ui/button'

Collapsible

1
2
3
4
5
6
7
8
9
10
11<Collapsible>
  <CollapsibleTrigger render={<Button variant="outline" />}>
    Mostrar detalhes
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p className="pt-3 type-small text-muted-foreground">
      O item foi importado de um registry externo e ainda não passou pela
      normalização.
    </p>
  </CollapsibleContent>
</Collapsible>

Props

Collapsible

Props de Collapsible
Prop	Type	Default	Description
className	`string \| ((state: CollapsibleRootState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
defaultOpen	`boolean`	`false`	Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
onOpenChange	`((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)`	sem valor padrão	Event handler called when the panel is opened or closed.
open	`boolean`	sem valor padrão	Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, CollapsibleRootState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: CollapsibleRootState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende CollapsiblePrimitive.Root.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

CollapsibleTrigger

Props de CollapsibleTrigger
Prop	Type	Default	Description
className	`string \| ((state: CollapsibleTriggerState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, CollapsibleTriggerState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: CollapsibleTriggerState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende CollapsiblePrimitive.Trigger.Props. Aceita também os atributos padrão de um elemento React (285 não listados).

CollapsibleContent

Props de CollapsibleContent
Prop	Type	Default	Description
className	`string \| ((state: CollapsiblePanelState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
hiddenUntilFound	`boolean`	`false`	Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM.
keepMounted	`boolean`	`false`	Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when `hiddenUntilFound` is used.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, CollapsiblePanelState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: CollapsiblePanelState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende CollapsiblePrimitive.Panel.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

Composition

Gatilho e painel são irmãos dentro do Collapsible, que é quem guarda o estado aberto/fechado.

Composição de Collapsible

Collapsible

CollapsibleTrigger
CollapsibleContent

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: o gatilho é um button, Enter e Space alternam o painel, e o foco permanece no gatilho depois de abrir — o painel é conteúdo, não destino. aria-expanded acompanha o estado real e aria-controls aponta para o painel que foi aberto. Um gatilho desabilitado usa aria-disabled com tabindex 0 em vez do atributo nativo: ele continua alcançável por Tab e é anunciado como desabilitado, recusando apenas a abertura — um controle que some da sequência de tabulação também some do outline que um usuário de leitor de tela percorre. Touch verificado em viewport de 375px com emulação de toque: os gatilhos ficam acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 e o toque abre. Reduced motion verificado em navegador com prefers-reduced-motion: reduce, e a divisão é o ponto: a transição de altura do painel é preservada, porque é ela que o Base UI observa para desmontar, enquanto o tween do chevron sai (motion-reduce:transition-none) e o ângulo continua chegando a 180deg — a rotação é indicador de estado, não ornamento.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: disclosure
Status: Stable

Origem e distribuição

Fonte: shadcn registry / collapsible
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/collapsible.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda