Component Patterns 2
← Components 1Carousel — Slide Navigation
Prev/Next buttons use hx-get to fetch slides from the server. Clamped at boundaries so you can't go past the first or last slide.
Welcome
Getting started with HTMX and DaisyUI
Slide 1 of 5
Dropdown — Server-Filtered Typeahead
Type to search programming languages. Uses hx-trigger="keyup changed delay:300ms" for debounced server-side filtering.
Cascading Select — Dependent Dropdowns
Selecting a country populates the city dropdown via hx-get. The second select's options are loaded from the server.
Range Slider — Debounced Input
Dragging the slider uses hx-trigger="input changed delay:300ms" to POST the value. Server computes pricing at $2.50/unit.
File Input — Multipart Upload
Uses hx-encoding="multipart/form-data" to upload a file. Server parses metadata only (no storage).
Accordion — Lazy-Loaded Panels
Each panel uses hx-trigger="click once" to load content only on first expand. Subsequent toggles use cached content.
Indicator — Live Notification Badge
Badge polls every 3 seconds via hx-trigger="every 3s". Count increases randomly. "Mark all read" resets via hx-post.
Theme Controller — Server-Persisted Preference
Radio buttons use hx-post with hx-vals to persist theme selection on the server. Demonstrates preference storage pattern.
Carousel
GET /carousel/:indexhx-get swaps slide content + prev/next buttons clamped at boundaries.
Dropdown
GET /dropdown/search?q=Debounced keyup triggers server-side filter of programming languages.
Cascading
GET /cascading/:categorySelecting a country populates city dropdown via hx-get.
Range
POST /rangeDebounced input posts slider value; server computes pricing.
Upload
POST /uploadMultipart form data; server returns file metadata without storing.
Accordion
GET /accordion/:panelhx-trigger="click once" lazy-loads panel content on first expand.
Indicator
GET /indicator/countBadge polls every 3s; count increases randomly, reset via POST.
Theme
POST /themeRadio buttons persist theme preference on server via hx-vals.