Accordion

Um componente de interface do usuário que permite expandir e recolher seções de conteúdo.

Utilização

index.tsx
import { 
    Accordion, 
    AccordionItem, 
    AccordionTrigger, 
    AccordionContent 
} from "@convertcompany/ui";

Exemplos

Expansão múltipla

O Accordion pode ser configurado para permitir a expansão de múltiplos itens ao mesmo tempo. Para isso, utilize o valor multiple na propriedade type.

Expansão única

Nesse exemplo você pode expandir apenas um item por vez. Se você expandir um novo item, o item anterior será recolhido.

Props

Esse componente extende a implementação do Radix UI, e por isso, possui as mesmas propriedades. Para mais detalhes, consulte a documentação oficial.

Accordion

PropriedadeTipo
typeDefine se apenas um item pode estar aberto ou vários ao mesmo tempo.
single
multiple
defaultValueValor inicial dos itens abertos.
string
string[]
valueValor controlado dos itens abertos.
string
string[]
onValueChangeCallback acionado quando o valor muda.
(value: string | string[]) => void
collapsiblePermite fechar o item ativo mesmo em modo `single`.
boolean
classNameClasse CSS adicional para customização.
string

AccordionTrigger

PropriedadeTipo
childrenConteúdo visível do gatilho (ex: título, pergunta).
ReactNode
classNameClasse CSS adicional. Ícone de Chevron gira automaticamente ao expandir.
string

AccordionContent

PropriedadeTipo
childrenConteúdo que será exibido quando o item estiver aberto.
ReactNode
classNameClasse CSS adicional aplicada ao conteúdo interno.
string

AccordionItem

PropriedadeTipo
valueIdentificador único do item no contexto do Accordion.
string
classNameClasse CSS adicional (padrão inclui `border-b`).
string