Primitivedisclosure

Accordion

Stable

Primitive de disclosure: uma pilha de cabeçalhos em que cada um revela o seu painel. Composto sobre Base UI Accordion; a abertura transiciona a altura pela escala de motion da Foundation, então reduced motion a colapsa sem desligar o disclosure.

Instalação

npx up-web-ds add accordion

Gera chevron-down para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Basic

Default

Multiple

Por npm run ds:add, que escreve em staging e registra a proveniência. Sem --promote nada é escrito em src/.

With Disabled Item

Rich Content

Implementação, metadata completa, examples, testes, registro no catálogo e tokens da Foundation. Além disso: dark mode, revisão de acessibilidade por teclado e leitor de tela, reduced motion, typecheck e biome.

As afirmações que o jsdom não consegue observar — alvo de toque e reduced motion — são provadas em tests/e2e/, não de memória. O validador cobra isso mecanicamente pelo DS011, e marcar stable para contornar o validador é a única saída que não vale.

All states

Basic

Default

Multiple

Por npm run ds:add, que escreve em staging e registra a proveniência. Sem --promote nada é escrito em src/.

With Disabled Item

Rich Content

Implementação, metadata completa, examples, testes, registro no catálogo e tokens da Foundation. Além disso: dark mode, revisão de acessibilidade por teclado e leitor de tela, reduced motion, typecheck e biome.

As afirmações que o jsdom não consegue observar — alvo de toque e reduced motion — são provadas em tests/e2e/, não de memória. O validador cobra isso mecanicamente pelo DS011, e marcar stable para contornar o validador é a única saída que não vale.

Usage

@/components/ui/accordion
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
Accordion
<Accordion className="max-w-md">
  <AccordionItem value="taxonomia">
    <AccordionTrigger>O que é uma layer no Up Web DS?</AccordionTrigger>
    <AccordionContent>
      <p>A posição de um item na taxonomia, independente do domínio.</p>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

Props de Accordion
PropTypeDefaultDescription
classNamestring | ((state: AccordionRoot.State<any>) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
defaultValueAccordionValue<any>sem valor padrãoThe uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead.
disabledbooleanfalseWhether the component should ignore user interaction.
hiddenUntilFoundbooleanfalseAllows 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.
keepMountedbooleanfalseWhether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.
loopFocusdeprecatedbooleansem valor padrãoDeprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior.
multiplebooleanfalseWhether multiple items can be open at the same time.
onValueChange((value: AccordionValue<any>, eventDetails: AccordionRootChangeEventDetails) => void)sem valor padrãoEvent handler called when an accordion item is expanded or collapsed. Provides the new value as an argument.
orientationdeprecatedOrientation'vertical'Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior.
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionRoot.State<any>>sem valor padrãoAllows 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.
styleReact.CSSProperties | ((state: AccordionRoot.State<any>) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.
valueAccordionValue<any>sem valor padrãoThe controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the `defaultValue` prop instead.

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

AccordionItem

Props de AccordionItem
PropTypeDefaultDescription
classNamestring | ((state: AccordionItemState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
disabledbooleanfalseWhether the component should ignore user interaction.
onOpenChange((open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void)sem valor padrãoEvent handler called when the panel is opened or closed.
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionItemState>sem valor padrãoAllows 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.
styleReact.CSSProperties | ((state: AccordionItemState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.
valueanysem valor padrãoA unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state.

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

AccordionTrigger

Props de AccordionTrigger
PropTypeDefaultDescription
classNamestring | ((state: AccordionTriggerState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
nativeButtonbooleantrueWhether 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>`).
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionTriggerState>sem valor padrãoAllows 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.
styleReact.CSSProperties | ((state: AccordionTriggerState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

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

AccordionContent

Props de AccordionContent
PropTypeDefaultDescription
classNamestring | ((state: AccordionPanelState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
hiddenUntilFoundbooleanfalseAllows 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.
keepMountedbooleanfalseWhether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionPanelState>sem valor padrãoAllows 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.
styleReact.CSSProperties | ((state: AccordionPanelState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

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

Composition

Um Accordion é uma lista de AccordionItem; cada item carrega o seu gatilho e o painel que ele abre.

Composição de Accordion

Accordion

  • AccordionItem
    • AccordionTrigger
    • AccordionContent

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: cada gatilho é um button dentro de um heading, Enter e Space alternam o painel, Tab percorre os gatilhos na ordem do documento, e o foco permanece no gatilho depois de abrir — o painel é conteúdo, não destino. Um item desabilitado continua focalizável e anunciado como desabilitado, e apenas recusa abrir: um cabeçalho que some da sequência de tabulação também some do outline que um usuário de leitor de tela percorre. O painel aberto é uma region nomeada pelo seu gatilho por aria-controls, e aria-expanded acompanha o estado real. Touch verificado em viewport de 375px com emulação de toque: os gatilhos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 e o toque abre e fecha. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a rotação do chevron é indicador de estado, então o ângulo permanece e só o tween sai (motion-reduce:transition-none). A transição de altura do painel é preservada de propósito: é ela que o Base UI observa para desmontar, e remover a transição deixaria o painel sem o transitionend que fecha o ciclo. Verificado nos dois modos: abre e fecha.

Classificação

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

Origem e distribuição

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

Acessibilidade

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

Dependências

Pacotes
@base-ui/react
Ícones
chevron-down
Construído sobre
Nenhum
Usado por
Nenhum ainda