1[](https://travis-ci.org/PolymerElements/paper-checkbox) 2 3##<paper-checkbox> 4 5`paper-checkbox` is a [material design checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox). 6User can tap the checkbox to check or uncheck it. Usually you use checkboxes 7to allow user to select multiple options from a set. If you have a single 8ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` 9instead. 10 11Example: 12<!--- 13``` 14<custom-element-demo> 15 <template> 16 <script src="../webcomponentsjs/webcomponents-lite.js"></script> 17 <link rel="import" href="paper-checkbox.html"> 18 <style is="custom-style"> 19 paper-checkbox { 20 font-family: 'Roboto', sans-serif; 21 margin: 24px; 22 } 23 24 paper-checkbox:first-child { 25 --primary-color: #ff5722; 26 } 27 28 paper-checkbox.styled { 29 align-self: center; 30 border: 1px solid var(--paper-green-200); 31 padding: 8px 16px; 32 --paper-checkbox-checked-color: var(--paper-green-500); 33 --paper-checkbox-checked-ink-color: var(--paper-green-500); 34 --paper-checkbox-unchecked-color: var(--paper-green-900); 35 --paper-checkbox-unchecked-ink-color: var(--paper-green-900); 36 --paper-checkbox-label-color: var(--paper-green-500); 37 --paper-checkbox-label-spacing: 0; 38 --paper-checkbox-margin: 8px 16px 8px 0; 39 --paper-checkbox-vertical-align: top; 40 } 41 42 paper-checkbox .subtitle { 43 display: block; 44 font-size: 0.8em; 45 margin-top: 2px; 46 max-width: 150px; 47 } 48 </style> 49 <next-code-block></next-code-block> 50 </template> 51</custom-element-demo> 52``` 53--> 54```html 55<paper-checkbox checked>Checked</paper-checkbox> 56<paper-checkbox class="styled"> 57 Checkbox 58 <span class="subtitle"> 59 With a longer label 60 </span> 61</paper-checkbox> 62<paper-checkbox disabled>Disabled</paper-checkbox> 63``` 64
){kind=link}