Campo da caixa de seleção
Colete concordâncias e seleções múltiplas com facilidade. De simples caixas de seleção sim/não a listas de seleção múltipla com "Selecionar tudo", controles de mínimo/máximo e layouts inteligentes, o campo Caixa de seleção lida com concordâncias únicas e perguntas de múltipla escolha com validação robusta e opções intuitivas.
Dois modos para cada necessidade de caixa de seleção
Perfeito para:
Funcionalidades poderosas para cada caso de uso
Dois modos de caixa de seleção
Modo de caixa de seleção única:
Uma única caixa de seleção para perguntas de sim/não, concordâncias ou opções de adesão. Perfeita para aceitação de termos, inscrições em newsletters e formulários de consentimento.
Casos de uso:
- “Concordo com os termos e condições”
- “Assine a newsletter”
- “Sim, quero receber atualizações”
- “Confirmo que esta informação é correta.”
Características:
- Texto personalizado do rótulo da caixa de seleção
- Estado padrão marcado/desmarcado
- Valor personalizado enviado (sim, 1, verdadeiro, etc.)
- Opção de validação obrigatória
Modo de múltiplas caixas de seleção:
Opções múltiplas onde os usuários podem selecionar várias alternativas. Ideal para perguntas do tipo "Selecione todas as opções aplicáveis", coleta de preferências e pesquisas com múltipla escolha.
Casos de uso:
- “Quais recursos lhe interessam?” (seleção múltipla)
- “Selecione seus métodos de contato preferidos”
- “Escolha todos os serviços de que precisa”
- “Quais são os assuntos que lhe interessam?” (marque vários)
Características:
- Opções ilimitadas de caixas de seleção
- Três estilos de layout
- Opção "Selecionar tudo"
- Limites de seleção mínimo/máximo
- “Outro” com entrada de texto
- opção exclusiva “Nenhuma das opções acima”
🎨 Três opções de layout (modo múltiplo)
Layout vertical (empilhado):
As caixas de seleção aparecem uma por linha, empilhadas verticalmente. Layout mais legível para rótulos de opções mais longos.
Melhor para:
- Texto longo da opção
- 3-10 opções
- Formulários otimizados para dispositivos móveis
- Legibilidade máxima
Layout horizontal (lado a lado):
As caixas de seleção aparecem em uma linha, lado a lado. Layout compacto para rótulos curtos.
Melhor para:
- 2 a 5 opções curtas
- Formas compactas
- Layouts de desktop
- Eficiência de espaço
Layout em grade (múltiplas colunas):
Caixas de seleção dispostas em uma grade de duas colunas. Layout equilibrado que economiza espaço sem comprometer a legibilidade.
Melhor para:
- 4-12 opções
- Rótulos de comprimento médio
- Design equilibrado
- Aparência profissional
Comportamento responsivo:
Todos os layouts se adaptam automaticamente às telas de dispositivos móveis, empilhando-se quando necessário para uma melhor interação por toque.
✨ Opção “Selecionar tudo”
Seleção com um clique:
Adicione uma caixa de seleção especial "Selecionar tudo" no topo da sua lista. Os usuários poderão marcar/desmarcar todas as opções com um único clique.
Comportamento Inteligente:
- Verifica todas as opções regulares simultaneamente
- Desmarca todas as opções ao clicar novamente.
- Desmarca automaticamente se alguma opção for desmarcada.
- Mostra um estado indeterminado quando algumas (não todas) as opções estão selecionadas.
- Exclui “Nenhuma das opções acima” da seleção de todas.
Perfeito para:
- Listas longas de caixas de seleção (5 ou mais opções)
- Formulários onde os usuários frequentemente selecionam tudo
- Perguntas do tipo “Marque todas as opções que se aplicam”
- Seleção de permissões e recursos
Experiência de usuário:
Economiza tempo em listas longas. Os usuários podem selecionar tudo e, em seguida, desmarcar exceções específicas.
✏️ Opção “Outro” com entrada de texto
Coleta de respostas personalizadas:
Adicione uma caixa de seleção "Outro" que revele um campo de texto quando selecionada. Os usuários podem especificar sua própria resposta caso as opções predefinidas não sejam adequadas.
Como Funciona:
- A caixa de seleção “Outro” aparece na parte inferior da lista.
- Quando selecionado, o campo de entrada de texto aparece.
- Os usuários digitam respostas personalizadas.
- Tanto a seleção por caixa de seleção quanto o texto são enviados.
Casos de uso:
- Método de contato preferencial: …Outro (especifique)
- “Interesses: …Outros tópicos”
- “Como você ficou sabendo de nós: …Outra fonte”
- Qualquer lista que não possa co
Benefícios:
Captura respostas inesperadas, oferece flexibilidade, evita seleções forçadas e melhora a qualidade dos dados.
❌ Opção “Nenhuma das opções acima”
Exclusivamente não selecionado:
Adicione uma opção "Nenhuma das opções acima" que desmarque automaticamente todas as outras seleções ao ser clicada.
Exclusividade Inteligente:
- Quando a opção “Nenhuma” é selecionada, todas as outras opções são desmarcadas automaticamente.
- Quando qualquer outra opção estiver selecionada, “Nenhuma” será desmarcada automaticamente.
- Oferece uma maneira clara de indicar que nenhuma seleção se aplica.
- Impede seleções contraditórias
Casos de uso:
- Perguntas opcionais de preferência
- “Selecione todas as alergias: …Nenhuma das opções acima”
- verificadores de qualificação
- Seleções de interesse
Por que incluir:
Impede o abandono do formulário, demonstra rigor, oferece uma opção negativa explícita e melhora a precisão dos dados.
📊 Controles de seleção de mínimo/máximo
Quantidade de seleção de controle:
Defina o número mínimo e máximo de caixas de seleção que devem/podem ser marcadas.
Seleções mínimas:
Exija que os usuários selecionem pelo menos X opções. O formulário não será enviado até que o requisito seja atendido.
Exemplos:
- Selecione pelo menos 2 interesses (Mínimo: 2)
- “Escolha no mínimo 3 preferências” (Mínimo: 3)
- “Escolha pelo menos 1 opção” (Mínimo: 1)
Seleções máximas:
Limitar a seleção de opções por usuário a no máximo X. As caixas de seleção são desativadas após o limite ser atingido.
Exemplos:
- “Escolha suas 3 principais funcionalidades” (Máximo: 3)
- “Selecione até 5 serviços” (Máx.: 5)
- “Escolha no máximo 2 opções” (Máximo: 2)
Feedback claro:
Os usuários veem mensagens de validação como "Selecione pelo menos 2 opções" ou "Máximo de 3 seleções permitidas".
🔧 Gerenciamento de opções simplificado
Controle total sobre as escolhas:
- Adicione opções – Digite e pressione Enter ou clique em “Adicionar opção”. Crie listas de caixas de seleção em segundos.
- Opções de edição – Atualize o texto exibido (o que os usuários veem) e os valores (o que é enviado) de forma independente.
- Marcado por padrão – Pré-selecione caixas de seleção específicas marcando a caixa ao lado de cada opção.
- Opções de reordenação – Use as setas para cima/para baixo para organizar as caixas de seleção na ordem ideal.
- Excluir opções – Remova opções indesejadas com um clique.
Exibição versus valor:
- Rótulo: O que os usuários veem (ex.: “Atualizações por e-mail”)
- Valor: O que está armazenado (ex.: “atualizações_de_email”)
Construção em massa:
Adicione várias opções rapidamente digitando, pressionando Enter, digitando novamente, pressionando Enter – criação rápida de listas com caixas de seleção.
☑️ Recursos de caixa de seleção única
Opções de personalização:
Texto da etiqueta da caixa de seleção:
O texto exibido ao lado da caixa de seleção deve ser claro e específico (por exemplo, "Concordo em receber e-mails de marketing").
Estado padrão verificado:
Marque a caixa previamente ao carregar o formulário. Use com cuidado – os usuários devem marcar as caixas de concordância de forma consciente.
Valor personalizado enviado:
Defina o valor que será enviado quando a opção for selecionada (normalmente “sim”, “1” ou “verdadeiro”). O padrão é “sim”.
Validação necessária:
Torne a caixa de seleção obrigatória. Os usuários precisam marcá-la para enviar o formulário. Ideal para contratos que exigem comprovação de requisitos.
🔀 Lógica Condicional
Visibilidade dinâmica das caixas de seleção:
Exibir ou ocultar campos de caixa de seleção com base em outros valores do formulário. Exibir opções somente quando relevantes.
Regras de lógica avançada:
Lógica AND – Todas as condições devem ser atendidas.
Lógica OU – Qualquer condição pode desencadear a ação.
8 operadores – Igual a, Diferente de, Maior que, Menor que, Contém, Está vazio e mais
Casos de uso:
Exibir as caixas de seleção "Preferências de envio" somente quando a opção "Requer envio" estiver marcada.
Exibir os tópicos da newsletter quando a caixa de seleção de inscrição estiver marcada.
Exibir “Serviços adicionais” quando o tipo de serviço for igual a “Premium”.
Ocultar as opções de desconto quando o valor total do pedido for inferior a US$ 50.
🎯 Experiência do usuário aprimorada
Funcionalidades inteligentes integradas:
- Indicadores visuais – Caixas de seleção claras com espaçamento adequado.
- Navegação por teclado – Navegue pelas opções facilmente usando a tecla Tab.
- Compatível com toque – Grandes áreas de toque para dispositivos móveis
- Seleções padrão – Pré-selecione opções específicas
- Classes CSS personalizadas – Aplique estilos a grupos de caixas de seleção.
- Suporte de acessibilidade – Rótulos ARIA, compatível com leitores de tela
- Otimizado para dispositivos móveis – Tamanhos de caixas de seleção perfeitos para telas sensíveis ao toque.
- Etiquetas claras – Texto legível com alinhamento adequado
- Validação obrigatória – Limpar mensagens de erro
- Texto de ajuda – Adicione descrições para grupos de caixas de seleção complexos
Configuração simples em 3 etapas
Prepare seu campo de caixa de seleção em minutos
Adicionar campo de caixa de seleção
Arraste e solte o campo Caixa de seleção da seção Campos básicos no seu formulário.
Escolha o modo
Selecione “Caixa de seleção única” para perguntas de sim/não ou “Caixas de seleção múltiplas” para opções de múltipla escolha.
Configurar opções
Para seleção única: defina o rótulo e o valor da caixa de seleção. Para seleção múltipla: adicione opções, escolha o layout, habilite opcionalmente as opções "Selecionar tudo" ou "Outros" e defina as seleções mínima e máxima.
🎉 Pronto! Seu campo de caixa de seleção está configurado com validação inteligente.
Aplicações do mundo real
Acordos e Consentimento
* Aceitação dos termos e condições
* Acordos de política de privacidade
* Opções de consentimento por e-mail
* Assinaturas de boletins informativos
Pesquisas e feedback
* Perguntas do tipo “Selecione todas as opções aplicáveis”
* Seleção de múltiplos interesses
* Coleção de preferências de recursos
* Opções de tópicos de interesse
E-Commerce
* Seleção de recursos do produto
* Serviços adicionais
* Opções de envio
* Preferências de notificação
Formulários de Registro
* Preferências de comunicação
* Categorias de interesse
* Configurações de permissão
* Seleção de acesso a recursos
Aplicações
* Verificadores de qualificação
* Seleção de habilidades
* Áreas de interesse
* Opções de disponibilidade
Configurações e preferências
* Configurações de Conta
* Opções de privacidade
* Opções de notificação
* Alternar funcionalidades
Preencha as opções de campo
Configuração básica
- Rótulo do campo – A pergunta ou título exibido acima das caixas de seleção.
- Descrição/Texto de Ajuda – Orientações adicionais para usuários
- Campo obrigatório – Tornar a(s) caixa(s) de seleção obrigatória(s)
- Espaço reservado – Não aplicável a caixas de seleção
Modo de caixa de seleção
Selecione o tipo de modo:
- Caixa de seleção única – Pergunta de sim/não, concordância ou adesão (uma única caixa de seleção)
- Várias caixas de seleção – Opções de seleção múltipla (várias caixas de seleção)
Opções de caixa de seleção única
- Texto ao lado da caixa de seleção – Rótulo exibido ao lado da caixa de seleção (ex.: “Concordo com os termos”)
- Iniciar Selecionado – A caixa de seleção é pré-selecionada quando o formulário é carregado.
- Valor quando selecionado – Valor dos dados armazenado quando selecionado (padrão: “sim”)
Opções com várias caixas de seleção
Estilo de layout:
- Empilhados (um por linha) – Arranjo vertical
- Lado a lado (em fila) – Arranjo horizontal
- Grade (várias colunas) – Layout de grade de 2 colunas
Opções de caixa de seleção:
Crie sua lista de opções:
- Texto a ser exibido – O que os usuários veem (ex.: “E-mail”)
- Valor – O que é enviado (ex.: “e-mail”)
- Marcado por padrão – Pré-selecione opções específicas
- Reordenar – Mover opções para cima/para baixo
- Excluir – Remover opções
Opções especiais:
- Adicionar opção "Selecionar tudo" – Adiciona uma caixa de seleção na parte superior que seleciona/desmarca todas as opções.
- Adicionar opção “Outro” com caixa de texto – Adiciona a opção “Outro” com um campo de texto para respostas personalizadas.
- Adicionar a opção “Nenhuma das opções acima” – Adiciona uma opção exclusiva que desmarca todas as outras quando selecionada.
Limites de seleção:
- Número mínimo de seleções necessárias – Número mínimo de caixas de seleção que devem ser marcadas (ex.: 2)
- Número máximo de seleções permitidas – Número máximo de caixas de seleção que podem ser marcadas (ex.: 5)
Lógica Condicional
- Ativar lógica condicional – Mostrar/ocultar com base em condições
- Tipo de lógica
- Todas as condições devem ser atendidas (E)
- Qualquer condição pode ser satisfeita (OU)
- Regras de Condição
- Mostrar/Ocultar – Ação a ser tomada
- Campo – Qual campo verificar
- Operador – Igual a, Diferente de, Contém, Maior que, Menor que, Vazio, Não vazio
- Valor – Valor de comparação
- Múltiplas Condições – Adicione regras ilimitadas
Opções avançadas
- Campo oculto – Torna o campo invisível (não recomendado para caixas de seleção)
- Classes CSS personalizadas – Aplique estilos personalizados
- Atributos de acessibilidade – Rótulos ARIA para leitores de tela
Por que escolher nosso campo de caixa de seleção?
✅ Dois modos – Uma única caixa de seleção ou várias caixas de seleção em um tipo de campo
✅ Layouts flexíveis – Arranjos verticais, horizontais ou em grade
✅ Selecionar tudo – Seleção com um clique para maior conveniência
✅ Outra opção – Entrada de texto para respostas personalizadas
✅ Nenhuma opção – Opção exclusiva sem necessidade de seleção
✅ Limites mínimos/máximos – Quantidade de seleção de controle
✅ Gestão Fácil – Adicione, edite, reordene e exclua opções sem esforço.
✅ Amigo do usuário – Etiquetas claras, espaçamento adequado, fáceis de tocar
✅ Totalmente Integrado – Funciona perfeitamente com todos os recursos de formulário
Perguntas frequentes
P: Qual a diferença entre os modos de seleção única e múltipla?
O modo único exibe uma caixa de seleção para decisões de sim/não. O modo múltiplo exibe várias caixas de seleção onde os usuários podem selecionar mais de uma opção.
P: Os usuários podem selecionar todas as caixas de seleção de uma só vez?
Sim. Ative a opção “Selecionar tudo” para adicionar uma caixa de seleção que marca ou desmarca todas as opções com um único clique.
P: Como funcionam as seleções de mínimo/máximo?
O parâmetro "Mínimo" garante que os usuários selecionem pelo menos um determinado número de opções. O parâmetro "Máximo" limita quantas caixas de seleção eles podem escolher.
P: O que faz a opção “Outro”?
Adiciona uma caixa de seleção extra com a etiqueta "Outro". Quando selecionada, um campo de texto aparece para que os usuários possam inserir uma resposta personalizada.
P: Como funciona a opção “Nenhuma das alternativas acima”?
Ela funciona como uma opção exclusiva. Se selecionada, todas as outras caixas de seleção são desmarcadas. Se qualquer outra opção estiver marcada, a opção "Nenhuma" é desmarcada automaticamente.
P: Posso pré-selecionar determinadas caixas de seleção?
Sim. Para o modo individual, ative a opção “Iniciar Selecionado”. Para o modo múltiplo, marque a pequena caixa de seleção ao lado de cada opção que você deseja que seja selecionada por padrão.
P: Devo selecionar previamente as caixas de concordância?
Não. Para políticas, termos e consentimento, os usuários devem marcar a caixa manualmente.
P: Posso alterar a ordem das caixas de seleção?
Sim. Use as setas para cima e para baixo ao lado de cada opção para reordená-las como quiser.
P: Qual a diferença entre texto de exibição e valor?
O texto exibido é o que os usuários veem. O valor é o que fica armazenado no seu banco de dados, garantindo dados limpos e consistentes.
P: Posso usar lógica condicional com caixas de seleção?
Sim. Acione outros campos com base em seleções usando operadores como "Igual a", "Está vazio" ou "Não está vazio".
P: Como faço para criar uma caixa de seleção obrigatória?
Ative a opção “Campo obrigatório”. No modo de seleção única, a caixa deve estar marcada. No modo de seleção múltipla, os usuários devem selecionar pelo menos uma opção ou atender aos requisitos mínimos definidos.
P: Os usuários podem alterar as seleções após a verificação?
Sim. Eles podem marcar ou desmarcar qualquer opção livremente antes de enviar o formulário. A opção "Selecionar tudo" também pode ser desativada a qualquer momento.
