Input

A lightweight semantic input component built with native HTML and CSS variables.

Ignix Lite inputs are fully theme-aware, accessible, and work seamlessly with native HTML forms.

---

Intent Variants

Preview

Primary

Danger

Warning

Success

Neutral

Code

<label>
  Primary
  <input
    type="text"
    data-intent="primary"
    placeholder="Primary input"
  />
</label>

<label>
  Danger
  <input
    type="text"
    data-intent="danger"
    placeholder="Danger input"
  />
</label>

<label>
  Warning
  <input
    type="text"
    data-intent="warning"
    placeholder="Warning input"
  />
</label>

<label>
  Success
  <input
    type="text"
    data-intent="success"
    placeholder="Success input"
  />
</label>

<label>
  Neutral
  <input
    type="text"
    data-intent="neutral"
    placeholder="Neutral input"
  />
</label>

---

States

Preview

Disabled

Invalid

Code

<label>
  Disabled
  <input
    type="text"
    disabled
  />
</label>

<label>
  Invalid
  <input
    type="email"
    aria-invalid="true"
  />
</label>

---

Supported Types

Preview

Text

Email

Password

Number

Search

Date

Code

<div data-layout="grid" data-min="220" data-gap="md">
  <label>
    Text
    <input type="text" />
  </label>

  <label>
    Email
    <input type="email" />
  </label>

  <label>
    Password
    <input type="password" />
  </label>

  <label>
    Number
    <input type="number" />
  </label>

  <label>
    Search
    <input type="search" />
  </label>

  <label>
    Date
    <input type="date" />
  </label>
</div>

Usage

Preview

Email Address

Password

Code

<div data-layout="stack" data-gap="md" style="max-width: 420px;">
  <label>
    Email Address
    <input
      type="email"
      data-intent="primary"
      placeholder="you@example.com"
    />
  </label>

  <label>
    Password
    <input
      type="password"
      placeholder="Enter your password"
    />
  </label>

  <button data-intent="primary">
    Sign In
  </button>
</div>

---

Attributes

Attribute	Type	Description
data-intent	'primary' | 'danger' | 'warning' | 'success' | 'neutral'	Applies semantic visual styles
disabled	boolean	Disables interaction
aria-invalid	boolean	Applies invalid/error state styling
type	HTML input types	Native input type
placeholder	string	Placeholder text
value	string	Input value
name	string	Native input name attribute