Selection Card

Componente de seleção visual em formato de card para escolhas exclusivas (radio). Suporta ícone, título, subtítulo e layouts horizontal/vertical. Dark mode automático via variáveis semânticas.

components/selection-card.cssAbrir no Figma

Uso

Quando e como utilizar o selection card para oferecer opções visuais ao usuário.

• Horizontal — Até 4 opções lado a lado. Ideal para escolhas rápidas.
• Vertical — Opções empilhadas. Ideal para descrições longas ou muitas opções.

Use selection cards quando as opções são poucas (2 a 4) e o contexto visual facilita a decisão do usuário. Para muitas opções, prefira radio buttons ou select.

Exemplos

Veja abaixo os exemplos interativos do selection card, com todos os seus estados.

Carregando exemplo...

Carregando exemplo...

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Group	.selection-card-group	Fieldset que agrupa as opções
Label	.selection-card-label	Legenda do grupo de seleção
Options	.selection-card-options	Container flex das opções
Card	.selection-card	Label individual clicável
Input	.selection-card-input	Radio input oculto (acessível)
Ícone	.selection-card-icon	Ícone SVG 18x18
Text	.selection-card-text	Wrapper de título e subtítulo
Título	.selection-card-title	Texto principal, Inter 14px w500
Subtítulo	.selection-card-subtitle	Texto auxiliar, Inter 12px w400

Propriedades

Classes e atributos disponíveis para configurar o selection card.

Propriedade	Tipo	Default	Descrição
.selection-card-group	classe	—	Fieldset wrapper que agrupa os cards.
.selection-card-label	classe	—	Legenda/label do grupo.
.selection-card-options	classe	—	Container das opções (flex row).
.selection-card	classe	—	Card individual (elemento label).
.selection-card-input	classe	—	Input radio oculto visualmente.
.selection-card-icon	classe	—	Container do ícone do card.
.selection-card-text	classe	—	Wrapper de título e subtítulo.
.selection-card-title	classe	—	Título principal do card.
.selection-card-subtitle	classe	—	Subtítulo opcional do card.
.selection-card-group--vertical	classe	—	Layout vertical ao invés de horizontal.
disabled	atributo	—	Desabilita o input e o card visualmente.

Código

Snippets prontos para copiar e usar no seu projeto.

Seleção horizontal

<fieldset class="selection-card-group">
  <legend class="selection-card-label">Tipo de pessoa</legend>
  <div class="selection-card-options">
    <label class="selection-card">
      <input type="radio" name="tipo" value="fisica" class="selection-card-input" checked>
      <span class="selection-card-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
          viewBox="0 0 48 48" fill="none" stroke="currentColor"
          stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <path d="M24 22C28.4183 22 32 18.4183 32 14C32 9.58172 28.4183 6 24 6C19.5817 6 16 9.58172 16 14C16 18.4183 19.5817 22 24 22Z"/>
          <path d="M6 42C6 32.0589 14.0589 24 24 24C33.9411 24 42 32.0589 42 42"/>
        </svg>
      </span>
      <div class="selection-card-text">
        <span class="selection-card-title">Pessoa Física</span>
        <span class="selection-card-subtitle">CPF</span>
      </div>
    </label>
    <label class="selection-card">
      <input type="radio" name="tipo" value="juridica" class="selection-card-input">
      <span class="selection-card-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
          viewBox="0 0 48 48" fill="none" stroke="currentColor"
          stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <rect x="4" y="8" width="40" height="32" rx="2"/>
          <path d="M16 8V4"/>
          <path d="M32 8V4"/>
          <path d="M4 20H44"/>
        </svg>
      </span>
      <div class="selection-card-text">
        <span class="selection-card-title">Pessoa Jurídica</span>
        <span class="selection-card-subtitle">CNPJ</span>
      </div>
    </label>
  </div>
</fieldset>

Seleção vertical

<fieldset class="selection-card-group selection-card-group--vertical">
  <legend class="selection-card-label">Prioridade</legend>
  <div class="selection-card-options">
    <label class="selection-card">
      <input type="radio" name="prioridade" value="alta" class="selection-card-input">
      <span class="selection-card-icon"><!-- ícone --></span>
      <div class="selection-card-text">
        <span class="selection-card-title">Alta</span>
        <span class="selection-card-subtitle">Resolução imediata</span>
      </div>
    </label>
    <label class="selection-card">
      <input type="radio" name="prioridade" value="media" class="selection-card-input">
      <span class="selection-card-icon"><!-- ícone --></span>
      <div class="selection-card-text">
        <span class="selection-card-title">Média</span>
        <span class="selection-card-subtitle">Resolução em até 48h</span>
      </div>
    </label>
  </div>
</fieldset>

Design

Especificações visuais e tokens utilizados no componente.

Especificações

Propriedade	Valor
Padding	12px (--spacing-3)
Border-radius	8px (--radius-md)
Gap (opções)	12px (--spacing-3)
Gap (ícone → texto)	32px
Fonte título	Inter 14px w500
Fonte subtítulo	Inter 12px w400
Ícone	18x18 SVG
Transição	150ms ease

Tokens utilizados

Estado	Background	Borda	Ícone	Título	Subtítulo
Default	--surface-base-neutral-container-default	--border-base-neutral-default	--text-base-neutral-secondary	--text-base-neutral-secondary	--text-base-neutral-subtle
Hover	--surface-base-neutral-container-default	--border-base-neutral-strong	--text-base-neutral-default	--text-base-neutral-default	--text-base-neutral-subtle
Selecionado	--surface-base-neutral-container-default	--border-base-brand-default	--icon-base-brand-secondary	--text-base-neutral-default	--text-base-neutral-subtle
Desativado	--surface-base-neutral-container-emphasis	—	--text-base-neutral-subtle	--text-base-neutral-subtle	--text-base-neutral-subtle

Versão0.1.0

Última atualização12 mar 2025

Caminhosrc/components/selection-card.css