Etched Field

Forms

About

A floating-label text input whose label rises into a notch cut from the top border, with a frost-blue outline that draws in on focus and a corner mark that signals valid/invalid state.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Etched Field to your project and fits it to your theme.

Code

How Etched Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import EtchedField from "@/components/ui/etched-field";

export default function Demo() {
  const [email, setEmail] = React.useState("");
  const bad = email.length > 0 && !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email);
  return (
    <div className="flex min-h-full w-full items-center justify-center bg-[#0b080d] p-10">
      <div className="flex w-full max-w-sm flex-col gap-7">
        <EtchedField
          label="Full name"
          defaultValue=""
          autoComplete="name"
          hint="As it appears on your ID."
        />
        <EtchedField
          label="Email address"
          type="email"
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          error={bad ? "That doesn\u2019t look like an email." : undefined}
        />
        <EtchedField label="Company" defaultValue="Northstar" />
      </div>
    </div>
  );
}