Floating field

A native text field with a label that makes room for the entered value.

New

Email address

We’ll only use this for account updates.

Password

Use the eye button to check your entry.

Implementation

1"use client";2 3import { useId, useState, type InputHTMLAttributes } from "react";4import { Eye, EyeOff } from "lucide-react";5 6export type FloatingFieldProps = Omit<7  InputHTMLAttributes<HTMLInputElement>,8  "children" | "placeholder"9> & {10  label: string;11  hint?: string;12  error?: string;13};14 15/** Native input with a persistent label, optional validation, and password reveal. */16export function FloatingField({17  label,18  hint,19  error,20  type = "text",21  id,22  className = "",23  disabled,24  "aria-describedby": describedBy,25  "aria-invalid": invalid,26  ...props27}: FloatingFieldProps) {28  const generatedId = useId();