Input - Checkbox
Last updated: 9/20/21
Checkbox inputs are used for confirming an option
Base
Use the base class pier-input-checkbox to create a default input checkbox
HTML markup
<label class="pier-input-checkbox"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
>
Partial
Use the modifier class pier-input-checkbox--partial to change the state of the input checkbox to partial.
HTML markup
<label class="pier-input-checkbox pier-input-checkbox--partial"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
>
Sizes
Use the modifier classes pier-input-checkbox--sm, pier-input-checkbox--md, or pier-input-checkbox--lg to change the size of the input-checkbox.
HTML markup
<label class="pier-input-checkbox pier-input-checkbox--sm"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div
class="
pier-input-checkbox__indicator pier-input-checkbox__indicator--sm
"
></div>
<span class="pier-input-checkbox__label">Label</span></label
><label class="pier-input-checkbox pier-input-checkbox--md -m-l-4"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
><label class="pier-input-checkbox pier-input-checkbox--lg -m-l-4"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div
class="
pier-input-checkbox__indicator pier-input-checkbox__indicator--lg
"
></div>
<span class="pier-input-checkbox__label">Label</span></label
>
Error
Use the modifier class pier-input-checkbox--error to change the state of the input checkbox to error.
HTML markup
<label class="pier-input-checkbox pier-input-checkbox--error"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
>
Disabled
Use the modifier class pier-input-checkbox--disabled to change the state of the input checkbox to disabled.
HTML markup
<label class="pier-input-checkbox pier-input-checkbox--disabled"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
>
Dark
Use the modifier class pier-input-checkbox--dark to change the style of the input checkbox for dark UI themes.
HTML markup
<label class="pier-input-checkbox pier-input-checkbox--dark"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
>
Partial Dark
Use the modifier class pier-input-checkbox--dark to change the style of the input checkbox for dark UI themes.
HTML markup
<label
class="
pier-input-checkbox
pier-input-checkbox--dark
pier-input-checkbox--partial
"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
>
Error Dark
Use the modifier class pier-input-checkbox--dark to change the style of the input checkbox for dark UI themes.
HTML markup
<label
class="
pier-input-checkbox pier-input-checkbox--dark pier-input-checkbox--error
"
><input type="checkbox" class="pier-input-checkbox__input" value="" />
<div class="pier-input-checkbox__indicator"></div>
<span class="pier-input-checkbox__label">Label</span></label
>
© 2021 Gumgum, Inc.
