RadioGroup
Moleculefieldset + legend tabanlı radio grubu. WCAG uyumlu klavye navigasyonu, cardStyle varyantı ile görsel plan seçimi.
<%- 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' },
]
}) %>
<%- include('modules/ui/RadioGroup', {
name: 'notify',
legend: 'Notification preference',
value: 'email',
options: NOTIFY_OPTS
}) %>
<%- 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' },
]
}) %>
<%- include('modules/ui/RadioGroup', { name: 'notify', legend: 'Notification preference', value: 'email', disabled: true, options: NOTIFY_OPTS }) %>
<%
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;
%>