About
A floating-label text input with filled and outlined variants, leading/trailing icon slots, and supporting/error text, following Google's Material 3 design spec.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Material Text Field to your project and fits it to your theme.
Code
How Material Text Field is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import TextField from "@/components/ui/text-field";
import { useState } from "react";
function SearchIcon() {
return (
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
);
}
export default function SearchTextFieldDemo() {
const [query, setQuery] = useState("");
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[#fef7ff] p-8">
<TextField
variant="outlined"
label="Search"
leadingIcon={<SearchIcon />}
supportingText="Press enter to search"
value={query}
onChange={(event) => setQuery(event.currentTarget.value)}
/>
</div>
);
}
More by language-lit
View all
Material 3 Switch
Material 3 Checkbox
Circular Progress