Inputs
31 components
Rating
Star and heart rating inputs using DaisyUI rating + mask classes.
File Input
File upload input field with label and accept filter.
Input Spinner
Numeric increment/decrement input with +/- buttons. Uses vanilla JS — no library needed. Includes simple and joined variants.
Clipboard Copy
Click-to-copy buttons with visual feedback. Uses vanilla JS navigator.clipboard — no library needed.
Text Input
A labelled text input field.
Textarea Input
A labelled textarea input field.
Select Input
A labelled select dropdown.
Range Input
A labelled range slider input.
Form Field
A unified form field that renders the appropriate input based on type.
Search Input
A search input field with a magnifier icon.
Validator
DaisyUI validator class adds green/red colour feedback on HTML5 validation states.
Calendar
DaisyUI calendar CSS classes applied to a static HTML month calendar demo.
Form Control Wrappers
Labeled form inputs with labelPosition (above / left), optional hint, error, and HTMX attrs.
Password Field
Password input with optional show/hide toggle button. Includes guard script for HTMX partial swaps.
Password Meter
Password input with strength meter (progress bar + label) and optional show toggle.
Enhanced Select
Choices.js-powered select with search, groups, tags, and removal. Loads from CDN dynamically.
Date Picker
Flatpickr date/time picker with single, range, multiple, time, datetime, month, and week modes. Loads from CDN dynamically.
Rich Text Editor
Quill rich text editor with snow and bubble themes. Loads from CDN dynamically.
File Upload
FilePond file upload with drag-and-drop, image preview, and avatar picker. Loads from CDN dynamically.
Form Validation
Client-side form validation with required, min/max length, email, pattern, and match rules. Uses vanilla JS.
OTP Input
Multi-digit one-time password input with auto-advance, paste support, and keyboard navigation.
Color Picker
Native color picker input with DaisyUI styling.
Datalist Autocomplete
Text input with native browser autocomplete via <datalist> element.
Tag List
Alpine-managed tag input — add tags with Enter/comma, remove with X, submit as hidden inputs.
Combobox
Alpine searchable select — client-mode filter or server-mode lazy search, single/multi, keyboard nav.
Structured Input
Alpine repeatable key-value rows with text+select columns. Add/remove rows. Submits as name[0][key].
Palette
Alpine color swatch picker — Tailwind hues × shades, neutral colors, hex display, reset button.
Select Shell
Composable Alpine dropdown trigger+panel. Chevron rotates, click-outside closes, children pick from a parent Alpine scope.
Icon Picker
Searchable Popover icon listbox with roving-tabindex keyboard navigation, a default/reset tile, and a hidden form input. Catalog-agnostic: the caller injects the options.
Color Picker
Text colour field paired with a native colour swatch and optional preset palette. Submits as a normal named input and works without JS.
Input Group
Joined input row with leading/trailing text or icon addons sharing one focus ring.