Checkbox

O checkbox é usado quando existe uma lista de opções e o usuário pode selecionar múltiplas escolhas, todas ou nenhuma delas. Cada checkbox é independente de todos os outros na lista. Selecionar um checkbox não interfere no status dos outros itens.

Aplicação

O checkbox possui três variações de estados. São eles:

<div class="field">
  <p class="control">
    <input class="checkradio" id="example1" type="checkbox" name="example1">
    <label for="example1">Não selecionado</label>
  </p>
</div>

<div class="field">
  <p class="control">
    <input class="checkradio" id="example3" type="checkbox" name="example3" checked="checked">
    <label for="example3">Selecionado</label>
  </p>
</div>

<div class="field">
  <p class="control">
    <input class="checkradio" id="example4" type="checkbox" name="example4" disabled>
    <label for="example4">Desabilitado</label>
  </p>
</div>

Dê preferência na aplicação vertical, habilitado para percorrer a largura máxima permitida da grid que são 8 colunas. Porém, pode-se aplicar horizontalmente com limite de 2 checks alinhados lado a lado. Exemplo abaixo:

<h3 class="title">Canais</h3>

<p>Selecione um ou mais canais para receber notificações</p>

<div class="field">
  <p class="control">
    <input class="checkradio" id="example2-1" type="checkbox" name="example2-1">
    <label for="example2-1">Messenger</label>
  </p>
</div>

<div class="field">
  <p class="control">
    <input class="checkradio" id="example2-2" type="checkbox" name="example2-2" checked="checked">
    <label for="example2-2">SMS</label>
  </p>
</div>

<div class="field">
  <p class="control">
    <input class="checkradio" id="example2-3" type="checkbox" name="example2-3" checked="checked">
    <label for="example2-3">Voz</label>
  </p>
</div>

<div class="field">
  <p class="control">
    <input class="checkradio" id="example2-4" type="checkbox" name="example2-4">
    <label for="example2-4">WhatsApp</label>
  </p>
</div>

<div class="field">
  <p class="control">
    <input class="checkradio" id="example2-5" type="checkbox" name="example2-5">
    <label for="example2-5">Web Chat</label>
  </p>
</div>

<h3 class="title">Canais</h3>
<p>Selecione um ou mais canais para receber notificações</p>

<div class="columns">

  <div class="column is-half">
    <div class="field">
      <p class="control">
        <input class="checkradio" id="example3-1" type="checkbox" name="example3-1">
        <label for="example3-1">Messenger</label>
      </p>
    </div>

    <div class="field">
      <p class="control">
        <input class="checkradio" id="example3-3" type="checkbox" name="example3-3" checked="checked">
        <label for="example3-3">Voz</label>
      </p>
    </div>

    <div class="field">
      <p class="control">
        <input class="checkradio" id="example3-5" type="checkbox" name="example3-5">
        <label for="example3-5">Web Chat</label>
      </p>
    </div>
  </div>

  <div class="column is-half">
    <div class="field">
      <p class="control">
        <input class="checkradio" id="example3-2" type="checkbox" name="example3-2" checked="checked">
        <label for="example3-2">SMS</label>
      </p>
    </div>

    <div class="field">
      <p class="control">
        <input class="checkradio" id="example3-4" type="checkbox" name="example3-4">
        <label for="example3-4">WhatsApp</label>
      </p>
    </div>

    <div class="field">
      <p class="control">
        <input class="checkradio" id="example3-6" type="checkbox" name="example3-6">
        <label for="example3-6">Outros canais</label>
      </p>
    </div>
  </div>

</div>

Quando usar

• Várias opções estão disponíveis e a pessoa usuária precisa selecionar uma ou mais
• A pessoa usuária precisa selecionar opções de uma lista de itens relacionados
• Se um Switch não indicar claramente qual a ação que será executada, use checkboxes
• Se existe uma única opção de sim/não ao selecionar/deselecionar. Por exemplo, na tela de criação de nova conta, use checkbox em “aceitar os termos de uso”

Boas Práticas

• O estado padrão do checkbox é unselected (Não selecionado)
• Permita que os usuários selecionem uma opção clicando não apenas na pequena caixa de seleção, mas também na etiqueta.
• As etiquetas devem estar alinhadas horizontalmente à direita da caixa.
• Utilize 7 opções ou menos. De acordo com a Lei de Miller, somos capazes de processar, em média, 7 grupos de informações por vez