<!-- Standard -->
<label class="checkbox">
<input class="checkbox__input" type="checkbox" value="1" id="checkbox-d3f3" name="checkbox-d3f3"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>
<!-- Deaktiviert -->
<label class="checkbox checkbox--disabled">
<input class="checkbox__input" type="checkbox" value="1" id="checkbox-7a3d" name="checkbox-7a3d" disabled="disabled"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>
<!-- Deaktiviert, ausgewählt -->
<label class="checkbox checkbox--disabled">
<input class="checkbox__input" type="checkbox" value="1" checked="checked" id="checkbox-0455" name="checkbox-0455" disabled="disabled"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>
<!-- Invalide -->
<label class="checkbox checkbox--invalid">
<input class="checkbox__input" type="checkbox" value="1" required="required" id="checkbox-e424" name="checkbox-e424" aria-invalid="true"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
attr.id = id || attr.id || `checkbox-${randomString()}`;
attr.name = name || attr.name || attr.id;
//- Prepare wrapAttr object
wrapAttr = wrapAttr || {};
wrapAttr.class = classList(wrapAttr.class);
//- Process options
if (disabled) {
attr.disabled = true;
wrapAttr.class.push('checkbox--disabled');
}
if (invalid) {
attr['aria-invalid'] = 'true';
wrapAttr.class.push('checkbox--invalid');
}
//- Render atom
label.checkbox&attributes(wrapAttr)
input.checkbox__input(type='checkbox', value=value, checked=checked, required=required)&attributes(attr)
span.checkbox__indicator
span.checkbox__label
if text
| #{text}
if html
!= renderPug(html)
/* Standard */
{
"value": 1,
"text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."
}
/* Deaktiviert */
{
"value": 1,
"text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
"disabled": true
}
/* Deaktiviert, ausgewählt */
{
"value": 1,
"text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
"disabled": true,
"checked": true
}
/* Invalide */
{
"value": 1,
"text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
"invalid": true,
"required": true
}
class CheckboxGroup {
constructor($el) {
this.$el = $el;
this.$targets = document.querySelectorAll('.tool-banner__button .button');
this.group = this.$el.dataset.checkboxGroup;
this.init();
}
init() {
this.updateState();
this.$el.addEventListener('change', () => {
this.updateState();
});
}
updateState() {
if (this.allGroupItemsChecked()) this.enableTargets();
else this.disableTargets();
}
enableTargets() {
this.$targets.forEach(($target) => {
$target.classList.remove('button--inactive');
});
}
disableTargets() {
this.$targets.forEach(($target) => {
$target.classList.add('button--inactive');
});
}
allGroupItemsChecked() {
return [...this.groupItems()].filter(
item => item.checked,
).length === this.groupItems().length;
}
groupItems() {
return document.querySelectorAll(`[data-checkbox-group=${this.group}]`);
}
}
// Initialize CheckboxGroup
document.querySelectorAll('[data-checkbox-group]').forEach(
$el => new CheckboxGroup($el),
);
.checkbox {
cursor: pointer;
display: inline-flex;
min-height: 2rem;
padding-left: 3rem;
position: relative;
// Inline stacked
& + & {
margin-left: $spacer;
}
}
.checkbox--disabled {
cursor: not-allowed;
}
.checkbox--right {
.checkbox__indicator {
left: auto;
right: 0;
}
.checkbox__label {
padding-left: 0;
padding-right: 3rem;
}
}
.checkbox__input {
opacity: 0;
position: absolute;
z-index: -1;
}
.checkbox__indicator {
@mixin checkbox-svg($color: $color-blue) {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9"><path fill="none" stroke="' + $color + '" stroke-width="2" d="M1 4.33l3.06 3.34L10.16 1" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
background-color: #fff;
border: 1px solid $color-steelgrey-xdark;
border-radius: 3px;
height: 2rem;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
user-select: none;
width: 2rem;
&::after {
background-position: center center;
background-repeat: no-repeat;
background-size: 12px 9px;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
// Focus, hover style
.checkbox__input:not([disabled]):focus ~ &::after,
.checkbox:not(.checkbox--disabled):hover &::after {
@include checkbox-svg($color-steelgrey-light);
}
// checkbox button is selected
.checkbox__input:not([disabled]):checked ~ &::after {
@include checkbox-svg($color-blue);
}
// checkbox button is selected, but disabled
.checkbox__input[disabled]:checked ~ &::after {
@include checkbox-svg($color-steelgrey-dark);
}
// Disabled
.checkbox__input[disabled] ~ & {
border-color: $color-steelgrey-dark;
}
// Invalid
.checkbox__input[aria-invalid='true']:invalid ~ & {
background-color: rgba($color-red, 0.2);
border-color: $color-red;
}
// Invalid hover, focus
.checkbox__input[aria-invalid='true']:invalid:focus ~ &::after,
.checkbox--invalid:hover .checkbox__input[aria-invalid='true']:invalid ~ &::after {
@include checkbox-svg(rgba($color-red, 0.3));
}
}
.checkbox__label {
align-self: center;
font-size: 1.5rem;
margin-top: -2px;
// Disabled
.checkbox__input[disabled] ~ & {
color: $color-steelgrey-xdark;
}
// Invalid
.checkbox--invalid .checkbox__input:invalid ~ &,
.checkbox__input[aria-invalid='true']:invalid ~ & {
color: $color-red;
font-weight: bold;
}
}
There are no notes for this item.