Input

Text input with prefix and suffix, plus Password with a reveal toggle and Search that clears on Escape.

Category: Forms
Access: Free with an account
Source: 173 lines · one file

When to use it

Use Input for single-line text with optional leading and trailing content. PasswordInput adds a show or hide toggle; SearchInput adds a search icon and clear button with value and onValueChange.

Installation

How you get it

Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.

Use Liro's Input for this.
Install it: npx shadcn@latest add @liro/input
(the @liro registry is set up in components.json, with LIRO_KEY in .env.local)
Import it from @/components/ui/input.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.

For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Free components install through the @liro registry with your CLI token: see the Namespaced tab.

Usage

components/search-box.tsx

import * as React from "react";
import { Input, PasswordInput, SearchInput } from "@/components/ui/input";

export function Inputs() {
  const [query, setQuery] = React.useState("");
  return (
    <div className="grid gap-3">
      <Input placeholder="Company name" leading="https://" />
      <PasswordInput placeholder="Password" autoComplete="current-password" />
      <SearchInput value={query} onValueChange={setQuery} placeholder="Search invoices" />
    </div>
  );
}

API reference

“Copy prompt” above puts a full brief on your clipboard, install command, dependencies, props, and the mistakes an assistant usually makes with this component.

Props

Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.

	Type		Notes
`size`	`ControlSize`	No	Matches Button and Select of the same size. Default `md`.
`leading`	`React.ReactNode`	No	Inside the well, before the text: an icon or a prefix like "$".
`trailing`	`React.ReactNode`	No	Inside the well, after the text: a unit, a shortcut hint, a button.
`wrapperClassName`	`string`	No	Classes for the well when adornments are used; `className` goes on the input.