Element Framework

Toggle

  • HTML
  • JS
  • CSS
  <div class="container">
    <p class="item">
      <span class="label">WiFi</span>
      <ef-toggle></ef-toggle>
    </p>
    <p class="item">
      <span class="label">Bluetooth</span>
      <ef-toggle checked></ef-toggle>
    </p>
    <p class="item">
      <span class="label">Do not disturb</span>
      <ef-toggle></ef-toggle>
    </p>
    <p class="item">
      <span class="label" disabled>Airplane mode</span>
      <ef-toggle></ef-toggle>
    </p>
  </div>

                  
.container {
  max-width: 200px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  margin-right: 2em;
}

ef-toggle {
  height: 20px;
  width: 36px;
}

                  

                

              

              
              
              
              
              
              
              
              
            

            
ef-toggle is a form control element that allows users to toggle between two states.

            
Using Toggle

            
Toggle can switch between two states when the user taps or through setting the attribute/property checked.


            

              

                

              

              

                

                  
    
                    
  • HTML
    • 
                    
  • JS
    • 
                    
  • CSS
    • 
                  

                

                

                  

                  
                

              

              

                

                  
<p>
  <ef-toggle></ef-toggle>
</p>
<p>
  <ef-toggle checked></ef-toggle>
</p>

                  

                  

                  

                

              

              
              
              
              
              
              
              
            

            
<ef-toggle></ef-toggle>
<ef-toggle checked></ef-toggle>

            
Labels

            
Toggle provides label and checked-label attributes to display labels inside the toggle in realtion to checked states.


            

              

                

              

              

                

                  
    
                    
  • HTML
    • 
                    
  • JS
    • 
                    
  • CSS
    • 
                  

                

                

                  

                  
                

              

              

                

                  
<ef-toggle label="OFF" checked-label="ON"></ef-toggle>

                  

                  

                  

                

              

              
              
              
              
              
              
              
            

            
<ef-toggle label="OFF" checked-label="ON"></ef-toggle>

            
Events

            
Toggle dispatches checked-changed whenever user interaction changes the checked value.


            

              

                

              

              

                

                  
    
                    
  • HTML
    • 
                    
  • JS
    • 
                    
  • CSS
    • 
                  

                

                

                  

                  
                

              

              

                

                  
<div style="display: flex; align-items: center;">
  <ef-toggle id="toggle"></ef-toggle>
  <div style="margin-left: 1em;">Switch <span id="text"></span></div>
</div>

                  
var text = document.getElementById('text');
var toggle = document.getElementById('toggle');

text.innerHTML = 'OFF';

toggle.addEventListener('checked-changed', function(e) {
  text.innerHTML = e.target.checked ? 'ON' : 'OFF';
});

                  

                  

                

              

              
              
              
              
              
              
              
            

            
<div>
  <ef-toggle id="toggle"></ef-toggle>
  <div>Switch <span id="text"></span></div>
</div>

            
var text = document.getElementById('text');
var toggle = document.getElementById('toggle');

text.innerHTML = 'OFF';

toggle.addEventListener('checked-changed', function (e) {
  text.innerHTML = e.target.checked ? 'ON' : 'OFF';
});

            

              

              
API Reference

              
Attributes

              

                
string

                
checked-label

                
Label of toggle checked

              

              

                
string

                
label

                
Label of toggle

              

              

                
boolean

                
checked

                
Value of toggle

              

              

                
boolean

                
readonly

                
Set readonly state

              

              

                
boolean

                
disabled

                
Set disabled state

              

              
Properties

              

                
string

                
checkedLabel

                
Label of toggle checked

                
""

              

              

                
string

                
label

                
Label of toggle

                
""

              

              

                
boolean

                
checked

                
Value of toggle

              

              

                
boolean

                
readonly

                
Set readonly state

                
false

              

              

                
boolean

                
disabled

                
Set disabled state

                
false

              

              
Events

              

                
checked-changed

                
Fired when the `checked` property changes.