Feature: HTMX support and a nifty Form Builder

README.md

@@ -293,6 +293,54 @@ def table_rows(items):
     ])
 ```
 
+### Form Builder
+
+Generate HTML5 forms with validation using the `Field` class:
+
+```python
+from nitro_ui import *
+
+form = Form(
+    Field.email("email", label="Email", required=True),
+    Field.password("password", label="Password", min_length=8),
+    Field.select("country", ["USA", "Canada", "Mexico"], label="Country"),
+    Field.checkbox("terms", label="I agree to the Terms", required=True),
+    Button("Sign Up", type="submit"),
+    action="/register"
+)
+```
+
+Field types: `text`, `email`, `password`, `url`, `tel`, `search`, `textarea`, `number`, `range`, `date`, `time`, `datetime_local`, `select`, `checkbox`, `radio`, `file`, `hidden`, `color`. See [SKILL.md](SKILL.md) for full API.
+
+### HTMX Integration
+
+Build interactive UIs without JavaScript. NitroUI converts `hx_*` kwargs to `hx-*` attributes automatically:
+
+```python
+from nitro_ui import *
+
+# Live search
+Input(
+    type="text",
+    hx_get="/search",
+    hx_trigger="keyup changed delay:300ms",
+    hx_target="#results"
+)
+
+# Delete with confirmation
+Button(
+    "Delete",
+    hx_delete="/items/1",
+    hx_confirm="Are you sure?",
+    hx_swap="outerHTML"
+)
+
+# Load more
+Button("Load More", hx_get="/items?page=2", hx_target="#list", hx_swap="beforeend")
+```
+
+All HTMX attributes are supported: `hx_get`, `hx_post`, `hx_put`, `hx_delete`, `hx_target`, `hx_swap`, `hx_trigger`, `hx_confirm`, `hx_indicator`, `hx_boost`, and more. See [SKILL.md](SKILL.md) for the complete reference.
+
 ### Raw HTML Partials
 
 Embed raw HTML for trusted content like analytics tags:

SKILL.md

@@ -805,6 +805,195 @@ def home(request):
 
 ---
 
+## Form Builder
+
+Generate HTML5 form fields with validation attributes using the `Field` class.
+
+```python
+from nitro_ui import Form, Button, Field
+
+form = Form(
+    Field.email("email", label="Email", required=True, placeholder="you@example.com"),
+    Field.password("password", label="Password", min_length=8),
+    Field.checkbox("remember", label="Remember me"),
+    Button("Log In", type="submit"),
+    action="/login",
+    method="post"
+)
+```
+
+### Text Fields
+
+```python
+Field.text(name, label=None, required=False, min_length=None, max_length=None, pattern=None, placeholder=None, value=None, wrapper=None, **attrs)
+Field.email(name, label=None, required=False, placeholder=None, value=None, wrapper=None, **attrs)
+Field.password(name, label=None, required=False, min_length=None, max_length=None, placeholder=None, wrapper=None, **attrs)
+Field.url(name, label=None, required=False, placeholder=None, value=None, wrapper=None, **attrs)
+Field.tel(name, label=None, required=False, pattern=None, placeholder=None, value=None, wrapper=None, **attrs)
+Field.search(name, label=None, required=False, placeholder=None, value=None, wrapper=None, **attrs)
+Field.textarea(name, label=None, required=False, rows=None, cols=None, min_length=None, max_length=None, placeholder=None, value=None, wrapper=None, **attrs)
+```
+
+### Numeric & Date Fields
+
+```python
+Field.number(name, label=None, required=False, min=None, max=None, step=None, value=None, wrapper=None, **attrs)
+Field.range(name, label=None, min=0, max=100, step=None, value=None, wrapper=None, **attrs)
+Field.date(name, label=None, required=False, min=None, max=None, value=None, wrapper=None, **attrs)
+Field.time(name, label=None, required=False, min=None, max=None, value=None, wrapper=None, **attrs)
+Field.datetime_local(name, label=None, required=False, min=None, max=None, value=None, wrapper=None, **attrs)
+```
+
+### Selection Fields
+
+```python
+# Select with different option formats
+Field.select("country", ["USA", "Canada", "Mexico"])  # strings
+Field.select("status", [("active", "Active"), ("inactive", "Inactive")])  # tuples
+Field.select("priority", [{"value": "1", "label": "Low", "disabled": True}])  # dicts
+
+# Pre-selected value
+Field.select("country", ["USA", "Canada"], value="Canada", label="Country")
+
+# Checkbox (label wraps input)
+Field.checkbox("terms", label="I agree to the Terms", required=True)
+
+# Radio buttons (wrapped in fieldset)
+Field.radio("plan", [("free", "Free"), ("pro", "Pro")], label="Select Plan", value="free")
+```
+
+### Other Fields
+
+```python
+Field.file(name, label=None, required=False, accept=None, multiple=False, wrapper=None, **attrs)
+Field.hidden(name, value, **attrs)
+Field.color(name, label=None, value=None, wrapper=None, **attrs)
+```
+
+### Labels and Wrappers
+
+```python
+# No label - just input
+Field.text("username")
+
+# With label
+Field.text("username", label="Username")
+# → <label for="username">Username</label><input ...>
+
+# With wrapper div
+Field.text("username", label="Username", wrapper="form-field")
+# → <div class="form-field"><label>...</label><input ...></div>
+
+# Wrapper with attributes
+Field.text("username", label="Username", wrapper={"cls": "form-group", "id": "field-1"})
+```
+
+### With HTMX
+
+```python
+Field.text("search",
+    placeholder="Search...",
+    hx_get="/search",
+    hx_trigger="keyup changed delay:300ms",
+    hx_target="#results"
+)
+```
+
+---
+
+## HTMX Integration
+
+NitroUI works seamlessly with [HTMX](https://htmx.org/). Use `hx_*` kwargs — underscores convert to hyphens automatically.
+
+### Basic Usage
+
+```python
+from nitro_ui import Button, Div, Input, Script
+
+# Include HTMX
+Script(src="https://unpkg.com/htmx.org@2.0.4")
+
+# hx_get → hx-get, hx_target → hx-target, etc.
+Button("Load More", hx_get="/items", hx_target="#list", hx_swap="beforeend")
+```
+
+### Common Patterns
+
+```python
+# Click to load
+Button("Load", hx_get="/content", hx_target="#result")
+
+# Delete with confirmation
+Button("Delete", hx_delete="/items/1", hx_confirm="Are you sure?", hx_swap="outerHTML")
+
+# Live search
+Input(
+    type="text",
+    name="q",
+    hx_get="/search",
+    hx_trigger="keyup changed delay:300ms",
+    hx_target="#results"
+)
+
+# Form submission
+Form(
+    Input(type="text", name="email"),
+    Button("Subscribe"),
+    hx_post="/subscribe",
+    hx_swap="outerHTML"
+)
+
+# Infinite scroll
+Div(
+    hx_get="/items?page=2",
+    hx_trigger="revealed",
+    hx_swap="afterend"
+)
+
+# Polling
+Div(id="notifications", hx_get="/notifications", hx_trigger="every 30s")
+```
+
+### All HTMX Attributes
+
+| Python kwarg | HTML attribute | Description |
+|--------------|----------------|-------------|
+| `hx_get` | `hx-get` | GET request |
+| `hx_post` | `hx-post` | POST request |
+| `hx_put` | `hx-put` | PUT request |
+| `hx_patch` | `hx-patch` | PATCH request |
+| `hx_delete` | `hx-delete` | DELETE request |
+| `hx_target` | `hx-target` | Target element selector |
+| `hx_swap` | `hx-swap` | How to swap content |
+| `hx_trigger` | `hx-trigger` | Event that triggers request |
+| `hx_confirm` | `hx-confirm` | Confirmation dialog |
+| `hx_indicator` | `hx-indicator` | Loading indicator |
+| `hx_push_url` | `hx-push-url` | Push URL to history |
+| `hx_select` | `hx-select` | Select content from response |
+| `hx_select_oob` | `hx-select-oob` | Out-of-band select |
+| `hx_swap_oob` | `hx-swap-oob` | Out-of-band swap |
+| `hx_vals` | `hx-vals` | Additional values (JSON) |
+| `hx_boost` | `hx-boost` | Boost all links/forms |
+| `hx_include` | `hx-include` | Include additional inputs |
+| `hx_params` | `hx-params` | Filter parameters |
+| `hx_preserve` | `hx-preserve` | Preserve element |
+| `hx_ext` | `hx-ext` | Extensions |
+
+### HTMX Extensions
+
+```python
+# Server-Sent Events
+Div(hx_ext="sse", sse_connect="/events", sse_swap="message")
+
+# WebSockets
+Div(hx_ext="ws", ws_connect="/ws")
+
+# JSON encoding
+Form(hx_ext="json-enc", hx_post="/api/submit")
+```
+
+---
+
 ## Security
 
 - **Automatic HTML escaping**: All text content and attribute values are escaped
@@ -841,3 +1030,4 @@ When generating NitroUI code:
 - [ ] Use `Fragment` when you need multiple elements without a wrapper
 - [ ] Use `Partial` for raw HTML (analytics, embeds) - bypasses escaping
 - [ ] Use `Component` + `Slot` for reusable components with declarative templates
+- [ ] Use `Field.xyz()` for form fields with HTML5 validation attributes