Forms

text_field, textarea_field, select_field, checkbox_field, radio_field, file_field, date_field, range_field, input_group, multi_select_field, search_field, search_bar — Form inputs with labels and errors.

Theme and Style Controls

Try data-style="neumorphic" with both light and dark themes.

Text Fields

Fieldset

Team profile

Auth Helpers

Use at least 12 characters.

Textarea

Select

Checkbox

Toggle

Switch-style checkbox. Use toggle_field for settings UIs.

Radio

Plan
Layout

Toggle Group

Visible radio/checkbox groups for compact mode choices and toolbar-like settings.

File Upload

PNG, JPG up to 5MB

Date

Range

75

Slider

42

Use slider() when you need the standalone range primitive without field wrapper chrome.

Standalone Label

Input Group

$ .00
@

Masked Fields (Alpine Mask)

phone_field, money_field, masked_field — use Alpine Mask plugin for formatting as you type.

Multi-Select

Search

search_bar variants: solo (input only), with-button (input + compact submit), with-icon (input with ⌕ prefix).

search_field: raw input. With search_url and search_target, adds htmx debounced search (keyup delay:300ms).

Action Containers

Family: action_strip (default), filter_bar, command_bar, search_header, selection_bar.

Search Header

Search-first list header with optional controls.

Resource Index

Search-first browse surface with optional filters and results.

Status filters
forms
Feedback form

Collects product feedback with tags and status badges.
Launch survey

Reusable browse result card inside the resource index.

With Errors (demo)

Live validation

Server-side validation: required fields, email format. On error: ValidationError fragment. On success: FormAction + toast.

Wizard Form

Server-driven multi-step form with stepper indicator. Steps submit via HTMX and replace the wrapper.

Inline Edit Field

Click-to-edit pattern with display and form modes. Swaps via HTMX.

Display mode:

John Doe

Edit mode:

Cancel

Drag & Drop

Row-based sortable list and kanban board variants with showcase-only Alpine wiring.

Row variant (dnd_list + dnd_item + dnd_handle):

Item one
Item two
Item three

Board variant (dnd_board + dnd_column + dnd_card):

To Do
Task 1
Task 2
In Progress
Task 3
Done
Task 4

Sortable List

CSS-styled drag-to-reorder containers. Visual structure and drag affordances only.

First item
Second item
Third item

Form Error Summary

Alert box at the top of a form listing all field errors with anchor links. Supports oob=true for htmx partial updates. See HTMX Patterns for the full OOB story.

Per-field Errors & OOB

Every field has id="field-{name}" and an error container id="errors-{name}" with role="alert", always in the DOM. The server can target individual fields with oob=true on field_wrapper.

Safe-by-default Forms

The form() macro auto-adds hx-select="unset" when htmx attributes are present. This prevents boosted layouts from stripping OOB swaps in form responses. Explicit hx_select overrides.

Signature

Code block for function and method signatures. Optionally tag with a language. 

def greet(name: str) -> str:
async def fetch(url: str, timeout: int = 30) -> Response:

Params Table

API parameters table with Name, Type, Default, and Description columns.

Component Parameters

Name Type Default Description
variant str "" Visual variant
size str "md" Size variant
cls str "" Extra CSS classes