The <luna-radio-button> component provides button-style radio selections with icon support.
Paths
/lunadom/components/radio-button/radio-button.js REQUIRED
/lunadom/components/radio/radio.js REQUIRED
Basic Button Group
List View
Grid View
Card View
With Prefix Icons
🌞 Light
🌙 Dark
✨ Auto
Pill Style
Beginner
Intermediate
Advanced
Different Sizes
Small
Red
Green
Blue
Medium (Default)
Red
Green
Blue
Large
Red
Green
Blue
With Disabled Option
0.5x
1x
1.5x
2x (Pro)
Vertical Layout
📦 Standard Shipping
⚡ Express Shipping
🚀 Overnight
Customization
Slots
default - Primary label of the button
prefix - Content to display before the label (e.g., an icon)
suffix - Content to display after the label (e.g., a badge)
Attributes
checked - Whether the radio button is selected.
disabled - Whether the radio button is disabled.
size - The size of the button. (sm, md, lg)
pill - If present, the button will have a pill shape.
name - The name of the radio group this button belongs to.
value - The value associated with this radio button.
CSS Variables
--luna-surface - Background color of the button in its normal state.
--luna-surface-hover - Background color when the button is hovered.
--luna-accent - Background color when the button is checked.
--luna-text - Main text color of the button.
--luna-border - Border color of the button.
--luna-focus - Focus ring color.
Events
luna-change - Emitted when the radio button is selected.
Example Code
<!-- Basic button group -->
<luna-radio-group value="grid">
<luna-radio-button name="view" value="list">List</luna-radio-button>
<luna-radio-button name="view" value="grid">Grid</luna-radio-button>
<luna-radio-button name="view" value="card">Card</luna-radio-button>
</luna-radio-group>
<!-- With prefix icons -->
<luna-radio-group value="light">
<luna-radio-button name="theme" value="light">
<span slot="prefix">🌞</span> Light
</luna-radio-button>
<luna-radio-button name="theme" value="dark">
<span slot="prefix">🌙</span> Dark
</luna-radio-button>
</luna-radio-group>
<!-- Pill style -->
<luna-radio-group value="beginner">
<luna-radio-button name="level" value="beginner" pill>Beginner</luna-radio-button>
<luna-radio-button name="level" value="intermediate" pill>Intermediate</luna-radio-button>
</luna-radio-group>
<!-- Different sizes -->
<luna-radio-group value="red">
<luna-radio-button name="color" value="red" size="sm">Small</luna-radio-button>
<luna-radio-button name="color" value="green" size="md">Medium</luna-radio-button>
<luna-radio-button name="color" value="blue" size="lg">Large</luna-radio-button>
</luna-radio-group>
<!-- With disabled option -->
<luna-radio-group value="1x">
<luna-radio-button name="speed" value="1x">1x</luna-radio-button>
<luna-radio-button name="speed" value="2x" disabled>2x (Pro)</luna-radio-button>
</luna-radio-group>
<!-- Vertical layout -->
<luna-radio-group value="standard" style="display: flex; flex-direction: column;">
<luna-radio-button name="shipping" value="standard">Standard</luna-radio-button>
<luna-radio-button name="shipping" value="express">Express</luna-radio-button>
</luna-radio-group>
<!-- Listen to changes -->
<luna-radio-group id="group" value="option1">
<luna-radio-button name="opts" value="option1">Option 1</luna-radio-button>
<luna-radio-button name="opts" value="option2">Option 2</luna-radio-button>
</luna-radio-group>
<script>
const group = document.getElementById('group');
group.addEventListener('change', () => {
console.log('Selected value:', group.value);
});
</script>