Input

Forms

About

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

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

Code

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

Usage.tsx

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>
  );
}