<!-- Generado automáticamente por scripts/generate-docs.mjs. No editar a mano. -->
<!-- Fuente: src/app/componentes/info-label/page.tsx -->

# Info label

Un label acompañado de un disparador de información que abre una nota contextual en un popover. Útil cuando un campo necesita una explicación que no cabe en el label ni en el placeholder.

```tsx
<div className="flex flex-col gap-[6px]">
  <span className="inline-flex items-center gap-[6px]">
    Tasa de interés
    <InfoTrigger text="Calculada anualmente sobre el saldo de la deuda al cierre del mes." />
  </span>
  <Input placeholder="0,00%" />
</div>
```

## Uso

### Cuándo usar info label

- El label por sí solo no alcanza para explicar el dato.
- La explicación es contextual: no aplica a todos los usuarios ni todo el tiempo.
- La información cabe en una a tres líneas; si es más larga, lleva a una página de ayuda.

### Cuándo no usarlo

- Si el dato es obligatorio entender para completar el formulario: ponlo como texto de ayuda visible.
- Si la explicación cambia según el contexto del usuario: usa un mensaje inline, no un popover.

## Variantes

### Disparador

- El disparador estándar es un icono de información circular de 16 px, alineado a la derecha del label.
- Activable con clic, Enter o Espacio.
- Cierra al perder foco, al hacer clic afuera o con Esc.

## Accesibilidad

### Etiquetado

- El botón disparador necesita aria-label como Información o Más detalles.
- El popover usa role=tooltip o aria-describedby conectado al control asociado.
- El foco debe poder volver al disparador al cerrar el popover.

## Contenido

### El texto del popover

- Una a tres líneas en sentence case.
- Explica qué significa el dato y, si aplica, cómo se calcula.
- Sin enlaces dentro del popover cuando el disparador se cierra al perder foco.

