Toggle Card

Card que alterna entre estados ativo e inativo ao clicar. Ideal para campos booleanos de habilitacao/desabilitacao em formularios. Suporta icones condicionais, texto de estado, grid de multiplos cards e dark mode automatico.

components/toggle-card.cssAbrir no Figma

Uso

Quando e como utilizar o toggle card para campos booleanos visuais.

• Card unico — Um toggle simples com icone, titulo e label de estado.
• Grid de cards — Use .toggle-card-grid para dispor multiplos cards em colunas responsivas (min 280px).
• Com drawer — Associe um drawer para exibir detalhes ou formulario ao ativar o card.

O toggle card e ideal para opcoes booleanas onde o contexto visual (icone e cor) facilita a compreensao. Para multiplas opcoes exclusivas, prefira selection cards ou radio buttons.

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Wrapper	.toggle-card-wrapper	Container vertical com gap 8px
Card	.toggle-card	Elemento clicavel com borda e fundo
Icone	.toggle-card-icon	Circulo 40x40 com icone condicional
Icone ativo	.toggle-card-icon--active	Visivel apenas quando --active
Icone inativo	.toggle-card-icon--inactive	Visivel apenas quando nao ativo
Conteudo	.toggle-card-content	Wrapper flex de titulo e estado
Titulo	.toggle-card-title	Texto principal, Inter 15px w500
Estado ativo	.toggle-card-state--active	Label "Habilitado", cor accent
Estado inativo	.toggle-card-state--inactive	Label "Nao Habilitado", cor neutra
Helper	.toggle-card-helper	Texto auxiliar 12px abaixo do card
Erro	.toggle-card-error	Mensagem de erro 12px em vermelho

Propriedades

Classes disponiveis para configurar o toggle card.

Propriedade	Tipo	Default	Descrição
.toggle-card-wrapper	classe	—	Wrapper com gap e margem inferior.
.toggle-card	classe	—	Card principal clicavel.
.toggle-card--active	classe	—	Estado ativo com borda e fundo destacados.
.toggle-card--disabled	classe	—	Desabilita interacao e reduz opacidade.
.toggle-card-icon	classe	—	Container circular do icone (40x40).
.toggle-card-icon--active	classe	—	Icone exibido quando o card esta ativo.
.toggle-card-icon--inactive	classe	—	Icone exibido quando o card esta inativo.
.toggle-card-content	classe	—	Wrapper flex-column para titulo e estado.
.toggle-card-title	classe	—	Titulo principal do card.
.toggle-card-state--active	classe	—	Label de estado exibido quando ativo.
.toggle-card-state--inactive	classe	—	Label de estado exibido quando inativo.
.toggle-card-helper	classe	—	Texto auxiliar abaixo do card.
.toggle-card-error	classe	—	Mensagem de erro abaixo do card.
.toggle-card-grid	classe	—	Grid responsivo para multiplos cards.
.toggle-card-drawer-content	classe	—	Container de conteudo dentro de um drawer associado.

Codigo

Snippets prontos para copiar e usar no seu projeto.

Card inativo

<div class="toggle-card-wrapper">
  <div class="toggle-card" tabindex="0" role="switch" aria-checked="false">
    <div class="toggle-card-icon">
      <span class="toggle-card-icon--active"><i class="ipe-check-circle"></i></span>
      <span class="toggle-card-icon--inactive"><i class="ipe-circle"></i></span>
    </div>
    <div class="toggle-card-content">
      <span class="toggle-card-title">Notificacoes por e-mail</span>
      <span class="toggle-card-state--active">Habilitado</span>
      <span class="toggle-card-state--inactive">Nao Habilitado</span>
    </div>
  </div>
  <span class="toggle-card-helper">Receba atualizacoes sobre seus processos.</span>
</div>

Card ativo

<div class="toggle-card-wrapper">
  <div class="toggle-card toggle-card--active" tabindex="0" role="switch" aria-checked="true">
    <div class="toggle-card-icon">
      <span class="toggle-card-icon--active"><i class="ipe-check-circle"></i></span>
      <span class="toggle-card-icon--inactive"><i class="ipe-circle"></i></span>
    </div>
    <div class="toggle-card-content">
      <span class="toggle-card-title">Notificacoes por e-mail</span>
      <span class="toggle-card-state--active">Habilitado</span>
      <span class="toggle-card-state--inactive">Nao Habilitado</span>
    </div>
  </div>
</div>

Grid de multiplos cards

<div class="toggle-card-grid">
  <div class="toggle-card-wrapper">
    <div class="toggle-card" tabindex="0" role="switch" aria-checked="false">
      <div class="toggle-card-icon">
        <span class="toggle-card-icon--active"><i class="ipe-check-circle"></i></span>
        <span class="toggle-card-icon--inactive"><i class="ipe-circle"></i></span>
      </div>
      <div class="toggle-card-content">
        <span class="toggle-card-title">Opcao A</span>
        <span class="toggle-card-state--active">Habilitado</span>
        <span class="toggle-card-state--inactive">Nao Habilitado</span>
      </div>
    </div>
  </div>
  <div class="toggle-card-wrapper">
    <div class="toggle-card toggle-card--active" tabindex="0" role="switch" aria-checked="true">
      <div class="toggle-card-icon">
        <span class="toggle-card-icon--active"><i class="ipe-check-circle"></i></span>
        <span class="toggle-card-icon--inactive"><i class="ipe-circle"></i></span>
      </div>
      <div class="toggle-card-content">
        <span class="toggle-card-title">Opcao B</span>
        <span class="toggle-card-state--active">Habilitado</span>
        <span class="toggle-card-state--inactive">Nao Habilitado</span>
      </div>
    </div>
  </div>
</div>

Card com erro

<div class="toggle-card-wrapper">
  <div class="toggle-card" tabindex="0" role="switch" aria-checked="false">
    <div class="toggle-card-icon">
      <span class="toggle-card-icon--active"><i class="ipe-check-circle"></i></span>
      <span class="toggle-card-icon--inactive"><i class="ipe-circle"></i></span>
    </div>
    <div class="toggle-card-content">
      <span class="toggle-card-title">Termo de aceite</span>
      <span class="toggle-card-state--active">Habilitado</span>
      <span class="toggle-card-state--inactive">Nao Habilitado</span>
    </div>
  </div>
  <span class="toggle-card-error">Este campo e obrigatorio.</span>
</div>

Design

Especificacoes visuais e tokens utilizados no componente.

Especificacoes

Propriedade	Valor
Padding	16px 20px (desktop), 14px 16px (mobile)
Border	2px solid
Border-radius	8px
Gap (card)	16px
Gap (wrapper)	8px
Icone container	40x40 (desktop), 36x36 (mobile)
Icone size	24px (desktop), 20px (mobile)
Fonte titulo	Inter 15px w500 (desktop), 14px (mobile)
Fonte estado	Inter 13px w400
Fonte helper/erro	Inter 12px w400
Grid min-column	280px
Grid gap	12px
Transicao	200ms ease

Tokens utilizados

Estado	Background	Borda	Titulo	Estado label
Inativo	--color-bg-secondary	--color-neutral-300	--color-text-primary	--color-neutral-500
Inativo hover	--color-neutral-100	--color-neutral-400	--color-text-primary	--color-neutral-500
Ativo	--color-accent-50	--color-accent-400	--color-text-primary	--color-accent-400
Ativo hover	--color-accent-100	--color-accent-500	--color-text-primary	--color-accent-400
Desabilitado	--color-neutral-100	--color-neutral-300	-- (opacity 0.6)	-- (opacity 0.6)

Versão0.1.0

Última atualização13 mar 2025

Caminhosrc/components/toggle-card.css