Tag Input
Free-form tag entry with keyboard and paste support.
This page is a scaffold for the Tag Input component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.
Planned variants & states to implement:
- Press enter to add
- Remove tag (x)
- Predefined suggestions
- Max tags limit
- Duplicate prevention
- Colored tag variants
Other Components in Forms
Text Input
Single-line text field with label, placeholder, and helper text.
Textarea
Multi-line text input with auto-resize and character count.
Select
Native HTML select dropdown with styled wrapper.
Tom Select
Enhanced searchable select with tagging support via Tom Select.
TomSelect
Multi Select
Select multiple values with tag-style chips.
Ajax Select
Remote-data select with async search and loading state.
Checkbox
Single and grouped checkboxes with indeterminate state.
Radio Button
Single-select radio groups with label and description.
Toggle Switch
On/off toggle switch with accessible label and state.
Range Slider
Single and dual-handle range input with value display.
Search Input
Search field with icon, clear button, and optional suggestions.
Date Picker
Calendar-based date and date-range picker component.
Time Picker
Clock or dropdown-based time selection input.
File Upload
Drag-and-drop and click-to-browse file upload zone.
Input Group
Combined input with prefix/suffix text, icons, or buttons.
Form Validation
Inline error messages, success states, and constraint patterns.
Contact Form
Ready-to-use contact form: name, email, message, and submit.
Newsletter Form
Email subscription form with single input and CTA button.
Lead Form
Multi-field lead capture form with optional step progression.