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;

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:

  1. Ítems individuales:
    1. Action (Checkbox, Radio, Toggle, IconButton)
    2. Itulo
    3. Description
    4. Tag (opcional)
  2. 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

NameTypeDefaultDescription

children

bottomDivider

boolean

'true'

Defines whether the List has a bottom border.

InteractiveList.Structure

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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.