Switch

O que é?

Toggle Switch é uma forma simples de intercalar entre ligar e desligar alguma funcionalidade. O estado do Switch deve ter efeito imediato e não deve exigir que o usuário clique em Salvar ou Enviar para aplicar o novo estado.

Anatomia

1. Label Deve ser específico e comunicar o objetivo da mensagem.

2. Descrição (opcional) Deve conter uma mensagem curta e direta.

3. Switch É um interruptor que se move da esquerda para a direita, alternando entre os estados ligado e desligado.

Tipos de Switch

Switch é um componente único com quatro estados diferentes. São eles: Ligado, desligado, ligado desabilitado e desligado desabilitado.

Title

Variação padrão.

   <div class="switch-block">
    <div class="switch-body">
      <h4 class="title">Title</h4>
    </div>
    <div class="switch">
      <input id="switch4" class="switch" type="checkbox" checked="checked">
      <label class="label" for="switch4" data-on="On" data-off="Off"></label>
    </div>
  </div>

---

Title + Text

Utilize essa variação quando for necessária uma descrição.

  <div class="switch-block">
    <div class="switch-body">
      <h4 class="title">Title</h4>
      <p>Text</p>
    </div>
    <div class="switch">
      <input id="switch1" class="switch" type="checkbox">
      <label class="label" for="switch1" data-on="On" data-off="Off"></label>
    </div>
  </div>

---

Title + Text + Tooltip

Caso seja necessário uma explicação extra sobre a função que o Switch deverá desempenhar naquele cenário, o componente possui uma variação com ícone de info para habilitar tooltips.

   <div class="switch-block">
    <div class="switch-body">
      <h4 class="title">Title 
        <span class="icon is-small tooltip" data-tooltip="Informações adicionais" data-tooltip-position="right">
            <i class="fak fa-info-medium"></i>
        </span>
      </h4>
      <p>Text</p>
    </div>
    <div class="switch tooltip" data-tooltip="Ligado">
      <input id="switch6" class="switch" type="checkbox" checked="checked">
      <label class="label" for="switch6" data-on="On" data-off="Off"></label>
    </div>
  </div>

---

List

Essa variação de Switch deve ser aplicada somente com mais linhas de lista. Por exemplo: Lista horizontal com Switch + lista horizontal Text. Caso não seja necessário criar uma lista, use o componente Switch padrão (Title).

<div class='block-list'> 
  <ul> 
    <li> 
      <label>Ativar WhatsApp</label>
      <div class="switch">
        <input id="switch-uc-1" class="switch" type="checkbox" checked="checked">
        <label class="label" for="switch-uc-1" data-on="On" data-off="Off"></label>
      </div>
    </li>
  </ul>
</div>

---

Table

Na tabela, o Switch aparece na última coluna dentro de uma das células da linha com a mesma função de ligar e desligar uma ação correspondente.

<table class="table is-list is-fullwidth is-inverted">
  <thead>
    <tr>
      <th>Canal</th>
      <th>Notificação</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>WhatsApp</td>
      <td>
        <div class="switch">
          <input id="switch-uc-2" class="switch" type="checkbox" checked="checked">
          <label class="label" for="switch-uc-2" data-on="On" data-off="Off"></label>
        </div>
      </td>
    </tr>
</table>

Aplicação

A aplicação também pode estar vinculada a outro componente. O Switch também é considerado um elemento de outros componentes mais complexos como Listas e Tabelas. Para utilizar essas variações, selecione o componente nas instâncias e altere no menu direito do Figma.

• Em toda aplicação, é importante que a label (rótulo) seja curto e direto.
• Uma boa tática para criar labels mais eficazes é se perguntar: O que deve ser ativado ou desativado?

Casos de uso

Informações gerais

Para alterar as informações abaixo, clique no botão editar

---

---

Nome	E-mail	Situação
Cláudia Caçote	[email protected]
João Antônio dos Santos	[email protected]
Débora Nascimento	[email protected]