<!-- Default -->
<div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***0a5ba2***|" type="checkbox" name="checkbox-name" /><label class="checkbox__label" for="checkbox-|***0a5ba2***|">Checkbox</label></div>
<!-- Checked -->
<div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***387322***|" type="checkbox" name="checkbox-name" checked="checked" /><label class="checkbox__label" for="checkbox-|***387322***|">Checkbox</label></div>
<!-- Disabled -->
<div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***5ac304***|" type="checkbox" name="checkbox-name" disabled="disabled" /><label class="checkbox__label" for="checkbox-|***5ac304***|">Checkbox</label></div>
<!-- Disabled & checked -->
<div class="checkbox checkbox--default"><input class="checkbox__input" id="checkbox-|***ca63c3***|" type="checkbox" name="checkbox-name" checked="checked" disabled="disabled" /><label class="checkbox__label" for="checkbox-|***ca63c3***|">Checkbox</label></div>
- checkboxId = id || `checkbox-|***${randomString()}***|`;
#{tag || 'div'}.checkbox(
class=classNames(`checkbox--${style || 'default'}`),
)&attributes(attr)
input.checkbox__input(
id=checkboxId,
type='checkbox',
name=name,
value=value,
checked=checked,
required=required,
disabled=disabled,
aria-invalid=invalid && 'true',
aria-describedby=descriptionId,
aria-labelledby=labelId,
aria-errormessage=errorId,
)&attributes(attrCheckbox)
if label
label.checkbox__label(for=checkboxId) !{render(label, true)}
/* Default */
{
"name": "checkbox-name",
"label": "Checkbox"
}
/* Checked */
{
"name": "checkbox-name",
"label": "Checkbox",
"checked": true
}
/* Disabled */
{
"name": "checkbox-name",
"label": "Checkbox",
"disabled": true
}
/* Disabled & checked */
{
"name": "checkbox-name",
"label": "Checkbox",
"checked": true,
"disabled": true
}
.checkbox {
$size: 1.2em;
cursor: pointer;
display: inline-block;
font-size: $form-font-size;
user-select: none;
vertical-align: middle;
input {
opacity: 0;
position: absolute;
}
input,
label {
cursor: pointer;
}
input:disabled,
input:disabled + label {
color: $color-gray;
cursor: default;
}
input + label::before {
background: transparent;
border: 1px solid $color-gray;
content: '';
display: inline-block;
height: $size;
margin-right: $size * 0.5;
margin-top: -($size * 0.2);
vertical-align: middle;
width: $size;
}
input:checked + label::before {
background: url('../images/backgrounds/bg-checkbox-white.png') no-repeat center center $color-green;
background-size: 12px auto;
border: 1px solid $color-green;
}
input:disabled + label::before {
border: 1px solid $color-gray;
}
input:checked:disabled + label::before {
background: url('../images/backgrounds/bg-checkbox-white.png') no-repeat center center $color-gray;
background-size: 12px auto;
border: 1px solid $color-gray;
}
a {
border-bottom: 1px solid currentColor;
color: $color-green;
@media(hover: hover) and (pointer: fine) {
&:hover {
color: $color-gray;
}
}
}
}
There are no notes for this item.