RadioGroup

Molecule

fieldset + legend tabanlı radio grubu. WCAG uyumlu klavye navigasyonu, cardStyle varyantı ile görsel plan seçimi.

Default

Preview

Notification preference

Sent to your primary email

SMS

None

Code

<%- include('modules/ui/RadioGroup', {
  name: 'notify',
  legend: 'Notification preference',
  options: [
    { value: 'email', label: 'Email', hint: 'Sent to your primary email' },
    { value: 'sms',   label: 'SMS' },
    { value: 'none',  label: 'None' },
  ]
}) %>

With selected value

Preview

Notification preference

Sent to your primary email

SMS

None

Code

<%- include('modules/ui/RadioGroup', {
  name: 'notify',
  legend: 'Notification preference',
  value: 'email',
  options: NOTIFY_OPTS
}) %>

Card style

Preview

Choose plan

Free

$0/mo · 3 projects, 1 seat

Pro

$12/mo · Unlimited projects

Team

$49/mo · 10 seats included

Code

<%- include('modules/ui/RadioGroup', {
  name: 'plan',
  legend: 'Choose plan',
  value: 'pro',
  cardStyle: true,
  options: [
    { value: 'free', label: 'Free', hint: '$0/mo · 3 projects' },
    { value: 'pro',  label: 'Pro',  hint: '$12/mo · Unlimited'  },
    { value: 'team', label: 'Team', hint: '$49/mo · 10 seats'   },
  ]
}) %>

Disabled

Preview

Notification preference

Sent to your primary email

SMS

Code

<%- include('modules/ui/RadioGroup', { name: 'notify', legend: 'Notification preference', value: 'email', disabled: true, options: NOTIFY_OPTS }) %>

Source modules/ui/RadioGroup.ejs

<%
  var _name    = locals.name    || 'radio-' + Math.random().toString(36).substr(2, 9);
  var _opts    = locals.options || [];
  var _val     = locals.value   || '';
  var _dis     = !!locals.disabled;
  var _cardStyle = !!locals.cardStyle;
%>

  <% if (locals.legend) { %>
    <%= locals.legend %>
  <% } %>
  
    <% _opts.forEach(function(opt) { %>
      <% if (_cardStyle) { %>
        
          
            <%= _dis ? 'disabled' : '' %>
          >
          
            <%= opt.label %>
            <% if (opt.hint) { %><%= opt.hint %><% } %>
          
        
      <% } else { %>
        
          
            <%= _dis ? 'disabled' : '' %>
          >
          
            <%= opt.label %>
            <% if (opt.hint) { %><%= opt.hint %><% } %>
          
        
      <% } %>
    <% }); %>
  
  <% if (locals.error) { %>
    <%= locals.error %>
  <% } %>