Checkbox

a boolean choice with checked, indeterminate and disabled states. long labels wrap under the first line.

Example

<label class="lucent-checkbox lucent-checkbox--md">
  <input type="checkbox" class="lucent-checkbox__input" />
  <span class="lucent-checkbox__box">
    <span class="lucent-icon lucent-icon--sm lucent-checkbox__icon lucent-checkbox__icon--check" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">check</span>
    </span>
  </span>
  <span class="lucent-checkbox__label">Unchecked</span>
</label>
<label class="lucent-checkbox lucent-checkbox--md">
  <input type="checkbox" class="lucent-checkbox__input" checked />
  <span class="lucent-checkbox__box">
    <span class="lucent-icon lucent-icon--sm lucent-checkbox__icon lucent-checkbox__icon--check" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">check</span>
    </span>
  </span>
  <span class="lucent-checkbox__label">Checked</span>
</label>
<label class="lucent-checkbox lucent-checkbox--md is-indeterminate">
  <input type="checkbox" class="lucent-checkbox__input" aria-checked="mixed" />
  <span class="lucent-checkbox__box">
    <span class="lucent-icon lucent-icon--sm lucent-checkbox__icon lucent-checkbox__icon--check" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">check</span>
    </span>
    <span class="lucent-icon lucent-icon--sm lucent-checkbox__icon lucent-checkbox__icon--dash" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">remove</span>
    </span>
  </span>
  <span class="lucent-checkbox__label">Indeterminate</span>
</label>
<label class="lucent-checkbox lucent-checkbox--md is-disabled">
  <input type="checkbox" class="lucent-checkbox__input" disabled />
  <span class="lucent-checkbox__box">
    <span class="lucent-icon lucent-icon--sm lucent-checkbox__icon lucent-checkbox__icon--check" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">check</span>
    </span>
  </span>
  <span class="lucent-checkbox__label">Disabled</span>
</label>

Playground

checked
indeterminate
disabled
size 
 
 
 
Using it
 
 
  
 Angular  lucent-checkbox 
import { LucentCheckbox } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-checkbox 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 size input xs | sm | md | lg md control density. 
 label input string '' label text. 
 indeterminate input boolean false mixed state; wins over checked. 
  
 
  
Theming
 
 
 
Color (9)
  
 
Size & spacing (5)
  
 
Border & radius (2)
  
 
Type (2)