Skip to main content

ListSelectable

Componente de lista avançado que suporta seleção (checkbox/radio), indicadores visuais (badges, tags) e diferentes estados de exibição. Oferece dois tipos de layout: texto com divisor (text) ou card com borda (card).

Importação​

import { ListSelectable } from '@useblu/ocean-react';

Importação específica (recomendado para tree-shaking)​

import { ListSelectable } from '@useblu/ocean-react/ListSelectable';

Importação de tipos TypeScript​

import type { ListSelectableProps } from '@useblu/ocean-react';

// Uso em componente customizado
const MyComponent: React.FC<ListSelectableProps> = (props) => {
  return <ListSelectable {...props} />;
};

Playground Interativo​

Explore o componente ListSelectable no playground interativo do Storybook:

🚀 Abrir no Storybook

Documentação Completa​

Para documentação técnica detalhada, exemplos de uso e API completa, consulte o Storybook do ListSelectable.

No Storybook você encontrará:

  • ✅ Controles interativos para testar todas as props
  • ✅ API gerada automaticamente com tipagem completa
  • ✅ Exemplos visuais de todas as variantes e estados
  • ✅ Playground para experimentação rápida

Exemplos de Uso​

Com Checkbox​

Lista selecionável com checkbox:

🚀 Abrir no Storybook

Com Radio​

Lista selecionável com radio button:

🚀 Abrir no Storybook

Tipo Text (com divisor)​

Estilo padrão com divisor horizontal entre itens:

🚀 Abrir no Storybook

Tipo Card (com borda)​

Estilo alternativo com borda ao redor do item:

🚀 Abrir no Storybook

Uso dentro de List​

O componente pode ser usado dentro do componente List para criar listas organizadas:

🚀 Abrir no Storybook

Indicadores Visuais​

O componente suporta diversos indicadores visuais como Badges e Tags:

🚀 Abrir no Storybook

Estado de Carregamento​

🚀 Abrir no Storybook

Somente Leitura (isSelectableDisabled)​

Quando isSelectableDisabled é fornecida, o componente oculta os controles de seleção e renderiza o conteúdo como ListReadOnly. Suporta os estilos text (com divisor) e card (com bordas, sem divisor):

🚀 Abrir no Storybook

API​

Props​

PropTipoPadrãoDescrição
titlestring-Título principal do item (obrigatório)
descriptionstring-Descrição detalhada do item
captionstring-Legenda ou informação adicional em destaque
strikethroughDescriptionstring-Texto com linha cortada (riscado)
invertedbooleanfalseInverte a hierarquia visual do título e descrição
status'default' | 'inactive' | 'positive' | 'warning' | 'highlight' | 'highlight-lead' | 'strikethrough''default'Estado visual aplicado ao conteúdo
type'card' | 'text''card'Estilo do wrapper (card com borda, text com divisor)
loadingbooleanfalseExibe estado de carregamento com skeleton
disabledbooleanfalseDesabilita o item, tornando-o não interativo
showDividerbooleantrueExibe divisor visual (aplicado apenas em type="text")
platform'web' | 'app''web'Define a plataforma para ajustes visuais específicos
checkboxCheckboxProps-Props do componente Checkbox para seleção múltipla
radioRadioProps-Props do componente Radio para seleção única
indicatorReactNode-Elemento visual indicador (Badge, Tag, etc.)
isSelectableDisabledbooleanfalseQuando true, oculta os controles de seleção e renderiza o conteúdo como ListReadOnly
highlight{ caption: string | ReactNode; backgroundColor?: string; captionColor?: string }-Exibe área de destaque com texto ou conteúdo na base do card
classNamestring-Classes CSS adicionais

Tipos de Layout​

Text (Texto)​

  • Estilo inline com divisor horizontal
  • Ideal para listas simples e densas
  • Divisor renderizado apenas quando showDivider={true}

Card (Cartão)​

  • Estilo com borda ao redor
  • Maior destaque visual para cada item
  • Ideal para formulários e seleções importantes
  • Suporta estado de erro com borda vermelha

Acessibilidade​

  • ✅ Suporte a navegação por teclado
  • ✅ Integração correta com labels de inputs (Checkbox/Radio)
  • ✅ Estados visuais de foco e desabilitado
  • ✅ Contraste adequado para leitura
  • ✅ Estado de erro visualmente diferenciado