Input

A text input component with label, hint, error, and icon support.

PREVIEW

We'll never share your email.

Username

Username is already taken.

INSTALLATION

bash

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

USAGE

tsx

import { Input } from "@kennbalino/kui";
import { Search } from "lucide-react";

// Default
<Input placeholder="Default input" />

// With label and hint
<Input
  label="Email"
  hint="We'll never share your email."
  placeholder="you@example.com"
/>

// With icon
<Input
  label="Search"
  placeholder="Search components..."
  leftIcon={<Search size={14} />}
/>

// Error state
<Input
  label="Username"
  placeholder="Enter username"
  error="Username is already taken."
/>

// Success state
<Input variant="success" label="Email" placeholder="you@example.com" />

// Disabled
<Input placeholder="Disabled input" disabled />

PROPS

Prop	Type	Default	Description
variant	default \| success \| error	default	Controls the visual state of the input.
size	sm \| md \| lg	md	Controls the size of the input.
label	string	—	Label text displayed above the input.
hint	string	—	Helper text displayed below the input.
error	string	—	Error message — overrides hint and sets error variant.
leftIcon	ReactNode	—	Icon displayed on the left side of the input.
rightIcon	ReactNode	—	Icon displayed on the right side of the input.
disabled	boolean	false	Disables the input and prevents interaction.