Checkbox
AtomTekil boolean seçim kontrolü. Label, hint ve disabled durumları; 3 boyut destekler.
<%- 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 _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) { %>
<% } %>
<% if (locals.hint) { %>
<%= locals.hint %>
<% } %>
<% } %>