Componentes · Seleção

Escolher entre opções

Quando a resposta é uma entre poucas opções conhecidas — situação, tipo, sim ou não — você não precisa de tabela nem de busca. Escreve as opções ali mesmo, no painel, e escolhe o formato: lista fechada, opções à vista ou um interruptor.

<mad-select-field> Paleta → Seleção Até 5 opções à vista (Radio); de 6 a 30, lista fechada (Select)
01

Qual formato usar

Os três componentes desta página guardam o mesmo tipo de coisa: um valor escolhido de uma lista curta e conhecida. O que muda é quanto espaço ocupam e quanta atenção pedem.

Sua situaçãoComponente certo
Duas a cinco opções que valem a pena ficar à vistaRadio
Seis a trinta opções, escritas por vocêSelect
Sim ou não, ligado ou desligadoInterruptor
Marcar várias de uma lista curtaGrupo de caixas
As opções vêm de uma tabela e mudam com o tempoDB Select
Lista da tabela com 30 a 200 itens, com buscaDB Combo
Lista da tabela com mais de 200 itensDB Unique Search
A pergunta que decide: quem escreve as opções? Se é você, no painel, use os desta página. Se elas vêm de uma tabela que o usuário cadastra, use os da família DB.
1

Colocar o campo na tela

  1. Abra o formulário no Studio.
  2. Clique com o botão direito onde o campo deve aparecer.
  3. Escolha Select, Radio ou Switch no grupo Seleção.
  4. Clique no campo criado para abrir as opções dele no painel da direita.
Resultado: o campo nasce vazio: ele só mostra alguma coisa depois que você escrever as opções, no passo seguinte.
2

Lista fechada: o Select

  1. Selecione o campo e abra Identificação.
  2. Nome: a coluna onde o valor escolhido será gravado.
  3. Label: o texto que a pessoa lê acima do campo.
  4. Abra Fonte de dados e clique em Items para escrever a lista.
  5. Cada item tem duas partes: o valor que vai para o banco (ex.: ativo) e o texto que a pessoa lê (ex.: Ativo).
Resultado para quem usa o sistema: a pessoa clica no campo, vê a lista fechada com as opções e escolhe uma. Nada é digitado, então não há erro de grafia no banco.
Destaque
Painel de propriedades de um Select com Identificação e Fonte de dados abertas

Passe o mouse na lista — ou use ↑ ↓ depois de focar um item.

O que o painel escreve no código

        

      

      
Valor e texto não são a mesma coisa. Escreva o valor curto e estável (ativo) e o texto
como a pessoa deve ler (Ativo). Mudar o texto depois é seguro; mudar o valor faz os
registros antigos deixarem de casar com a lista.

    


    

      
3
Opções à vista: o Radio

      
Quando são poucas opções e a escolha é importante, deixá-las à vista poupa um clique e evita
      que alguém escolha errado por não ter aberto a lista.

      
    
        
  1. Selecione o campo e abra Fonte de dados.
    2. 
        
  2. Em Opções, clique em adicionar opção e escreva valor e texto de cada uma.
    3. 
        
  3. Para sim/não, ligue Sim/Não automático — as duas opções nascem prontas.
    4. 
        
  4. Em Apresentação, ligue Inline (horizontal) para as opções ficarem lado a lado.
    5. 
        
  5. Se são muitas, use Quebra a cada N para dividir em colunas.
    6. 
      

      
Resultado para quem usa o sistema: as opções aparecem todas na tela, e a pessoa marca uma sem abrir nada.

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel de propriedades de um Radio com Fonte de dados e Apresentação abertas

          

        

        

      

      
Passou de cinco ou seis opções, o Radio começa a ocupar a tela toda. Nesse ponto o Select
lê melhor.

    


    

      
4
Sim ou não: o Interruptor

      
    
        
  1. Selecione o campo e abra Fonte de dados.
    2. 
        
  2. Valor ligado e Valor desligado: o que vai para a coluna em cada estado. O padrão grava 1 e 0.
    3. 
        
  3. Se a coluna guarda texto, troque para sim e nao — ou para o que a sua tabela usa.
    4. 
        
  4. Em Aparência, escolha Variante e Tamanho.
    5. 
      

      
Resultado para quem usa o sistema: a pessoa arrasta o interruptor e o estado fica visível de longe, sem precisar ler.

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel de propriedades de um Interruptor com Fonte de dados e Aparência abertas

          

        

        

      

      
Confira o que a coluna aceita. Se a coluna é de texto e o interruptor grava 1, o valor
entra como o texto "1" — e qualquer filtro por "sim" deixa de encontrar o registro. Ajuste
Valor ligado e Valor desligado ao que a tabela já usa.

    


    

      
5
Testar antes de entregar

      
Salve a tela e publique no Teste online. Confira nesta ordem:

      

        

            
O que fazerO que tem que acontecer

            
Abrir a telaAs opções aparecem escritas do jeito que você digitou.

            
Escolher uma opção e salvarA coluna recebe o valor, não o texto.

            
Reabrir o registro salvoA opção escolhida volta marcada.

            
Salvar sem escolher nadaSe o campo é obrigatório, a tela não salva e avisa.

            
Ligar e desligar o interruptor e salvar cada vezA coluna alterna entre os dois valores configurados.

        

      

    


    

      
07
Problemas comuns

      
O campo aparece vazio, sem nenhuma opção

      
A lista não foi escrita. Abra Fonte de dados e preencha Items (no Select) ou Opções
      (no Radio). Campo de opções sem opções não mostra nada.

      
Reabro o registro e a opção não volta marcada

      
O valor gravado no banco não é igual a nenhum valor da lista — quase sempre porque a lista
      foi editada depois que os registros já existiam. Ajuste os valores da lista para os que o
      banco já tem.

      
As opções mudam de tempos em tempos e eu preciso editar a tela toda vez

      
Elas não deveriam estar escritas no painel. Troque para DB Select ou DB Combo, que leem
      as opções de uma tabela — aí quem cadastra é o próprio usuário.

      
O interruptor salva, mas o relatório não encontra os registros

      
O relatório procura um valor diferente do que o interruptor grava. Alinhe Valor ligado e
      Valor desligado com o que o resto do sistema espera.

    


    

      
08
Referência: painel × código

      
Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados.

      

        

            
No painelNo códigoPadrão

            
Nomename—

            
Labellabel—

            
Items (do Select):items—

            
Opções (do Radio)options—

            
Opções (PHP):options—

            
Pré-marcadoselected—

            
Sim/Não automáticobooleandesligado

            
Inline (horizontal)inlinedesligado

            
Quebra a cada Nbreak-items—

            
Estiloascírculo

            
Valor ligadovalue-on1

            
Valor desligadovalue-off0

            
Variantevariant—

            
Tamanhosize—