{% comment %}NexUI Checkbox v1.0.0{% endcomment %}
<div class="{{ container_class }}">
  <div class="flex items-center gap-2">
    <input
      type="checkbox"
      name="{{ name }}"
      id="{{ id }}"
      {% if value %}value="{{ value }}"{% endif %}
      {% if checked %}checked{% endif %}
      {% if required %}required{% endif %}
      {% if disabled %}disabled{% endif %}
      class="h-4 w-4 rounded border border-input accent-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {{ input_class }}"
      {{ attrs }}
    />
    {% if label %}
    <label
      for="{{ id }}"
      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {{ label_class }}"
    >{{ label }}</label>
    {% endif %}
  </div>
  {% if hint %}<p class="text-xs text-muted-foreground mt-1 ml-6">{{ hint }}</p>{% endif %}
  {% if error %}<p class="text-xs text-destructive mt-1 ml-6">{{ error }}</p>{% endif %}
</div>