Todos los componentes (204)

Acordeón

Navegación · Accordion · .amset-accordion

Qué es y cuándo usarlo

Secciones plegables una debajo de otra, cada una con su título y, si hace falta, un resumen de lo que hay dentro. Por defecto solo hay una abierta a la vez.

Cuándo usarlo

Para información secundaria que no todo el mundo va a leer: materiales, cuidados, envío, preguntas frecuentes.
allowsMultipleExpanded cuando tiene sentido tener varias abiertas y compararlas.
summary en cada sección para que se sepa qué hay dentro sin abrirla («NIF, domicilio y provincia»).
headingLevel según dónde vaya: debajo de un h2, los títulos del acordeón son h3.

Cuándo no

Para lo que hay que leer sí o sí (el precio, un aviso legal): a la vista, sin plegar.
Para vistas del mismo objeto que se miran de una en una: Tabs.
Para un árbol de más de un nivel: Tree.

Teclado: Tab recorre los títulos de las secciones; Intro o Espacio abren y cierran la que tiene el foco. Una sección deshabilitada no coge el foco. Si una sección se cierra con el foco dentro (un «Guardar y seguir» que la pliega con expandedKeys), el foco vuelve a su título en vez de caerse a la página.

Accesibilidad: cada título es un encabezado de verdad (h3 por defecto) con un botón dentro que dice si está abierta con aria-expanded. Quien navega por encabezados salta de sección en sección. Lo plegado no se ve ni se lee, pero la búsqueda del navegador sí lo encuentra y abre la sección. La flecha es decorativa.

Aspecto fino: variables CSS --amset-accordion-*: -background, -font, -gap, -padding-block, -padding-inline, -radius. El tamaño mueve el relleno, el hueco, el cuerpo de letra y el radio.

Cómo se ve

<Accordion
  sections={[
    { key: 'envio', title: 'Envio y plazos', content: <Envio /> },
    { key: 'devol', title: 'Devoluciones', summary: '30 dias', content: <Devoluciones /> },
  ]}
/>

Props

Se importa con import { Accordion } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`sections`obligatoria	`readonly AccordionSection[]`	—
`allowsMultipleExpanded`	`boolean`	Varias secciones abiertas a la vez. Por defecto, solo una.
`className`	`string`	—
`defaultExpandedKeys`	`Iterable<Key>`	Las secciones abiertas al empezar.
`disabled`	`boolean`	Apaga el acordeon entero, sin tocar la lista de secciones.
`expandedKeys`	`Iterable<Key>`	Las secciones abiertas, controladas desde fuera.
`headingLevel`	`3 \| 4 \| 2`	Nivel del encabezado para que la jerarquía de la página no se rompa.
`onExpandedChange`	`(keys: Set<Key>) => void`	—
`size`	`"sm" \| "md" \| "lg"`	El relleno y el cuerpo de letra de cada sección.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-accordion-padding-block`	`var(--amset-space-3)`
`--amset-accordion-padding-inline`	`var(--amset-space-4)`
`--amset-accordion-gap`	`var(--amset-space-3)`
`--amset-accordion-font`	`var(--amset-text-base)`
`--amset-accordion-radius`	`var(--amset-radius-lg)`
`--amset-accordion-background`	`var(--amset-surface)`

Cómo se cambia

.amset-accordion {
  --amset-accordion-padding-block: ...;
  --amset-accordion-padding-inline: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: