K
KoreUI

Accordion

UI

Paneles colapsables para organizar contenido en secciones expandibles. Usa Alpine.js para la interactividad.

Uso básico

Contenido de la respuesta.
Información de precios. 
<x-kore::accordion>
    <x-kore::accordion.item id="faq-1" title="¿Cómo funciona?">
        Contenido de la respuesta.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="faq-2" title="¿Cuánto cuesta?">
        Información de precios.
    </x-kore::accordion.item>
</x-kore::accordion>
<x-kore::accordion>
    <x-kore::accordion.item id="faq-1" title="¿Cómo funciona?">
        Contenido de la respuesta.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="faq-2" title="¿Cuánto cuesta?">
        Información de precios.
    </x-kore::accordion.item>
</x-kore::accordion>

Múltiples abiertos

Permite abrir varios paneles a la vez con la prop multiple.

Abierta por defecto.
Cerrada por defecto.
También abierta por defecto. 
<x-kore::accordion multiple>
    <x-kore::accordion.item id="s1" title="Sección 1" open>
        Abierta por defecto.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="s2" title="Sección 2">
        Cerrada por defecto.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="s3" title="Sección 3" open>
        También abierta por defecto.
    </x-kore::accordion.item>
</x-kore::accordion>
<x-kore::accordion multiple>
    <x-kore::accordion.item id="s1" title="Sección 1" open>
        Abierta por defecto.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="s2" title="Sección 2">
        Cerrada por defecto.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="s3" title="Sección 3" open>
        También abierta por defecto.
    </x-kore::accordion.item>
</x-kore::accordion>

Abierto por defecto

Usa la prop open en un item para que inicie expandido.

Este panel está abierto por defecto.
Este panel está cerrado por defecto. 
<x-kore::accordion>
    <x-kore::accordion.item id="intro" title="Introducción" open>
        Este panel está abierto por defecto.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="detalles" title="Detalles">
        Este panel está cerrado por defecto.
    </x-kore::accordion.item>
</x-kore::accordion>
<x-kore::accordion>
    <x-kore::accordion.item id="intro" title="Introducción" open>
        Este panel está abierto por defecto.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="detalles" title="Detalles">
        Este panel está cerrado por defecto.
    </x-kore::accordion.item>
</x-kore::accordion>

Variantes

Tres variantes visuales: bordered (default), flush y separated.

Contenido
Contenido
Contenido
Contenido 
{{-- Sin bordes exteriores --}}
<x-kore::accordion variant="flush">
    <x-kore::accordion.item id="a" title="Flush A">Contenido</x-kore::accordion.item>
    <x-kore::accordion.item id="b" title="Flush B">Contenido</x-kore::accordion.item>
</x-kore::accordion>

{{-- Ítems separados con gap --}}
<x-kore::accordion variant="separated">
    <x-kore::accordion.item id="c" title="Separado A">Contenido</x-kore::accordion.item>
    <x-kore::accordion.item id="d" title="Separado B">Contenido</x-kore::accordion.item>
</x-kore::accordion>
{{-- Sin bordes exteriores --}}
<x-kore::accordion variant="flush">
    <x-kore::accordion.item id="a" title="Flush A">Contenido</x-kore::accordion.item>
    <x-kore::accordion.item id="b" title="Flush B">Contenido</x-kore::accordion.item>
</x-kore::accordion>

{{-- Ítems separados con gap --}}
<x-kore::accordion variant="separated">
    <x-kore::accordion.item id="c" title="Separado A">Contenido</x-kore::accordion.item>
    <x-kore::accordion.item id="d" title="Separado B">Contenido</x-kore::accordion.item>
</x-kore::accordion>

Con icono y deshabilitado

Agrega iconos Lucide y desactiva items individuales.

Configuración del perfil.
No disponible. 
<x-kore::accordion>
    <x-kore::accordion.item id="user" title="Perfil" icon="user">
        Configuración del perfil.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="billing" title="Facturación" icon="credit-card" disabled>
        No disponible.
    </x-kore::accordion.item>
</x-kore::accordion>
<x-kore::accordion>
    <x-kore::accordion.item id="user" title="Perfil" icon="user">
        Configuración del perfil.
    </x-kore::accordion.item>

    <x-kore::accordion.item id="billing" title="Facturación" icon="credit-card" disabled>
        No disponible.
    </x-kore::accordion.item>
</x-kore::accordion>

Props

Prop Tipo Default Descripción
multiple bool false Permite abrir múltiples ítems a la vez
variant string bordered Variante visual: bordered, flush, separated

Props del item

Props

Prop Tipo Default Descripción
id string requerido Identificador único del ítem
title string requerido Título del panel
icon string|null null Icono Lucide junto al título
disabled bool false Desactiva la interacción
open bool false Estado inicial abierto