<{% if not asChild %}button{% else %}div{% endif %}
x-data="{
checked: {% if defaultChecked %}{{ defaultChecked|lower }}{% else %}false{% endif %},
disabled: {% if attrs.disabled %}true{% else %}false{% endif %},
isFormControl: true,
init() {
this.isFormControl = {{ attrs.form|yesno:'true,false' }} ? true : this.$el.closest('form') !== null;
if ({{ asChild|yesno:'true,false' }}) {
this.$nextTick(() => this.forwardPropsToChild());
}
},
toggle() {
if (!this.disabled) this.checked = !this.checked;
},
getCheckedState() {
return this.checked ? 'checked' : 'unchecked';
},
forwardPropsToChild() {
const child = this.$el.firstElementChild
if (!child) return;
child.setAttribute('role', 'checkbox');
child.setAttribute('aria-checked', this.checked);
child.dataset.state = this.getCheckedState();
if (this.disabled) child.setAttribute('disabled', '');
this.$watch('checked', value => {
child.setAttribute('aria-checked', value);
child.dataset.state = this.getCheckedState();
});
},
}"
class="
peer
relative
{% if not asChild %}
border-input
dark:bg-input/30
data-[state=checked]:bg-primary
data-[state=checked]:text-primary-foreground
dark:data-[state=checked]:bg-primary
data-[state=checked]:border-primary
focus-visible:border-ring
focus-visible:ring-ring/50
aria-invalid:ring-destructive/20
dark:aria-invalid:ring-destructive/40
aria-invalid:border-destructive
size-4
shrink-0
rounded-[4px]
border
shadow-xs
transition-shadow
outline-none
focus-visible:ring-[3px]
disabled:cursor-not-allowed
disabled:opacity-50
{% endif %}
{% if class %}{{ class }}{% endif %}
"
{% if not asChild %}
type="button"
role="checkbox"
:aria-checked="checked"
:data-state="checked ? 'checked' : 'unchecked'"
{% if attrs.disabled %}
disabled
{% endif %}
{% endif %}
{% if attrs.disabled %}
data-disabled
{% else %}
@click="toggle()"
{% endif %}
{% with form_attrs='name,required,form,value,checked,disabled,id' vars='asChild,defaultChecked' %}
{% for key, value in attrs.items %}
{% if key not in form_attrs and key not in vars %}
{{ key }}{% if value != True %}="{{ value }}"{% endif %}
{% endif %}
{% endfor %}
{% endwith %}
{% if attrs.id %}
:id="isFormControl ? null : '{{ attrs.id }}'"
{% endif %}
>
{% if not asChild %}
{% else %}
{{ slot }}
{% endif %}