List

• Enumerar requisitos o condiciones: mostrar varias condiciones que aplican a un mismo proceso, sin que exista una relación de orden entre ellas. Ej.: los requisitos de un proceso de verificación, las condiciones para acceder a un plan.
• Detallar pasos que se siguen en un orden específico: usar la variante numerada (as="ol") cuando completar la tarea depende de seguir los ítems en secuencia. Ej.: los pasos de instalación de una funcionalidad.
• Explicar las consecuencias de una acción antes de confirmarla: enumerar qué va a pasar si la persona continúa, sobre todo antes de una acción destructiva o irreversible. Ej.: qué ocurre con las suscripciones activas al eliminar un plan.
• Presentar los puntos de una respuesta extensa: dividir en ítems cortos una explicación que de otra forma quedaría como un párrafo largo. Ej.: los puntos de una respuesta en una sección de preguntas frecuentes.

• Mostrar ítems seleccionables o accionables: el List es puramente presentacional y no maneja foco, selección ni interacción. En su lugar, usar Interactive List, que sí soporta checkbox, radio, toggle o botón por ítem.
• Mostrar registros con información estructurada: cuando cada ítem tiene varios datos asociados (miniatura, estado, link de detalle), un List de texto no alcanza para representarlos con claridad. En su lugar, usar Data List.
• Construir una navegación: el List no está pensado para agrupar links de navegación ni acciones de un menú. En su lugar, usar Menu.
• Mostrar un solo ítem: una lista de un elemento no comunica ninguna enumeración y agrega marcado innecesario. En su lugar, mostrar el texto directamente con Text.

1. Marker: bullet o numerador que antecede a cada ítem, generado automáticamente por el navegador según el valor del prop as. No es texto editable ni acepta contenido propio.
2. Text: contenido de cada ítem, ubicado dentro de un List.Item. Puede incluir texto simple o elementos inline como Link.

El List aparece dentro de superficies como Card, Modal o Alert, para acompañar mensajes de ayuda, condiciones antes de confirmar una acción, checklists de un proceso o los puntos de una respuesta. Al ser un componente inline, hereda el ancho disponible del contenedor que lo envuelve.

• Semántica nativa de lista: el componente renderiza un <ul> o un <ol> real según el prop as, con cada List.Item como un <li>. Los lectores de pantalla anuncian el grupo como una lista y su cantidad de ítems, sin necesidad de agregar role="list" ni atributos ARIA adicionales.
• Elegir as según el significado real: usar as="ol" solo cuando el orden importa para completar la tarea; usar as="ul" (valor por defecto) para el resto, así la tecnología de asistencia no comunica una secuencia que no existe.
• No anidar contenido interactivo: al ser un componente presentacional, no maneja foco ni estados de interacción. Si un ítem necesita ser seleccionable o accionable, usar Interactive List, que sí gestiona el foco y los roles correspondientes.

Instalá el componente vía terminal.

Las propiedades adicionales se pasan al elemento renderizado (<ul> u <ol>, según el prop as). Consultá la documentación del elemento ul para ver la lista de atributos aceptados.

• Interactive List — Para listas de ítems seleccionables o accionables (checkbox, radio, toggle, botón).
• Data List — Para listas de registros con información estructurada (miniatura, tag de estado, link de detalle).
• Menu — Para agrupar links de navegación o acciones.
• Text — Para mostrar un texto simple, sin necesidad de enumeración.

List