Interactive List

1.3.6

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;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/interactive-list

Interactive List

Cuándo usar

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.

Cuándo no usar

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.

Criterios de productividad y usabilidad

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.

Accesibilidad

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).

Anatomía

Una Interactive List se compone de:

Ítems individuales:
1. Action (Checkbox, Radio, Toggle, IconButton)
2. Itulo
3. Description
4. Tag (opcional)
Divider

Dependencias

Icon
Icon Button
Checkbox
Radio
Toggle
Tag

Variantes

With checbox
With Radio
With Toggle
With Button
With no divider

Do and Don'ts

✅ 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.

Props

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	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	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	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	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	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	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	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	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	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	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.