Interactive List
La Interactive List es un patrón de interfaz que permite mostrar en formato de lista elementos de selección o acceso. Está diseñada para mejorar la productividad en tareas frecuentes como la gestión de ítems, permitiendo operar de forma rápida, accesible y sin abandonar el contexto.
import React from "react";
import { InteractiveList } from "@nimbus-ds/patterns";
import { Box, Tag } from "@nimbus-ds/components";
const Example: React.FC = () => (
<InteractiveList>
<InteractiveList.CheckboxItem
title="First element"
description="Description of the first element"
checkbox={{
name: "checkbox-element",
}}
>
<Box display="flex" gap="1" mt="2">
<Tag>Text</Tag>
<Tag>Text</Tag>
<Tag>Text</Tag>
</Box>
</InteractiveList.CheckboxItem>
<InteractiveList.CheckboxItem
title="Second element"
description="Description of the second element"
checkbox={{
name: "checkbox-element",
}}
>
<Box display="flex" gap="1" mt="2">
<Tag>Text</Tag>
<Tag>Text</Tag>
<Tag>Text</Tag>
</Box>
</InteractiveList.CheckboxItem>
<InteractiveList.CheckboxItem
title="Third element"
description="Description of the third element"
checkbox={{
name: "checkbox-element",
}}
>
<Box display="flex" gap="1" mt="2">
<Tag>Text</Tag>
<Tag>Text</Tag>
<Tag>Text</Tag>
</Box>
</InteractiveList.CheckboxItem>
</InteractiveList>
);
export default Example;
Instalá el componente via terminal.
npm install @nimbus-ds/interactive-list
Interactive List
Usar la Interactive List cuando necesites:
- Mostrar una lista editable de elementos (productos, categorías, usuarios, etc.).
- Permitir al usuario seleccionar uno o varios ítems para ejecutar acciones en lote.
- Agregar o quitar ítems rápidamente desde un mismo lugar.
Evitar este patrón cuando:
- La lista no requiere interacción, sólo visualización estática.
- Hay demasiados campos o atributos visibles por ítem que dificulten una lectura clara.
- El volumen de ítems supera las 50 unidades sin paginación o filtros adecuados.
- Minimiza pantallas de confirmación: Las acciones deben aplicarse directamente sin intermediar modals.
- Edición inline: Modificaciones rápidas sin abandonar el flujo.
- Feedback instantáneo: Estado de selección visible tras cada acción.
- Navegación completa por teclado (Tab, Enter, Space, teclas direccionales).
- Uso adecuado de roles ARIA: list, listitem, aria-selected, aria-grabbed, etc.
- Foco visible en ítems seleccionados o activos.
- Contraste adecuado entre ítems activos/inactivos.
- Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).
Una Interactive List se compone de:
- Ítems individuales:
- Action (Checkbox, Radio, Toggle, IconButton)
- Itulo
- Description
- Tag (opcional)
- Divider
- Icon
- Icon Button
- Checkbox
- Radio
- Toggle
- Tag
- With checbox
- With Radio
- With Toggle
- With Button
- With no divider
✅ Do
- Mostrar feedback inmediato para cada acción.
- Limitar la cantidad de ítems para mantener la experiencia manejable.
❌ Don't
- No sobrecargues cada ítem.
- No uses este patrón para listas con interacción nula.
- No ocultes el propósito de la lista: siempre indicar qué se está gestionando.
Additional props are passed to the <InteractiveList> element. See div docs for a list of props accepted by the <InteractiveList> element.
InteractiveList
Name | Type | Default | Description |
---|---|---|---|
children | |||
bottomDivider | boolean | 'true' | Defines whether the List has a bottom border. |
InteractiveList.Structure
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ButtonItem
Name | Type | Default | Description |
---|---|---|---|
iconButton* | object | Button props inherited from Nimbus components | |
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.CheckboxItem
Name | Type | Default | Description |
---|---|---|---|
checkbox* | Checkbox props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.RadioItem
Name | Type | Default | Description |
---|---|---|---|
radio* | Radio props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ToggleItem
Name | Type | Default | Description |
---|---|---|---|
toggle* | Toggle props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.StructureSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ButtonItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.CheckboxItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.RadioItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |
InteractiveList.ToggleItemSkeleton
Name | Type | Default | Description |
---|---|---|---|
toggle* | Toggle props inherited from Nimbus components. | ||
title* | string | Title of the list item element. Also used to generate the ID for the interactive element. | |
showTitle | boolean | Determines if the title is visible or not. | |
description | string | Description of the list item element. | |
children | React.ReactNode | Custom content for the list item element. |