List

2.4.0

Permite organizar vários textos relacionados em formato de lista, com marcador ou numeração.

Ver no Figma

Quando usar

Enumerar requisitos ou condições: mostrar várias condições que se aplicam a um mesmo processo, sem que exista uma relação de ordem entre elas. Ex.: os requisitos de um processo de verificação, as condições para acessar um plano.
Detalhar etapas seguidas em uma ordem específica: usar a variante numerada (as="ol") quando concluir a tarefa depende de seguir os itens em sequência. Ex.: as etapas de instalação de uma funcionalidade.
Explicar as consequências de uma ação antes de confirmá-la: enumerar o que vai acontecer se a pessoa continuar, principalmente antes de uma ação destrutiva ou irreversível. Ex.: o que ocorre com as assinaturas ativas ao excluir um plano.
Apresentar os pontos de uma resposta extensa: dividir em itens curtos uma explicação que de outra forma ficaria como um parágrafo longo. Ex.: os pontos de uma resposta em uma seção de perguntas frequentes.

Quando não usar

Mostrar itens selecionáveis ou acionáveis: o List é puramente apresentacional e não gerencia foco, seleção nem interação. Usar em vez disso Interactive List, que oferece suporte a checkbox, radio, toggle ou botão por item.
Mostrar registros com informação estruturada: quando cada item tem vários dados associados (miniatura, status, link de detalhe), um List de texto não é suficiente para representá-los com clareza. Usar em vez disso Data List.
Construir uma navegação: o List não foi pensado para agrupar links de navegação nem ações de um menu. Usar em vez disso Menu.
Mostrar um único item: uma lista de um elemento não comunica nenhuma enumeração e adiciona marcação desnecessária. Mostrar o texto diretamente com Text.

Anatomia

Primeiro item da lista
Segundo item da lista

Marker: marcador ou numeração que antecede cada item, gerado automaticamente pelo navegador conforme o valor da prop as. Não é texto editável nem aceita conteúdo próprio.
Text: conteúdo de cada item, localizado dentro de um List.Item. Pode incluir texto simples ou elementos inline como Link.

Variantes

Tipo

Primeiro requisito
Segundo requisito

Unordered: marca cada item com um marcador, sem indicar uma relação de ordem entre eles. Valor padrão (as="ul"); cobre a maioria dos casos. Ex.: requisitos de uma verificação, pontos de uma resposta de FAQ.

Completar os dados da empresa
Enviar a documentação solicitada

Ordered: numera cada item conforme sua posição, para comunicar que a ordem importa para concluir a tarefa. Usar somente quando a sequência é real. Ex.: etapas de instalação, instruções de configuração.

Aplicação

O List aparece dentro de superfícies como Card, Modal ou Alert, para acompanhar mensagens de ajuda, condições antes de confirmar uma ação, checklists de um processo ou os pontos de uma resposta. Por ser um componente inline, herda a largura disponível do contêiner que o envolve.

Se você continuar, isto é o que vai acontecer:

As assinaturas ativas são canceladas imediatamente
Os dados do plano não podem ser recuperados

Do and Don'ts

Requisitos para verificar a conta

Documento de identidade válido
Comprovante de residência
Dados bancários da empresa

Usar frases curtas e do mesmo tipo semântico em cada item, para que a lista seja lida de forma uniforme.

Requisitos para verificar a conta

Documento de identidade válido, emitido por um órgão oficial, sem rasuras nem emendas, com validade mínima de seis meses
Endereço

Evitar misturar itens de natureza diferente na mesma lista, como um aviso extenso junto a um dado isolado.

Configurar o domínio

Acessar o painel do provedor
Adicionar os registros DNS

Usar as='ol' somente quando a ordem dos itens importa para concluir a tarefa.

Benefícios do plano

Frete grátis
Suporte prioritário

Evitar as='ol' quando os itens não têm uma sequência real: sugere uma ordem que não existe.

Acessibilidade

Semântica nativa de lista: o componente renderiza um <ul> ou um <ol> real conforme a prop as, com cada List.Item como um <li>. Os leitores de tela anunciam o grupo como uma lista e sua quantidade de itens, sem necessidade de adicionar role="list" nem atributos ARIA adicionais.
Escolher as conforme o significado real: usar as="ol" somente quando a ordem importa para concluir a tarefa; usar as="ul" (valor padrão) para o restante, assim a tecnologia assistiva não comunica uma sequência que não existe.
Não aninhar conteúdo interativo: por ser um componente apresentacional, não gerencia foco nem estados de interação. Se um item precisar ser selecionável ou acionável, usar Interactive List, que gerencia o foco e os papéis correspondentes.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/components

Não ordenada

Ordenada

Skeleton

import React from "react";
import { List } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <List as="ul">
    <List.Item>Documento de identidad vigente</List.Item>
    <List.Item>Comprobante de domicilio</List.Item>
    <List.Item>Datos bancarios de la empresa</List.Item>
  </List>
);

export default Example;

Props

As propriedades adicionais são passadas para o elemento renderizado (<ul> ou <ol>, conforme a prop as). Consulte a documentação do elemento ul para ver a lista de atributos aceitos.

Componentes relacionados

Interactive List — Para listas de itens selecionáveis ou acionáveis (checkbox, radio, toggle, botão).
Data List — Para listas de registros com informação estruturada (miniatura, tag de status, link de detalhe).
Menu — Para agrupar links de navegação ou ações.
Text — Para mostrar um texto simples, sem necessidade de enumeração.

List

Name	Type	Default	Description
children*	React.ReactNode		The content of the list.
as	'ol' 'ul'	'ul'	Determines the type of html list that will be rendered
padding	'0-5' '1' '2' '3' '4' '5' '6' '7' '8'	'6'	The padding of the list.

List.Item

Name	Type	Default	Description
children*	React.ReactNode		The content of the list item.

List.Skeleton

Name	Type	Default	Description
children*	React.ReactNode		The content of the list skeleton.
data-testid	string		This is an attribute used to identify a DOM node for testing purposes.

List.SkeletonItem

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
height	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.

Ajude-nos a melhorar a documentação

Encontrou um problema ou tem uma sugestão? Conte para a gente.

Compartilhe seu feedback