Sliding Login and Register Form
Pure CSS sign in and sign up forms with a gradient overlay panel that slides between them, plus a mobile switcher and client-side validation.
Forms
Inputs, controls and complete form layouts.
37 component(s)
OTP Code Input Boxes
Six-digit Tailwind CSS OTP verification input with auto-advance, paste support, backspace navigation, resend timer and simulated check.
Signup Form with Password Requirements Checklist
Tailwind CSS signup form that ticks off password rules as you type, with a strength meter, show/hide toggle, inline validation and a simulated success state.
Multi-Select Dropdown with Checkboxes
Bootstrap 5 multi-select dropdown with checkboxes, live search, select all and clear, a selected count badge and removable chips.
Booking Date Picker with Disabled Dates
Bootstrap 5 check-in and check-out date range picker with a two-month calendar, booked dates, minimum stay and price total.
Minimal Contact Form with Animated Underline Inputs
Pure CSS minimal contact form with floating labels, underlines that sweep in on focus, a character counter and accessible inline validation.
Custom Range Slider
Styled range input with a gradient fill, ring thumb and a live value bubble that follows the handle, in pure CSS and a few lines of vanilla JS.
Settings Toggles with Description
Tailwind CSS settings panel with accessible switches, label descriptions, a locked required option, restore defaults and an auto-save status message.
Hover and Focus Dropdown
Dark navbar with pure CSS dropdown menus that open on hover and keyboard focus, plus a small vanilla JS layer for Escape, arrow keys and touch taps.
Forgot Password Form
Tailwind CSS forgot password form with email validation, loading spinner, check-your-inbox success state and a resend cooldown timer.
Star Rating Input
Accessible pure CSS star rating input with half stars, built on native radio buttons, hover preview and a live value label.
Login Form with Floating Labels
Clean pure CSS login card with animated floating labels, show/hide password, inline validation and a simulated sign-in state in vanilla JavaScript.
Expanding Search Bar
Search icon button that expands into a pill-shaped input, shown in a dark navbar and a large hero search, with Escape to close and a demo submit.
Day/Night Toggle
Animated pure CSS day and night toggle switch where the sun turns into a cratered moon, clouds drift away and stars appear.
iOS Style Toggle Switch
Pure CSS iOS style toggle switches built on real checkboxes, in a grouped settings list with three sizes, five colors and a disabled state.
Styled Native Select
Pure CSS restyle of the native select element with a custom arrow, focus ring, error, success and disabled states, and three sizes.
Floating Label Inputs
Bootstrap 5 floating label inputs for text, email, select and textarea, styled as filled fields with validation, read-only and disabled states.
Signup Form with Validation
Bootstrap 5 signup form with live password rules, a strength meter, show/hide toggle, password confirmation and a required terms checkbox.
Multi-Step Registration Form
Bootstrap 5 three-step registration form with a progress bar, step indicators, per-step validation, password matching, plan cards and a success screen.
Search with Autocomplete
Bootstrap 5 help center search bar with an accessible autocomplete list built from local data, highlighted matches, keyboard navigation and popular search chips.
Image Upload with Preview
Bootstrap 5 drag-and-drop image uploader with thumbnail previews, remove buttons, type and size validation and simulated upload progress.
Custom Checkboxes and Switches
Restyled Bootstrap 5 checkboxes, large switches, select-all with indeterminate state, radio cards and colored checkbox chips.
User Account Dropdown
Bootstrap 5 avatar dropdown with profile header, plan badge, online/away/busy status picker and account menu links for app headers.
Password Strength Meter
Bootstrap 5 password input with show/hide toggle, four-step strength meter, live requirements checklist and confirmation match check.
What are form components?
Forms are how users send information to your site: signing in, registering, searching, checking out, filtering results or getting in touch. This category collects form building blocks, from individual inputs and controls to complete layouts such as login, signup, contact and multi-column settings forms.
What you will find here
- Text inputs, textareas, selects, checkboxes, radios and switches with consistent styling.
- Input groups with icons, prefixes and buttons.
- Validation states with inline error and success messages.
- Complete form layouts: login, registration, password reset, contact, checkout and settings pages.
Form best practices
Every field needs a visible <label> linked with for and id; placeholder text is not a substitute because it disappears while typing. Use the correct input types (email, tel, url, number) and autocomplete attributes so mobile keyboards and browsers can help the user. Group related fields with <fieldset> and <legend>, especially for radio buttons.
Show errors next to the field they belong to, connect them with aria-describedby, and never rely on colour alone to signal a problem. Keep forms in a single column on mobile, make tap targets comfortable, and place the primary submit button where the eye ends up. Ask only for what you really need: shorter forms are completed more often. Remember that client-side validation is a convenience; always validate on the server as well.
Bootstrap, Tailwind and pure CSS forms
Form snippets come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS versions. Bootstrap 5 examples use the familiar form-control, form-select and form-check classes, while the Bootstrap 6 alpha versions use its updated form styles and theme-* colour roles for focus and validation colours. The Tailwind and pure CSS versions are framework-free markup you can style further. Use the framework filter and live preview to compare, then copy the HTML and CSS from the code tabs or download the snippet and connect the form to your own backend.