Checkbox
- Angular:
mds-checkbox - CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Checkbox permite que o usuário selecione um ou mais itens de uma lista, ou alterne entre dois estados mutuamente exclusivos (ativado/desativado) para uma única opção independente.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Independência: Cada caixa de seleção opera de forma independente; selecionar uma opção não deve desmarcar outra na mesma lista.
- Rótulos Claros: O texto associado deve ser positivo e descrever claramente o que acontece quando marcado.
- Ruim: Não enviar notificação.
- Melhor: Enviar notificação.
- Vá Direto ao Ponto: Use Caixa de Sentença para os rótulos. Apenas a primeira letra e nomes próprios em maiúsculas.
- Agrupamento: Se houver uma lista longa, use um Checkbox “Mestre” no topo para permitir “Selecionar todos”.
- Feedback Imediato: A alteração do estado deve ser visualmente clara, mas a aplicação da ação (como excluir itens selecionados) geralmente requer um botão de confirmação separado.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo/Negativo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Filtro de Status | Eu quero ver apenas pedidos que já saíram | Pedidos enviados |
| Termos de Uso | Você aceita os termos e condições? | Aceito os termos e condições |
| Seguro de Carga | Deseja que a carga não fique sem seguro? | Incluir seguro de carga |