Input

The Input component provides a styled text input with support for validation, labels, and helper text.

Installation

npm install @duskmoon-dev/el-input

import '@duskmoon-dev/el-input/register';

<el-dm-input label="Email" placeholder="Enter your email"></el-dm-input>

Property	Type	Default	Description
`value`	`string`	`''`	Input value
`label`	`string`	`''`	Label text
`placeholder`	`string`	`''`	Placeholder text
`type`	`'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url'`	`'text'`	Input type
`disabled`	`boolean`	`false`	Disables the input
`readonly`	`boolean`	`false`	Makes input read-only
`required`	`boolean`	`false`	Marks as required
`error`	`string`	`''`	Error message to display
`helper`	`string`	`''`	Helper text below input

<el-dm-input label="Username" placeholder="Enter username"></el-dm-input>

<el-dm-input
  label="Password"
  type="password"
  helper="Must be at least 8 characters"
></el-dm-input>

<el-dm-input
  label="Email"
  type="email"
  value="invalid-email"
  error="Please enter a valid email address"
></el-dm-input>

<el-dm-input type="text" label="Name"></el-dm-input>

<el-dm-input type="email" label="Email"></el-dm-input>

<el-dm-input type="password" label="Password"></el-dm-input>

<el-dm-input type="number" label="Quantity"></el-dm-input>

<el-dm-input label="Disabled" disabled value="Cannot edit"></el-dm-input>

<el-dm-input label="Read-only" readonly value="View only"></el-dm-input>

<el-dm-input label="Required Field" required></el-dm-input>

Event	Description
`input`	Fired when the value changes
`change`	Fired when the value changes and input loses focus
`focus`	Fired when the input receives focus
`blur`	Fired when the input loses focus

const input = document.querySelector('el-dm-input');
input.addEventListener('input', (event) => {
  console.log('Value:', event.target.value);
});