Form

The Form component provides a wrapper for form controls with consistent styling and validation states.

Installation

npm install @duskmoon-dev/el-form

Usage

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

<el-dm-form>
  <el-dm-input label="Username" placeholder="Enter username"></el-dm-input>
  <el-dm-button type="submit">Submit</el-dm-button>
</el-dm-form>

Live Demo

Basic Form

Submit

Properties

Property	Type	Default	Description
`validation-state`	`'default' \| 'error' \| 'success'`	`'default'`	Validation state of the form
`gap`	`string`	`'1rem'`	Gap between form fields (any CSS length)
`disabled`	`boolean`	`false`	Disables the entire form

Validation States

<el-dm-form validation-state="default">...</el-dm-form>
<el-dm-form validation-state="error">...</el-dm-form>
<el-dm-form validation-state="success">...</el-dm-form>

Disabled Form

Submit

<el-dm-form disabled>
  <el-dm-input label="Disabled Input" placeholder="Cannot edit"></el-dm-input>
  <el-dm-button type="submit" disabled>Submit</el-dm-button>
</el-dm-form>

Gap

Control the spacing between form fields with the gap attribute.

Compact Gap (0.5rem)

Submit

Default Gap (1rem)

Submit

Spacious Gap (2rem)

Submit

<el-dm-form gap="0.5rem">...</el-dm-form>
<el-dm-form gap="1rem">...</el-dm-form>
<el-dm-form gap="2rem">...</el-dm-form>

Events

Event	Description
`submit`	Fired when the form is submitted
`reset`	Fired when the form is reset

Event Handling

const form = document.querySelector('el-dm-form');
form.addEventListener('submit', (event) => {
  console.log('Form submitted:', event.detail);
});

Methods

Method	Description
`submit()`	Submit the form programmatically
`reset()`	Reset the form programmatically

CSS Parts

Part	Description
`form`	The form container

Accessibility

Uses native <form> element for proper semantics
Form controls receive proper disabled state
Supports keyboard navigation and submission