TRAVLR UI Kit

<%= require('html-loader!./../components/sidebar-documentation.html') %>

Checkbox

Create great looking checkbox elements using a simple wrapper around the <input type="checkbox"> class any input element and create neat looking layouts.

This component required class .t-form on wrapper container. Make sure the linked checkbox have the same value for their name HTML attribute.

Example

                              
                                  <div class="t-form">
                                      <div class="t-input-group">
                                        <label class="t-input-control t-input-control-checkbox"> First checkbox
                                          <input type="checkbox" name="checkbox" checked="checked">
                                          <div class="t-input-control-indicator"></div>
                                        </label> 
                                      </div>
      
                                      <div class="t-input-group">
                                        <label class="t-input-control t-input-control-checkbox"> Second checkbox
                                          <input type="checkbox" name="checkbox">
                                          <div class="t-input-control-indicator"></div>
                                        </label> 
                                      </div>
      
                                      <div class="t-input-group">
                                        <label class="t-input-control t-input-control-checkbox disabled"> Third checkbox
                                          <input type="checkbox" name="checkbox" disabled>
                                          <div class="t-input-control-indicator"></div>
                                        </label> 
                                      </div>
                                  </div>

First checkbox

Second checkbox

Third checkbox

<%= require('html-loader!./../components/footer-documentation.html') %>