Interactive List

1.3.6

A *Interactive List* é um padrão de interface que permite mostrar em formato de lista elementos de seleção ou acesso. Está desenhada para melhorar a produtividade em tarefas frequentes como a gestão de itens, permitindo operar de forma rápida, acessível e sem abandonar o 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;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/interactive-list

Quando usar

Usar a Interactive List quando precisar:

Mostrar uma lista editável de elementos (produtos, categorias, usuários, etc.).
Permitir ao usuário selecionar um ou vários itens para executar ações em lote.
Adicionar ou remover itens rapidamente do mesmo lugar.

Quando não usar

Evitar este padrão quando:

A lista não requer interação, somente visualização estática.
Há muitos campos ou atributos visíveis por item que dificultem uma leitura clara.
O volume de itens supera as 50 unidades sem paginação ou filtros adequados.

Critérios de produtividade e usabilidade

Minimiza telas de confirmação: As ações devem aplicar-se diretamente sem intermediar modals.
Edição inline: Modificações rápidas sem abandonar o fluxo.
Feedback instantâneo: Estado de seleção visível após cada ação.

Acessibilidade

Navegação completa por teclado (Tab, Enter, Space, teclas direcionais).
Uso adequado de roles ARIA: list, listitem, aria-selected, aria-grabbed, etc.
Foco visível em itens selecionados ou ativos.
Contraste adequado entre itens ativos/inativos.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).

Anatomia

Uma Interactive List se compõe de:

Itens individuais:
1. Action (Checkbox, Radio, Toggle, IconButton)
2. Título
3. Description
4. Tag (opcional)
Divider

Dependências

Icon
Icon Button
Checkbox
Radio
Toggle
Tag

Variantes

With checkbox
With Radio
With Toggle
With Button
With no divider

Do and Don'ts

✅ Do

Mostrar feedback imediato para cada ação.
Limitar a quantidade de itens para manter a experiência manejável.

❌ Don't

Não sobrecarregue cada item.
Não use este padrão para listas com interação nula.
Não oculte o propósito da lista: sempre indicar o que está sendo gerenciado.

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.