Modo escuro

Checkbox

Utilize a Checkbox para permitir que os utilizadores façam seleções múltiplas de uma lista de opções. Este componente é essencial em formulários e configurações onde os utilizadores precisam indicar várias escolhas simultaneamente, como em filtros, preferências ou funcionalidades específicas.

Características Principais

Seleções Múltiplas

Permite que os utilizadores marquem várias opções de uma lista, oferecendo flexibilidade na escolha.

Facilidade de Uso

Oferece uma forma intuitiva e direta para os utilizadores indicarem suas preferências ou ações.

Versatilidade

Pode ser utilizado em diversos contextos, desde formulários de inscrição até interfaces de configuração de software.

Exemplo de Utilização
  • Formulários com múltiplas opções de escolha, como em inscrições ou pesquisas.
  • Configurações de preferências do utilizador em aplicações.
  • Filtros de busca que requerem seleção de múltiplos critérios.

Incorpore o Checkbox sempre que precisar de uma forma clara e eficaz para coletar múltiplas escolhas dos utilizadores, melhorando a interação e a experiência na sua interface.

Exemplos

                                                    
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        Default
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
        Checked
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input form-check-input-error" type="checkbox" value="" id="errorFlexCheck">
    <label class="form-check-label" for="errorFlexCheck">
        Error
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input form-check-input-error" type="checkbox" checked value="" id="errorFlexCheckChecked">
    <label class="form-check-label" for="errorFlexCheckChecked">
        Checked Error
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="disabledFlexCheck" disabled>
    <label class="form-check-label" for="disabledFlexCheck">
        Disabled
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="disabledFlexChecked" checked disabled>
    <label class="form-check-label" for="disabledFlexChecked">
        Checked disabled
    </label>
</div>
                                                    
                                                
                                                    
<div class="form-check form-check-accessibility">
    <div class="check-accessibility">
        <input class="form-check-input" type="checkbox" value="" id="accessFlexCheckChecked" checked>
        <label class="form-check-label" for="accessFlexCheckChecked">
            Checked acessibility
        </label>
    </div>
</div>
                                                    
                                                
                                                    
<div class="form-check">
    <input class="form-check-input indeterminate-checkbox" type="checkbox" id="indeterminateCheckbox">
    <label class="form-check-label" for="indeterminateCheckbox">Indeterminate Checkbox</label>
</div>