form elements
All collections tagged with "form elements"
20 CSS Custom Select Dropdowns
20 hand-coded CSS custom select dropdown templates for checkout, dashboards, and SaaS forms — country selector with flags, currency picker with symbols, credit card type selector, pricing plan switcher, multi-select tag chips, date-range picker, and more. WCAG 2.1 combobox pattern with full keyboard navigation, listbox ARIA roles, arrow-key + Enter/Escape support, focus return. Copy-paste HTML + CSS + JS, no library dependencies, no framework lock-in.
16 CSS Floating Label Inputs
16 hand-coded CSS floating label input demos — pure CSS float triggers, Chrome autofill fix, live validation states, ARIA-accessible fields, select dropdowns, Material Design outlined text field, filled underline minimal, dark mode with light-dark(), icon inputs, mobile-safe (no iOS zoom), auto-growing textareas, password show/hide toggle, multi-column form grid, plus showcase-tier gradient-ink label, conic border-beam, and staggered letter cascade. Copy-paste, zero deps.
24 CSS Radio Buttons
24 hand-coded CSS radio button designs covering every real-world use case tier-1 SaaS, e-commerce, fintech, and healthcare products reach for radio inputs in 2026: full selectable cards (:has()-driven with icon + title + meta + price), iOS-style pill segmented control (billing period toggle), radio row with icon tile + title + description subtext (settings-page pattern), dark-mode glowing radio with 3-layer box-shadow breathing pulse, pure-CSS accessible radio using appearance:none (WCAG 1.3.1 canonical reference — no wrapper), plan picker rows with 'Most popular' + 'Best value' gradient badges, concentric ripple animation on check, sliding pill toggle switch (2-seg thumb), interactive 3D sphere radio with orb highlight tracking, ink splash animation on select, rating star radio group (reverse-flex flip pattern), 3D tilt card option selector with cursor-tracked perspective, minimal checkmark radio, product color swatch selector (Shopify/Amazon variant picker), segmented control bar, cyberpunk neon ring radio, subscription pricing plan cards (Stripe/Vercel/Linear billing tier pattern), liquid wave fill on select, image clip-mask option selector (Airbnb/Booking destination picker), gradient border card radio, user profile avatar selector (Netflix who's-watching pattern), stacked vertical radio list, tactile 3D push button radio (skeuomorphic keycap depress), and outer glow pulse radio with dual sonar-ping keyframes. 22 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (Demo 09 orb highlight tracking + Demo 12 3D tilt cursor perspective). Every radio group uses real <input type='radio'> inside <fieldset> + <legend> semantic wrappers so screen readers announce the question before the options, keyboard arrow keys move selection natively, and form-post semantics work zero-config. Every visual is scoped under a unique .crb-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
47 CSS Toggles & Switches
47 hand-coded CSS toggle switches with live demos — iOS, Material 3, dark-mode sun/moon, neumorphic, gooey liquid, bouncy physics, ON/OFF text, SaaS pricing pill, haptic keycaps, waveform mute, auto-off timer, biometric hold-to-confirm, split-flap board, permission stack, skeuomorphic light switch, rotary knob, neon cyberpunk, brutalist, day/night scene, 3D flip card, glassmorphism, industrial rocker, ARIA role=switch reference, and more. Copy-paste, zero deps.