"use client"; import * as React from "react"; import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"; import { Input, PasswordInput } from "@/components/ui/input"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, } from "@/components/ui/input-group"; // Common web form fields: Input for one icon or unit, InputGroup when a field // holds more (a prefix and a button, a select, a labelled action). function Glyph({ children }: { children: React.ReactNode }) { return ( ); } const CopyIcon = () => ( ); const MailIcon = () => ( ); const InfoIcon = () => ( ); function Required() { return ( ); } function Optional() { return (optional); } /** An info glyph beside a label. A native title stands in until Tooltip exists. */ function Hint({ children }: { children: string }) { return ( {children} ); } /** A native select that sits inside the field: transparent, our chevron, no box of its own. */ function InlineSelect({ label, options, autoComplete, }: { label: string; options: { label: string; value: string }[]; autoComplete?: string; }) { return ( ); } function CopyButton({ label }: { label: string }) { return ( { const field = event.currentTarget.closest("[data-slot=input-group]")?.querySelector("input"); void navigator.clipboard?.writeText(field?.value || field?.placeholder || ""); }} > ); } export default function InputForm() { return (

Website URL https:// {/* The prefix supplies the scheme, so this is text: type="url" would reject "example.com". inputMode still brings up the URL keyboard. */} Website URL Email Email We won’t spam you, we promise :) Email Used for sign-in and receipts } /> We won’t spam you, we promise :) Email Used for sign-in and receipts } /> That’s not a valid email address ID number } /> Phone number {/* The code and the number autofill separately, so each field gets its own token. */} Quick search ⌘K Password At least 12 characters {/* A rule like "at least 12 characters" means a new password, so managers offer to generate one. */}

); }