Skip to content

Feature: HTMX support and a nifty Form Builder#7

Merged
sn merged 2 commits into
mainfrom
feature/re-usable-components
Jan 30, 2026
Merged

Feature: HTMX support and a nifty Form Builder#7
sn merged 2 commits into
mainfrom
feature/re-usable-components

Conversation

@sn
Copy link
Copy Markdown
Contributor

@sn sn commented Jan 30, 2026

This pull request introduces a major new feature to NitroUI: a declarative HTML5 form builder API via the new Field class, as well as comprehensive documentation and tests for HTMX integration. The changes provide a unified, composable way to generate form fields with validation, labels, wrappers, and full support for HTMX attributes. The documentation has been expanded to cover the new form builder and HTMX usage patterns, and new tests ensure robust HTMX attribute handling.

Form Builder Feature:

  • Added a new Field class for declarative form field creation, supporting all HTML5 input types, validation attributes, labels, wrappers, and flexible option formats for selects and radios (src/nitro_ui/forms/field.py, src/nitro_ui/forms/__init__.py, src/nitro_ui/__init__.py, [1] [2] [3] [4].
  • Documented the form builder API, usage examples, field types, label/wrapper behaviors, select/radio option formats, and file structure in SKILL.md and a new design doc (docs/plans/2026-01-30-form-builder-design.md, [1] [2] [3].

HTMX Integration:

  • Expanded documentation for HTMX attribute support, including usage patterns, attribute reference tables, and extension examples (README.md, SKILL.md, [1] [2].
  • Added a comprehensive test suite for HTMX attributes and extensions, verifying correct HTML output for all supported attributes and combinations (tests/test_htmx.py, tests/test_htmx.pyR1-R174).

Exports and API Consistency:

  • Updated module exports to include Field in both the main NitroUI namespace and the forms submodule for consistent imports (src/nitro_ui/__init__.py, [1] [2]; src/nitro_ui/forms/__init__.py, [3].

Documentation Improvements:

  • Added new sections and checklists to README.md and SKILL.md for form builder and HTMX usage, making it easier for users to discover and adopt these features [1] [2] [3].

Design Documentation:

sn and others added 2 commits January 30, 2026 06:48
- 26 new tests covering all HTMX attributes
- Document hx_* attribute usage in SKILL.md (full reference)
- Add HTMX examples to README.md
- Covers: requests, targeting, swapping, triggers, extensions

HTMX attributes already work via underscore-to-hyphen conversion.
This commit adds docs and test coverage to ensure it stays working.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
New Field class with static methods for generating form fields:
- Text inputs: text, email, password, url, tel, search, textarea
- Numeric: number, range
- Date/time: date, time, datetime_local
- Selection: select, checkbox, radio
- Other: file, hidden, color

Features:
- HTML5 validation attributes (required, minlength, pattern, etc.)
- Optional labels with proper for/id linking
- Optional wrapper divs for CSS framework compatibility
- Select supports string, tuple, and dict option formats
- Works seamlessly with HTMX attributes

Usage:
    Form(
        Field.email("email", label="Email", required=True),
        Field.password("password", label="Password", min_length=8),
        Button("Log In", type="submit")
    )

53 new tests (420 total)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@sn sn changed the title Feature: HTMX support and a nifty Fiorm Builder Feature: HTMX support and a nifty Form Builder Jan 30, 2026
@sn sn merged commit fbcac92 into main Jan 30, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant