The <luna-select> component provides dropdown select with single and multiple selection, icons, and grouping support.
Paths
/lunadom/components/select/select.js REQUIRED
/lunadom/components/option/option.js REQUIRED
/lunadom/components/option-group/option-group.js REQUIRED
Single Selection
📁
Graphic Design
Software Development
Digital Marketing
Legal Services (Consultation Required)
Multiple Selection
JavaScript
CSS3
HTML5
WebAssembly
Rust
With Icons & Max Visible
👤
Alex Rivera
👤
Mike Chen
👤
Jordan Smith
👤
Taylor Reed
Sizes & States
Option 1
Option 2
Production
Customization
Slots
default - <luna-option> or <luna-option-group> elements
prefix - Icon before the select
suffix - Content to display after the selected value(s) and before the chevron
Attributes
label - Label text
placeholder - Placeholder text
value - Selected value(s)
multiple - Allow multiple selections
clearable - Show clear button
size - Size (sm, md, lg)
disabled - Disable the select
help-text - Help text below select
max-options-visible - Max options to display in dropdown
placement - Where to position the dropdown (top, bottom)
value - Selected value(s)
CSS Variables
--luna-select-bg - Background color of the select control
--luna-select-border - Border color of the select control
--luna-select-color - Text color of the selected value
--luna-select-radius - Border radius of the select control
--luna-select-accent - Accent color for focus states and selected items
--luna-select-shadow - Box shadow for the dropdown panel
Events
luna-change - Emitted when the selected value(s) change
luna-clear - Emitted when the selection is cleared via the clear button
Example Code
<!-- Single Selection -->
<luna-select label="Project Category" placeholder="Select a domain">
<span slot="prefix">📁</span>
<luna-option value="design">Graphic Design</luna-option>
<luna-option value="dev">Software Development</luna-option>
<luna-option value="marketing">Digital Marketing</luna-option>
<luna-option value="legal" disabled>Legal Services</luna-option>
</luna-select>
<!-- Multiple Selection -->
<luna-select
label="Tech Stack"
multiple
clearable
placeholder="Choose technologies..."
value="javascript,css"
>
<luna-option value="javascript">JavaScript</luna-option>
<luna-option value="css">CSS3</luna-option>
<luna-option value="html">HTML5</luna-option>
</luna-select>
<!-- With Icons and Max Visible -->
<luna-select
label="Collaborators"
multiple
max-options-visible="2"
value="user1,user2,user3"
>
<luna-option value="user1">
<span slot="prefix">👤</span>
Alex Rivera
</luna-option>
<luna-option value="user2">
<span slot="prefix">👤</span>
Sarah Chen
</luna-option>
</luna-select>
<!-- Size and Disabled States -->
<luna-select
label="Small"
size="sm"
placeholder="Small"
>
<luna-option value="1">Option 1</luna-option>
</luna-select>
<luna-select
label="Disabled"
disabled
placeholder="Production"
>
<luna-option value="prod">Production</luna-option>
</luna-select>