Modo escuro

Radio Button

Utilize o Radio Button para permitir que os utilizadores façam uma única seleção entre várias opções mutuamente exclusivas. Este componente é essencial para situações onde apenas uma escolha é permitida e é necessário garantir que apenas uma opção seja selecionada.

Características Principais

Seleção Única

Permite que o utilizador escolha apenas uma opção de um grupo, garantindo exclusividade na seleção.

Clareza Visual

Exibe todas as opções disponíveis simultaneamente, facilitando a comparação e escolha.

Feedback Imediato

Indica claramente qual opção foi selecionada, ajudando na tomada de decisões do utilizador.

Exemplo de Utilização
  • Formulários de pesquisa onde é necessário escolher uma resposta entre várias opções.
  • Configurações de preferências onde apenas uma opção pode ser ativa, como seleções de modo (ex.: modo claro ou escuro).
  • Escolhas de método de pagamento ou entrega.

Incorpore Radio Buttons sempre que precisar garantir uma escolha única entre múltiplas opções, proporcionando uma experiência de utilizador clara e direta.

Exemplos

                                                    
<div class="form-check">
    <input type="radio" class="form-check-input custom-radiobox" id="flexRadioDefault">
    <label class="form-check-label" for="flexRadioDefault">
        Default
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input type="radio" class="form-check-input custom-radiobox" id="flexRadioChecked" checked>
    <label class="form-check-label" for="flexRadioChecked">
        Selecionado
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input custom-radiobox" type="radio" id="disabledFlexCheck" disabled>
    <label class="form-check-label" for="disabledFlexCheck">
        Disabled
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input custom-radiobox" type="radio" id="flexRadioCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexRadioCheckedDisabled">
        Disabled selecionado
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input custom-radiobox error" type="radio" id="errorFlexRadio">
    <label class="form-check-label" for="errorFlexRadio">
        Error
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check form-check-accessibility radiobox">
    <input class="form-check-input custom-radiobox" type="radio" value="" id="accessFlexRadioChecked">
    <label class="form-check-label" for="accessFlexRadioChecked">
        Radio acessibility
    </label>
</div>