<%
  var _sz = locals.size || 'md';
  var _ch = locals.checked ? 'checked' : '';
  var _dis = locals.disabled ? 'disabled' : '';
  var _id = locals.id || 'checkbox-' + Math.random().toString(36).substr(2, 9);
  
  var sc = {
    sm: 'w-3.5 h-3.5 text-xs',
    md: 'w-4 h-4 text-sm',
    lg: 'w-5 h-5 text-base',
  }[_sz] || 'w-4 h-4 text-sm';
%>

  

     <%= _dis %>
      class="rounded border-border text-primary focus:ring-2 focus:ring-border-focus bg-surface-base <%= sc %> <%= _dis ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' %>"
      <% if(locals.onchange) { %>onchange="<%= locals.onchange %>"<% } %>
    >
  
  <% if (locals.label || locals.hint) { %>
    

      <% if (locals.label) { %>
        <%= locals.label %>
      <% } %>
      <% if (locals.hint) { %>
        
<%= locals.hint %>
      <% } %>
    
  <% } %>