Pharos
Navegar componentes
← Componentes

SelectableCard

CardExemplo
Um card que alterna entre estados selected e unselected com uma borda accent. Para navegação use ClickableCard.
Importação
import {SelectableCard} from '@pharos-ds/core/SelectableCard';

Exemplos

Área interativa

variant
elevation
isDisabled
Plano ProRecursos avançados
Código
import {SelectableCard} from '@pharos-ds/core/SelectableCard';

<SelectableCard
  variant="default"
  elevation="none"
  isDisabled={false}
 />

Boas práticas

  • Faça: Use para seletores de plano, filter chips ou grids de opções.
  • Faça: Para single-select rastreie um ID; para multi-select use um Set.
  • Evite: Use para navegação; use ClickableCard para isso.

Props

PropTipoPadrãoDescrição
label *string—Label de acessibilidade.
isSelected *boolean—Estado de seleção controlado.
onChange *(isSelected: boolean) => void—Chamado quando alternado.
isDisabledbooleanfalseDesabilita o card.
childrenReactNode—Conteúdo do card.
padding0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 104Padding interno.
variant'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow''default'Variante de cor de fundo.
elevation'none' | 'low' | 'med' | 'high''none'Profundidade da sombra em repouso. O anel de seleção compõe por cima, então um card selected mantém sua sombra.
widthSizeValue—Largura do card.
heightSizeValue—Altura do card.
maxWidthSizeValue—Largura máxima do card.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/SelectableCard
SelectableCard · Pharos