Components
Email Input
Icon-leading email field built on shadcn Input with a default mail icon and shared inputs-internals shell.
Email Input is a thin wrapper around IconLeadingInput with type="email" and a default mail icon. Registry item email-input pulls input and inputs-internals and declares lucide-react.
For empty read-only values, use Empty Value Placeholder.
Installing
pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/email-input.jsonnpx shadcn@latest add https://ui.isaacfei.com/r/email-input.jsonyarn dlx shadcn@latest add https://ui.isaacfei.com/r/email-input.jsonbun x shadcn@latest add https://ui.isaacfei.com/r/email-input.jsonWith a namespace: npx shadcn@latest add @f-ui/email-input.
Usage
import { EmailInput } from '@/components/f-ui/email-input/email-input';
<EmailInput value={email} onChange={(e) => setEmail(e.target.value)} />Examples
Value:—
"use client";
import { useState } from "react";
import { EmailInput } from "@/components/f-ui/email-input/email-input";
import {
EmptyValuePlaceholder,
isEmptyDisplayValue,
} from "@/components/f-ui/empty-value-placeholder";
export function EmailInputDemo() {
const [value, setValue] = useState("");
return (
<div className="max-w-sm space-y-3">
<EmailInput
value={value}
onChange={(e) => setValue(e.target.value)}
aria-label="Email"
/>
<p className="text-muted-foreground flex flex-wrap items-center gap-x-1 gap-y-0.5 text-xs">
<span>Value:</span>
{isEmptyDisplayValue(value) ? (
<EmptyValuePlaceholder />
) : (
<span className="text-foreground font-medium tabular-nums">{value}</span>
)}
</p>
</div>
);
}API Reference
- Thin wrapper around
IconLeadingInput(EmailInputexport) withtype="email"and a default mail icon inleadingSlot. leadingSlot: optional override for the leading icon.- Default
placeholder:email@example.com. - Inherits standard controlled
Inputprops (value,onChange,disabled,className,aria-*, etc.).