Slide-Over Panel
Tailwind CSS slide-over drawer from the right with header, scrollable form content, sticky footer actions, focus trap and Escape to close.
Tag: form
Components tagged with "form".
39 component(s)
Onboarding Wizard
Tailwind CSS onboarding wizard with step indicator, progress bar, radio cards, topic chips, validation and an editable summary before finishing.
Date Picker Dropdown
Accessible Tailwind CSS date picker: a text input with a calendar popup, keyboard grid navigation, locale-aware labels and min/max dates.
File Upload Dropzone
Tailwind CSS drag-and-drop file upload zone with keyboard support, type and size validation, a file list and per-file progress bars.
Dual Range Price Slider
Tailwind CSS min/max price slider with two handles, synced number inputs and a live histogram that counts products in the selected range.
Radio Card Selector
Tailwind CSS plan picker that turns native radio inputs into selectable pricing cards with a check indicator, focus ring and live summary.
Searchable Select
Accessible Tailwind CSS combobox that filters options as you type, highlights matches and supports full keyboard navigation.
Inputs with Icons and Add-ons
Tailwind CSS input group examples with leading icons, text prefixes and suffixes, a currency select, password toggle, clear button and helper text.
Contact Form Card
Tailwind CSS contact form card with a topic select, live character counter and meter, inline validation and a simulated sending state.
Comment Thread
Nested Tailwind CSS comment thread with threaded replies, like toggles, inline reply forms and a new comment form, built with accessible vanilla JavaScript.
Newsletter Signup Card
Bold Tailwind CSS newsletter signup card with inline email validation, a loading spinner, privacy note and an animated success state.
Split Contact Section with Form
Tailwind CSS contact section with a gradient info panel beside a validated contact form, topic chips, character counter and a simulated send state.
Contact Form with Validation
Bootstrap 5 contact form with floating labels, client-side validation, a character counter, a success message and a contact details panel.
Hero with Signup Form
Bootstrap 5 two-column hero with value points, social proof and a validated signup card that shows a loading state and a success message.
Login Form with Social Buttons
Tailwind CSS login form with Google and GitHub buttons, remember me, password visibility toggle and accessible inline validation.