lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
666 lines (619 loc) • 32.1 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Radio' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Radio</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Radio buttons allow the user to select one option from a set.
Use RadioGroup for a complete set with validation support.
</p>
<!-- Basic Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic RadioGroup</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Radio group with label and
options</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object', 'html'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('object')">Object
DOM</button>
<button id="tab-btn-html" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('html')">HTML</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 420,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-input/radio.js');
const { tags, $ } = Lightview;
const { div, RadioGroup } = tags;
// 1. Basic radio group
const basic = RadioGroup({
label: 'Favorite Color',
name: 'color',
options: ['Red', 'Blue', 'Green', 'Yellow'],
color: 'primary'
});
// 2. With descriptions
const withDesc = RadioGroup({
label: 'Subscription Plan',
name: 'plan',
options: [
{ value: 'free', label: 'Free', description: 'Basic features, limited usage' },
{ value: 'pro', label: 'Pro', description: '$9/month, all features' },
{ value: 'enterprise', label: 'Enterprise', description: 'Custom pricing, priority support' }
],
color: 'secondary'
});
// 3. Horizontal layout
const horizontal = RadioGroup({
label: 'Size',
name: 'size',
options: ['S', 'M', 'L', 'XL'],
horizontal: true,
color: 'accent'
});
// Insert all examples
$('#example').content(
div({ style: 'display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem;' }, basic, withDesc, horizontal)
);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 420
});
</script><code contenteditable="true">await import('/components/data-input/radio.js');
const { $, tags } = Lightview;
const { RadioGroup, div } = tags;
const basic = {
tag: RadioGroup,
attributes: {
label: 'Favorite Color',
name: 'color',
options: ['Red', 'Blue', 'Green', 'Yellow'],
color: 'primary'
}
};
const withDesc = {
tag: RadioGroup,
attributes: {
label: 'Subscription Plan',
name: 'plan',
options: [
{ value: 'free', label: 'Free', description: 'Basic features, limited usage' },
{ value: 'pro', label: 'Pro', description: '$9/month, all features' },
{ value: 'enterprise', label: 'Enterprise', description: 'Custom pricing, priority support' }
],
color: 'secondary'
}
};
const horizontal = {
tag: RadioGroup,
attributes: {
label: 'Size',
name: 'size',
options: ['S', 'M', 'L', 'XL'],
horizontal: true,
color: 'accent'
}
};
$('#example').content({
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem;' },
children: [basic, withDesc, horizontal]
});</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 420
});
</script><code contenteditable="true">await import('/components/data-input/radio.js');
const { $ } = Lightview;
$('#example').content({
div: {
style: 'display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem;',
children: [
{
RadioGroup: {
label: 'Favorite Color',
name: 'color',
options: ['Red', 'Blue', 'Green', 'Yellow'],
color: 'primary'
}
},
{
RadioGroup: {
label: 'Subscription Plan',
name: 'plan',
options: [
{ value: 'free', label: 'Free', description: 'Basic features, limited usage' },
{ value: 'pro', label: 'Pro', description: '$9/month, all features' },
{ value: 'enterprise', label: 'Enterprise', description: 'Custom pricing, priority support' }
],
color: 'secondary'
}
},
{
RadioGroup: {
label: 'Size',
name: 'size',
options: ['S', 'M', 'L', 'XL'],
horizontal: true,
color: 'accent'
}
}
]
}
});</code></pre>
</div>
<!-- HTML Syntax -->
<div id="syntax-html" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
language: 'html',
minHeight: 420
});
</script><code contenteditable="true" class="language-html">
<div style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem;">
<lv-radio-group
label="Favorite Color"
name="color-html"
options='["Red", "Blue", "Green", "Yellow"]'
color="primary">
</lv-radio-group>
<lv-radio-group
label="Subscription Plan"
name="plan-html"
options='[{"value":"free","label":"Free","description":"Basic features, limited usage"},{"value":"pro","label":"Pro","description":"$9/month, all features"},{"value":"enterprise","label":"Enterprise","description":"Custom pricing, priority support"}]'
color="secondary">
</lv-radio-group>
<lv-radio-group
label="Size"
name="size-html"
options='["S", "M", "L", "XL"]'
horizontal
color="accent">
</lv-radio-group>
</div></code></pre>
</div>
</div>
</div>
<!-- Reactive Example with Examplify -->
<div
style="background-color: hsl(var(--b2)); border-radius: var(--rounded-box, 1rem); padding: 2rem; margin-bottom: 2rem;">
<h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;">Reactive Example</h2>
<p style="font-size: 0.875rem; opacity: 0.7; margin-bottom: 1rem;">Two-way binding with signals
and
validation</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
const contentEl = document.getElementById(`reactive-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="reactive-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 260
});
</script><code contenteditable="true">await import('/components/data-input/radio.js');
const { signal, tags, $ } = Lightview;
const { div, p, span, RadioGroup } = tags;
// Signal for selected value
const selectedPriority = signal('');
// Priority descriptions
const priorityInfo = {
low: { emoji: '🟢', text: 'Can wait, no rush' },
medium: { emoji: '🟡', text: 'Should be addressed soon' },
high: { emoji: '🟠', text: 'Needs attention today' },
critical: { emoji: '🔴', text: 'Drop everything and fix now!' }
};
// Reactive radio group
const reactiveDemo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;' },
RadioGroup({
label: 'Issue Priority',
name: 'priority',
value: selectedPriority,
options: [
{ value: 'low', label: 'Low' },
{ value: 'medium', label: 'Medium' },
{ value: 'high', label: 'High' },
{ value: 'critical', label: 'Critical' }
],
required: true,
color: 'primary'
}),
p({ style: 'font-size: 1.125rem;' },
() => {
const priority = selectedPriority.value;
if (!priority) return span({ style: 'opacity: 0.5;' }, 'Select a priority level');
const info = priorityInfo[priority];
return span({}, info.emoji, ' ', info.text);
}
)
);
$('#example').content(reactiveDemo);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="reactive-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 260
});
</script><code contenteditable="true">await import('/components/data-input/radio.js');
const { signal, $, tags } = Lightview;
const { RadioGroup, div, p, span } = tags;
const selectedPriority = signal('');
const priorityInfo = {
low: { emoji: '🟢', text: 'Can wait, no rush' },
medium: { emoji: '🟡', text: 'Should be addressed soon' },
high: { emoji: '🟠', text: 'Needs attention today' },
critical: { emoji: '🔴', text: 'Drop everything and fix now!' }
};
const reactiveDemo = {
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;' },
children: [
{
tag: RadioGroup,
attributes: {
label: 'Issue Priority',
name: 'priority',
value: selectedPriority,
options: [
{ value: 'low', label: 'Low' },
{ value: 'medium', label: 'Medium' },
{ value: 'high', label: 'High' },
{ value: 'critical', label: 'Critical' }
],
required: true,
color: 'primary'
}
},
{
tag: p,
attributes: { style: 'font-size: 1.125rem;' },
children: [
() => {
const priority = selectedPriority.value;
if (!priority) return { tag: span, attributes: { style: 'opacity: 0.5;' }, children: ['Select a priority level'] };
const info = priorityInfo[priority];
return { tag: span, children: [info.emoji, ' ', info.text] };
}
]
}
]
};
$('#example').content(reactiveDemo);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="reactive-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 260
});
</script><code contenteditable="true">await import('/components/data-input/radio.js');
const { signal, $ } = Lightview;
const selectedPriority = signal('');
const priorityInfo = {
low: { emoji: '🟢', text: 'Can wait, no rush' },
medium: { emoji: '🟡', text: 'Should be addressed soon' },
high: { emoji: '🟠', text: 'Needs attention today' },
critical: { emoji: '🔴', text: 'Drop everything and fix now!' }
};
const reactiveDemo = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;',
children: [
{
RadioGroup: {
label: 'Issue Priority',
name: 'priority',
value: selectedPriority,
options: [
{ value: 'low', label: 'Low' },
{ value: 'medium', label: 'Medium' },
{ value: 'high', label: 'High' },
{ value: 'critical', label: 'Critical' }
],
required: true,
color: 'primary'
}
},
{
p: {
style: 'font-size: 1.125rem;',
children: [
() => {
const priority = selectedPriority.value;
if (!priority) return { span: { style: 'opacity: 0.5;', children: ['Select a priority level'] } };
const info = priorityInfo[priority];
return { span: { children: [info.emoji, ' ', info.text] } };
}
]
}
}
]
}
};
$('#example').content(reactiveDemo);</code></pre>
</div>
</div>
</div>
<!-- Props Table - RadioGroup -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">RadioGroup Props</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>options</code></td>
<td>array</td>
<td>[]</td>
<td>Array of strings or objects <code>{value, label, description, disabled}</code>
</td>
</tr>
<tr>
<td><code>value</code></td>
<td>* | signal</td>
<td>-</td>
<td>Selected value (reactive with signals)</td>
</tr>
<tr>
<td><code>defaultValue</code></td>
<td>*</td>
<td>null</td>
<td>Default value for uncontrolled mode</td>
</tr>
<tr>
<td><code>name</code></td>
<td>string</td>
<td>auto</td>
<td>Radio group name for form submission</td>
</tr>
<tr>
<td><code>label</code></td>
<td>string</td>
<td>-</td>
<td>Group label displayed above options</td>
</tr>
<tr>
<td><code>helper</code></td>
<td>string</td>
<td>-</td>
<td>Helper text displayed below options</td>
</tr>
<tr>
<td><code>error</code></td>
<td>string | function</td>
<td>-</td>
<td>Error message or reactive error function</td>
</tr>
<tr>
<td><code>validate</code></td>
<td>function</td>
<td>-</td>
<td>Validation function: <code>(value) => errorMessage | null</code></td>
</tr>
<tr>
<td><code>color</code></td>
<td>string</td>
<td>-</td>
<td>'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
</td>
</tr>
<tr>
<td><code>size</code></td>
<td>string</td>
<td>'md'</td>
<td>'xs' | 'sm' | 'md' | 'lg'</td>
</tr>
<tr>
<td><code>horizontal</code></td>
<td>boolean</td>
<td>false</td>
<td>Arrange options horizontally</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td>boolean</td>
<td>false</td>
<td>Disable all options</td>
</tr>
<tr>
<td><code>required</code></td>
<td>boolean</td>
<td>false</td>
<td>Mark as required field</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td>function</td>
<td>-</td>
<td>Callback when value changes: <code>(value) => void</code></td>
</tr>
<tr>
<td><code>useShadow</code></td>
<td>boolean</td>
<td>*</td>
<td>Render in Shadow DOM</td>
</tr>
</tbody>
</table>
</div>
<!-- Custom Element Gallery -->
<h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Radio Gallery</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
Live examples using <code><lv-radio></code> and <code><lv-radio-group></code> custom
elements.
</p>
<script type="module" src="/components/data-input/radio.js"></script>
<!-- Colors -->
<h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Colors</h3>
<div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
<lv-radio label="Default" checked name="color-gallery"></lv-radio>
<lv-radio label="Primary" color="primary" checked name="color-gallery-1"></lv-radio>
<lv-radio label="Secondary" color="secondary" checked name="color-gallery-2"></lv-radio>
<lv-radio label="Accent" color="accent" checked name="color-gallery-3"></lv-radio>
<lv-radio label="Success" color="success" checked name="color-gallery-4"></lv-radio>
<lv-radio label="Warning" color="warning" checked name="color-gallery-5"></lv-radio>
<lv-radio label="Info" color="info" checked name="color-gallery-6"></lv-radio>
<lv-radio label="Error" color="error" checked name="color-gallery-7"></lv-radio>
</div>
<!-- Sizes -->
<h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem;">
<lv-radio size="xs" label="Extra Small" checked name="size-gallery-1"></lv-radio>
<lv-radio size="sm" label="Small" checked name="size-gallery-2"></lv-radio>
<lv-radio size="md" label="Medium" checked name="size-gallery-3"></lv-radio>
<lv-radio size="lg" label="Large" checked name="size-gallery-4"></lv-radio>
</div>
<!-- Radio Groups -->
<h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Radio Groups</h3>
<div style="display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem; max-width: 28rem;">
<lv-radio-group label="Vertical Group (Default)" name="vertical-gallery"
options='["Option 1", "Option 2", "Option 3"]' color="primary">
</lv-radio-group>
<lv-radio-group label="Horizontal Group" name="horizontal-gallery" horizontal="true"
options='["Small", "Medium", "Large"]' color="secondary">
</lv-radio-group>
<lv-radio-group label="With Descriptions" name="desc-gallery"
options='[{"value":"standard","label":"Standard","description":"Ships in 3-5 days"},{"value":"express","label":"Express","description":"Ships in 1-2 days"}]'
color="accent">
</lv-radio-group>
</div>
</div>
</div>
</div>
</div>