The <luna-radio-group> and <luna-radio> components provide standard radio button selections.
Paths
/lunadom/components/radio-group/radio-group.js REQUIRED
/lunadom/components/radio/radio.js REQUIRED
Basic Radio Group
Option 1
Option 2
Option 3
Different Sizes
Small
Dark Mode
Light Mode
System
Medium (Default)
Dark Mode
Light Mode
System
Large
Dark Mode
Light Mode
System
With Disabled Option
Email Notifications
SMS Notifications
Push Notifications (Coming Soon)
No Notifications
Disabled Group
Free Plan
Pro Plan
Enterprise Plan
Customization
Slots
default - List of <luna-radio> components
Attributes
value - The value of the currently selected radio button.
disabled - Whether the entire radio group is disabled.
size - The size to propagate to child radio buttons. (sm, md, lg)
required - Whether a selection is required for form validation.
Events
change - Emitted when the selected value of the group changes.
Example Code
<!-- Basic radio group -->
<luna-radio-group value="option2">
<luna-radio name="basic" value="option1">Option 1</luna-radio>
<luna-radio name="basic" value="option2">Option 2</luna-radio>
<luna-radio name="basic" value="option3">Option 3</luna-radio>
</luna-radio-group>
<!-- Different sizes -->
<luna-radio-group value="dark">
<luna-radio name="theme" value="dark" size="sm">Small</luna-radio>
<luna-radio name="theme" value="light" size="md">Medium</luna-radio>
<luna-radio name="theme" value="system" size="lg">Large</luna-radio>
</luna-radio-group>
<!-- With disabled option -->
<luna-radio-group value="email">
<luna-radio name="notify" value="email">Email</luna-radio>
<luna-radio name="notify" value="sms">SMS</luna-radio>
<luna-radio name="notify" value="push" disabled>Push (Soon)</luna-radio>
</luna-radio-group>
<!-- Disabled group -->
<luna-radio-group value="pro" disabled>
<luna-radio name="plan" value="free">Free</luna-radio>
<luna-radio name="plan" value="pro">Pro</luna-radio>
</luna-radio-group>
<!-- Listen to changes -->
<luna-radio-group id="group" value="option1">
<luna-radio name="opts" value="option1">Option 1</luna-radio>
<luna-radio name="opts" value="option2">Option 2</luna-radio>
</luna-radio-group>
<script>
const group = document.getElementById('group');
group.addEventListener('change', () => {
console.log('Selected value:', group.value);
});
</script>