Input

Labeled text input with optional leading icon and trailing button.

Installation

bash

pnpm dlx shadcn@latest add @cs/input

tsx

import { Mail, Search } from "lucide-react";
import { Input } from "@/components/cs/input";

tsx

<Input
  label="Search"
  name="search"
  icon={<Mail />}
  button={{ title: "Search", children: <Search /> }}
/>

Labeled text input with optional leading icon and trailing button.

Name	Type	Default	Description
button	React.ComponentPropsWithoutRef<"button">	-	Button displayed inside the input on the right.
error	string \| null	-	Validation error message for the field.
icon	ReactNode	-	Icon displayed inside the input on the left.
inputClassName	string	-	Additional classes applied to the native input control.
label	ReactNode	-	Field label and fallback placeholder.
orientation	ComponentProps<typeof Field>["orientation"]	"vertical"	Layout of the field label and input control.