<div class="toggle">
<input type="checkbox" name="toggle" id="toggle-disabled" disabled class="toggle-checkbox" />
<span class="toggle-background"></span>
</div>
<div class="toggle">
<input
type="checkbox"
name="{{name}}"
id="{{id}}"
{{#if checked }}checked{{/if}}
{{#if disabled}}disabled{{/if}}
class="toggle-checkbox"/>
<span class="toggle-background"></span>
</div>
{
"checked": false,
"disabled": true,
"name": "toggle",
"id": "toggle-disabled"
}
.toggle {
@apply relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in;
.toggle-checkbox {
@apply absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer;
&:checked {
@apply right-0 border-green-600;
}
&:checked + .toggle-background {
@apply bg-green-600;
}
&[disabled] {
@apply cursor-not-allowed;
}
&[disabled] + .toggle-background {
@apply cursor-not-allowed;
}
}
.toggle-background {
@apply block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer;
}
}
No notes defined.