Form
A lightweight semantic form system built with native HTML elements and CSS variables.
Ignix Lite forms provide clean layouts, validation styling, loading states, and accessible form patterns without requiring JavaScript frameworks.
Default Form
- Preview
- Code
<form>
<label>
Name
<input
type="text"
placeholder="Enter your name"
/>
</label>
<label>
Email
<input
type="email"
placeholder="you@example.com"
/>
</label>
<label>
Password
<input
type="password"
placeholder="Enter password"
/>
</label>
<button
type="submit"
data-intent="primary"
>
Submit
</button>
</form>
Loading State
- Preview
- Code
<form
aria-busy="true"
data-loading
>
<label>
Email
<input
type="email"
placeholder="you@example.com"
/>
</label>
<button
type="submit"
data-intent="primary"
>
Submitting...
</button>
</form>
Validation Error
- Preview
- Code
<form>
<label data-state="error">
Email
<input
type="email"
value="invalid-email"
aria-invalid="true"
/>
<small>
Please enter a valid email address.
</small>
</label>
</form>
Usage
- Preview
- Code
<form>
<label>
Full Name
<input
type="text"
placeholder="John Doe"
/>
</label>
<label>
Work Email
<input
type="email"
data-intent="primary"
placeholder="john@company.com"
/>
</label>
<label>
Password
<input
type="password"
placeholder="Create password"
/>
</label>
<button
type="submit"
data-intent="primary"
>
Create Account
</button>
</form>
Attributes
| Attribute | Type | Description |
|---|---|---|
data-loading | boolean | Indicates loading/submitting state |
aria-busy | boolean | Accessibility loading indicator |
data-state="error" | string | Applies validation error styles |
aria-invalid | boolean | Marks invalid form controls |
method | 'get' | 'post' | Native HTML form method |
action | string | Native form action URL |
type | Input/Button types | Native control type |
disabled | boolean | Disables interaction |
placeholder | string | Placeholder text |