Checkbox
AtomTekil boolean seçim kontrolü. Hint, error ve disabled durumları yerleşiktir.
<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Accept terms' }) %>
<%- 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
<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Accept terms', error: 'You must accept the terms' }) %>
<%- include('modules/ui/Checkbox', { id: 'cb1', label: 'Option A', disabled: true }) %>
<%- include('modules/ui/Checkbox', { id: 'cb2', label: 'Option B', checked: true, disabled: true }) %>
<%
var _id = locals.id || 'checkbox';
var _label = locals.label || '';
var _hint = locals.hint || null;
var _error = locals.error || null;
var _checked = locals.checked || false;
var _disabled = locals.disabled || false;
var hintId = _hint ? _id + '-hint' : null;
var errorId = _error ? _id + '-error' : null;
var describedBy = [hintId, errorId].filter(Boolean).join(' ') || null;
%>
checked<% } %>
<% if (_disabled) { %>disabled<% } %>
<% if (describedBy) { %>aria-describedby="<%= describedBy %>"<% } %>
aria-invalid="<%= !!_error %>"
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 (_hint && !_error) { %>
<%= _hint %>
<% } %>
<% if (_error) { %>
<%= _error %>
<% } %>