A text input component with label and validation states.
Installation
bun add @duskmoon-dev/el-input
Usage
Auto-Register (Recommended)
The simplest way to use the component - just import and it's ready:
<!-- Via CDN -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-input/register"></script>
<!-- Now use the element -->
<el-dm-input label="Username" placeholder="Enter username"></el-dm-input>
<el-dm-input label="Email" type="email" required></el-dm-input>
<el-dm-input
label="Password"
type="password"
validation-state="invalid"
error-message="Password is required"
></el-dm-input>
Or with a bundler:
import '@duskmoon-dev/el-input/register';
Manual Registration
<script type="module">
import { register } from '@duskmoon-dev/el-input';
register();
</script>
<el-dm-input label="Username" placeholder="Enter username"></el-dm-input>
| Type | Description |
|---|
text | Standard text input (default) |
password | Password input |
email | Email input |
number | Number input |
tel | Telephone input |
url | URL input |
search | Search input |
Sizes
| Size | Description |
|---|
sm | Small |
md | Medium (default) |
lg | Large |
Validation States
| State | Description |
|---|
valid | Input is valid (green border) |
invalid | Input is invalid (red border, shows error) |
pending | Validation in progress (shows spinner) |
Attributes
| Attribute | Type | Default | Description |
|---|
type | string | text | Input type |
value | string | '' | Current value |
name | string | | Form field name |
label | string | | Label text |
placeholder | string | | Placeholder text |
disabled | boolean | false | Disable input |
readonly | boolean | false | Make readonly |
required | boolean | false | Mark as required |
size | string | md | Input size |
validation-state | string | | Validation state |
error-message | string | | Error message |
helper-text | string | | Helper text |
Slots
| Slot | Description |
|---|
prefix | Content before input |
suffix | Content after input |
CSS Parts
| Part | Description |
|---|
container | Outer container |
label | Label element |
input-wrapper | Wrapper around input |
input | Native input element |
prefix | Prefix slot wrapper |
suffix | Suffix slot wrapper |
helper | Helper text element |
error | Error message element |
Events
| Event | Detail | Description |
|---|
dm-input | { value: string } | Fired on input |
dm-change | { value: string } | Fired on change |
dm-focus | | Fired on focus |
dm-blur | | Fired on blur |
CSS Custom Properties
| Property | Description |
|---|
--dm-input-height | Input height |
--dm-input-padding-x | Horizontal padding |
--dm-input-font-size | Font size |
--dm-input-border-radius | Border radius |
--dm-input-border-color | Border color |
--dm-input-focus-border-color | Focus border color |
Examples
With Icons
<el-dm-input label="Search" type="search">
<span slot="prefix">🔍</span>
</el-dm-input>
With Validation
<el-dm-input
label="Email"
type="email"
validation-state="invalid"
error-message="Please enter a valid email address"
></el-dm-input>
With Helper Text
<el-dm-input
label="Password"
type="password"
helper-text="Must be at least 8 characters"
></el-dm-input>
License
MIT