Text input with leading and trailing adornments, a password input whose show/hide button reports its state, and a search input that clears on Escape. Part of the Layro System: layro.vercel.app
import * as React from "react";
import { Field, Input, PasswordInput, SearchInput } from "@/components/ui/layro-input";
/* Three inputs on one surface. Adornments before and after the value
($, USD, seats), a password field whose show/hide button reports its
state, and a search field that clears on Escape. */
export default function InputDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 420 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Workspace settings</h2>
<p className="mt-1 mb-5 text-[13px] text-muted-foreground">Inputs that match the Layro control scale.</p>
<div className="grid gap-4">
<div className="grid grid-cols-2 gap-3">
<Field label="Seats"><Input type="number" defaultValue={12} trailing="seats" /></Field>
<Field label="Amount" optional><Input leading="$" defaultValue="89.00" trailing="USD" /></Field>
</div>
<Field label="Password" hint="At least 12 characters"><PasswordInput defaultValue="correct horse battery" /></Field>
<Field label="Find a member"><SearchInput defaultValue="Daniel" /></Field>
</div>
</div>
</div>
);
}