Input — lunaDOM Docs

The <luna-input> component provides text inputs with multiple variants, decorators, and built-in validation support.

Paths

/lunadom/components/input/input.js

REQUIRED

Standard & Variants

Interactive Features

Decorators & Types

🔍 ⌘K

Customization

Slots
prefix - Content to display before the input text (e.g., an icon or prefix text)
suffix - Content to display after the input text (and after action buttons)

Attributes
type - The type of input (text, password, email, etc.)
placeholder - The placeholder text
value - The current value of the input
size - The size of the input (sm, md, lg)
variant - The visual variant of the input (outline, filled)
clearable - If present, shows a clear button when the input has a value
toggle - If present and type is 'password', shows a button to toggle password visibility
readonly - Whether the input is read-only
disabled - Whether the input is disabled
label - Label text to display above the input
help-text - Help text to display below the input

CSS Variables
--luna-input-bg - Background color of the input wrapper
--luna-input-border - Border color of the input wrapper
--luna-input-color - Text color of the input
--luna-input-focus - Border color when focused
--luna-input-focus-alpha - Shadow color when focused (alpha)
--luna-input-radius - Border radius of the input wrapper
--luna-input-padding - Internal padding of the input field

Events
input - Emitted when the input value changes
luna-clear - Emitted when the input is cleared via the clear button

Properties
value - The current value of the input

Example Code

<luna-input label="Standard Outline" placeholder="Enter text..."></luna-input> <luna-input label="Filled Style" variant="filled" placeholder="Filled"></luna-input> <luna-input label="Disabled" disabled value="Locked"></luna-input>  <luna-input label="Clearable" clearable value="Reset this"></luna-input> <luna-input label="Password" type="password" toggle value="secret"></luna-input> <luna-input label="Small" size="sm"></luna-input> <luna-input label="Read Only" readonly value="Fixed"></luna-input>  <luna-input label="Search" placeholder="Search..."> <span slot="prefix">🔍</span> <span slot="suffix">⌘K</span> </luna-input> <luna-input type="number" label="Quantity" value="42"></luna-input> <luna-input type="email" label="Email" placeholder="email@luna.io"></luna-input> <luna-input type="date" label="Date" help-text="Select deadline"></luna-input>