HTML/CSS
Install
Use this as a template path now; later it can map to a real registry package.
pnpm dlx shadcn@latest add @squadkode/ui-lab/floating-label-inputUsage (with your settings)
A compact React example generated from this template data.
import "./floating-label-input.css"; export function FloatingLabelInput() { return ( <label className="sk-field"> <input placeholder=" " type="email" /> <span>Email address</span> </label> );}Code
Switch between HTML, CSS, TSX, and Astro versions.
<label class="sk-field"> <input placeholder=" " type="email" /> <span>Email address</span></label>.sk-field { position: relative; display: block; width: min(100%, 320px);} .sk-field input { width: 100%; height: 52px; border: 1px solid rgba(213,171,255,.24); border-radius: 8px; padding: 1.1rem .95rem .45rem; color: #f8f8ff; background: rgba(255,255,255,.06);} .sk-field span { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: rgba(248,248,255,.55); transition: .18s ease;} .sk-field input:focus + span,.sk-field input:not(:placeholder-shown) + span { top: .55rem; transform: none; font-size: .72rem;}import "./floating-label-input.css"; export function FloatingLabelInput() { return ( <label className="sk-field"> <input placeholder=" " type="email" /> <span>Email address</span> </label> );}---// Floating Label Input--- <label class="sk-field"> <input placeholder=" " type="email" /> <span>Email address</span></label> <style>.sk-field { position: relative; display: block; width: min(100%, 320px);} .sk-field input { width: 100%; height: 52px; border: 1px solid rgba(213,171,255,.24); border-radius: 8px; padding: 1.1rem .95rem .45rem; color: #f8f8ff; background: rgba(255,255,255,.06);} .sk-field span { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: rgba(248,248,255,.55); transition: .18s ease;} .sk-field input:focus + span,.sk-field input:not(:placeholder-shown) + span { top: .55rem; transform: none; font-size: .72rem;}</style>Copy Prompt
Use this prompt to recreate or extend the element with the same intent.
Create a polished Floating Label Input component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A polished input field with a floating label and clear focus state.
Variations
1 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
Label remains visible
Works without JavaScript
Good for contact forms