User Manual

Toggle-group

A component that enables to group toggles like radio and checkboxes together within a container. It allows the render a label representing the entire group as well.

Checkbox


    
      

  

<div class="o-toggle-group ">
  
    

<label for="" class="a-label o-toggle-group__label undefined">
  label
</label>


  

  <ul class="o-toggle-group__list ">
    

      <li class="o-toggle-group__item ">
        

<div class="a-checkbox ">
	<label for="checkboxgroup-styleguide-example-default-1" class="a-checkbox__container">
		<input class="a-checkbox__input" type="checkbox" id="checkboxgroup-styleguide-example-default-1" name="radio-styleguide-example" value="checkbox" />

		<span class="a-checkbox__holder"></span>

    
		  <span class="a-checkbox__label">checkbox</span>
    
	</label>
</div>


      </li>

    

      <li class="o-toggle-group__item ">
        

<div class="a-checkbox ">
	<label for="checkboxgroup-styleguide-example-default-2" class="a-checkbox__container">
		<input class="a-checkbox__input" type="checkbox" id="checkboxgroup-styleguide-example-default-2" name="radio-styleguide-example" value="checkbox" />

		<span class="a-checkbox__holder"></span>

    
		  <span class="a-checkbox__label">checkbox</span>
    
	</label>
</div>


      </li>

    
  </ul>
</div>

Radio


    
      

  

<div class="o-toggle-group ">
  
    

<label for="" class="a-label o-toggle-group__label undefined">
  label
</label>


  

  <ul class="o-toggle-group__list ">
    

      <li class="o-toggle-group__item ">
        

<div class="a-radio ">
	<label for="radiogroup-styleguide-example-default-1" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="radiogroup-styleguide-example-default-1" name="radio-styleguide-example" value="Radio" />

		<span class="a-radio__holder"></span>

    
		  <span class="a-radio__label">Radio</span>
    
	</label>
</div>


      </li>

    

      <li class="o-toggle-group__item ">
        

<div class="a-radio ">
	<label for="radiogroup-styleguide-example-default-2" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="radiogroup-styleguide-example-default-2" name="radio-styleguide-example" value="Radio" />

		<span class="a-radio__holder"></span>

    
		  <span class="a-radio__label">Radio</span>
    
	</label>
</div>


      </li>

    
  </ul>
</div>