CheckboxGroup

Molecule

Chip görünümlü çoklu seçim grubu. Seçili chip bg-primary-subtle / border-primary renk tokenları ile işaretlenir.

Default

Preview

Tech stack

React Vue Angular TypeScript Node.js

Code

<%- include('modules/ui/CheckboxGroup', {
  legend: 'Tech stack',
  options: [
    { value: 'react',      label: 'React'      },
    { value: 'vue',        label: 'Vue'        },
    { value: 'typescript', label: 'TypeScript' },
  ],
  selected: ['react', 'typescript']
}) %>

Disabled

Preview

Permissions

Read Write Delete

Code

<%- include('modules/ui/CheckboxGroup', {
  legend: 'Permissions',
  options: [
    { value: 'read',   label: 'Read'   },
    { value: 'write',  label: 'Write'  },
    { value: 'delete', label: 'Delete' },
  ],
  selected: ['read'],
  disabled: true
}) %>

Empty selection

Preview

Tags

Design Frontend Backend DevOps

Code

<%- include('modules/ui/CheckboxGroup', {
  legend: 'Tags',
  options: [
    { value: 'design',   label: 'Design'   },
    { value: 'frontend', label: 'Frontend' },
    { value: 'backend',  label: 'Backend'  },
  ],
  selected: []
}) %>

Source modules/ui/CheckboxGroup.ejs

<%
  var _opts    = locals.options  || [];
  var _sel     = locals.selected || [];
  var _dis     = !!locals.disabled;
%>

  <% if (locals.legend) { %>
    <%= locals.legend %>
  <% } %>
  
    <% _opts.forEach(function(opt) { %>
      <%
        var isSelected = _sel.indexOf(opt.value) !== -1 || _sel.indexOf(opt) !== -1;
      %>
      
        
          <%= _dis ? 'disabled' : '' %>
        >
        <% if (isSelected) { %>
          
        <% } %>
        <%= opt.label || opt %>
      
    <% }); %>
  
  <% if (locals.error) { %>
    <%= locals.error %>
  <% } %>