Checkbox

Atom

Tekil boolean seçim kontrolü. Hint, error ve disabled durumları yerleşiktir.

Default

Preview

Accept terms

Code

<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Accept terms' }) %>

Checked

Preview

Remember me

Code

<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Remember me', checked: true }) %>

With hint

Preview

Subscribe to newsletter

We send at most one email per week

Code

<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Subscribe to newsletter', hint: 'We send at most one email per week' }) %>

Error state

Preview

Accept terms

You must accept the terms

Code

<%- include('modules/ui/Checkbox', { id: 'cb', label: 'Accept terms', error: 'You must accept the terms' }) %>

Disabled

Preview

Option A (disabled)

Option B (disabled, checked)

Code

<%- include('modules/ui/Checkbox', { id: 'cb1', label: 'Option A', disabled: true }) %>
<%- include('modules/ui/Checkbox', { id: 'cb2', label: 'Option B', checked: true, disabled: true }) %>

Source modules/ui/Checkbox.ejs

<%
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' : '' %>"
  />
  
    
      <%= _label %>
    
    <% if (_hint && !_error) { %>
      <%= _hint %>
    <% } %>
    <% if (_error) { %>
      <%= _error %>
    <% } %>