<label class="switch"><input class="switch__checkbox" id="checkbox-|***ad9018***|" type="checkbox" name="switch-name" /><span class="switch__slider"></span></label>
- checkboxId = id || `checkbox-|***${randomString()}***|`;
label.switch()&attributes(attr)
input.switch__checkbox(
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)
span.switch__slider
{
"name": "switch-name",
"label": "Switch"
}
.switch {
display: inline-block;
height: 3rem;
position: relative;
width: 5.6rem;
}
.switch__checkbox {
height: 0;
opacity: 0;
width: 0;
}
.switch__slider {
background-color: $color-gray;
border-radius: 3rem;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.3s;
}
.switch__slider::before {
background-color: #fff;
border-radius: 50%;
bottom: 0.3rem;
content: '';
height: 2.4rem;
left: 0.3rem;
position: absolute;
transition: 0.3s;
width: 2.4rem;
}
.switch__checkbox:checked + .switch__slider {
background-color: $color-green;
}
.switch__checkbox:checked + .switch__slider::before {
transform: translateX(2.5rem);
}
There are no notes for this item.