Checkbox
AtomLabel + checkbox + optional hint / error message. aria-describedby is wired up and border-error is applied on the error state.
<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Accept terms and conditions' }) %><%- include('modules/ui/Checkbox', { id: 'cb', label: 'Remember me', checked: true }) %>We send at most one email per week
<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Subscribe to newsletter', hint: 'We send at most one email per week' }) %>You must accept the terms to continue
<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Accept terms', hint: 'You must accept the terms', error: true }) %><%- include('modules/ui/Checkbox', { id: 'cb1', label: 'Option A', disabled: true }) %>
<%- include('modules/ui/Checkbox', { id: 'cb2', label: 'Option B', checked: true, disabled: true }) %><%- include('modules/ui/Checkbox', { id: 'cb1', label: 'Small', size: 'sm', checked: true }) %>
<%- include('modules/ui/Checkbox', { id: 'cb2', label: 'Medium', size: 'md', checked: true }) %>
<%- include('modules/ui/Checkbox', { id: 'cb3', label: 'Large', size: 'lg', checked: true }) %><%
var _ch = locals.checked ? 'checked' : '';
var _dis = locals.disabled ? 'disabled' : '';
var _id = locals.id || 'checkbox-' + Math.random().toString(36).substr(2, 9);
var _error = locals.error || '';
var _hint = locals.hint || '';
var _label = locals.label || '';
var _indet = !!locals.indeterminate;
var hintId = _hint ? (_id + '-hint') : '';
var errorId = _error ? (_id + '-error') : '';
var describedBy = [hintId, errorId].filter(Boolean).join(' ');
%>
<%= _dis %>
class="mt-0.5 h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed <%= _error ? 'border-error' : '' %>"
<% if (describedBy) { %>aria-describedby="<%= describedBy %>"<% } %>
<% if (_error) { %>aria-invalid="true"<% } %>
<% if (_indet) { %>aria-checked="mixed"<% } %>
<% if(locals.onchange) { %>onchange="<%= locals.onchange %>"<% } %>
>
<% if (_label) { %>
<% } %>
<% if (_hint && !_error) { %>
<%= _hint %>
<% } %>
<% if (_error) { %>
<%= _error %>
<% } %>