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

Name

Email

Password

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

Email

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

Email

Please enter a valid email address.

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

Full Name

Work Email

Password

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