# Input
> Text field with an animated neon focus ring, icons, labels and error states.
Category: Forms. Docs: https://get-neonkit.vercel.app/components/input
## Installation
```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/input.json
```
With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/input`.
npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.
## Usage
```tsx
import { Input } from "@/components/ui/input"
```
## Examples
### Sign in
```tsx
"use client";
import * as React from "react";
import { Eye, EyeOff, LockKeyhole, Mail } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
export default function InputDemo() {
const [visible, setVisible] = React.useState(false);
return (
);
}
```
### Search with a shortcut
trailing holds hints and small buttons. Press / to focus this one.
```tsx
"use client";
import * as React from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
export default function InputSearch() {
const ref = React.useRef(null);
const [focused, setFocused] = React.useState(false);
React.useEffect(() => {
function onKeyDown(event: KeyboardEvent) {
if (event.defaultPrevented || event.key !== "/") return;
const target = event.target as HTMLElement;
// Let people type a slash into other fields.
if (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return;
event.preventDefault();
ref.current?.focus();
}
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, []);
return (
}
trailing={
{focused ? "Esc" : "/"}
}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onKeyDown={(event) => {
if (event.key === "Escape") event.currentTarget.blur();
}}
containerClassName="max-w-sm"
/>
);
}
```
### Validation
error turns the field red, sets aria-invalid and takes the description's place. leading also takes text addons.
```tsx
"use client";
import * as React from "react";
import { Check } from "lucide-react";
import { Input } from "@/components/ui/input";
const taken = ["aadi", "admin", "neon", "support"];
function validate(handle: string) {
if (!handle) return "Pick a handle for your profile link.";
if (!/^[a-z0-9-]+$/.test(handle)) return "Use lowercase letters, numbers and dashes.";
if (handle.length < 3) return "Handles are at least 3 characters.";
if (taken.includes(handle)) return `That one is taken. Try ${handle}-dev.`;
return undefined;
}
export default function InputValidation() {
const [handle, setHandle] = React.useState("aadi");
const error = validate(handle);
return (
setHandle(event.target.value.trim())}
error={error}
spellCheck={false}
autoCapitalize="none"
leading={neonkit.dev/}
trailing={error ? null : }
containerClassName="max-w-sm"
/>
);
}
```
### Read-only and disabled
Read-only fields keep a quieter focus state so they don't read as editable.
```tsx
"use client";
import * as React from "react";
import { Check, Copy } from "lucide-react";
import { Input } from "@/components/ui/input";
const apiKey = "nk_live_51Hx9Q2eZvKYlo2C8Nf3";
export default function InputStates() {
const [copied, setCopied] = React.useState(false);
async function copy() {
await navigator.clipboard.writeText(apiKey);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
}
return (
event.currentTarget.select()}
trailing={
}
/>
);
}
```
### Sizes
Heights match Button: 32, 40 and 48px.
```tsx
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
export default function InputSizes() {
return (
} />
} />
} />
);
}
```
## API reference
### Input
Also accepts every native input attribute, and the ref points at the . className and style go to the field box around it.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | Visible label, linked to the input. |
| `description` | `ReactNode` | — | Helper text under the field. |
| `error` | `ReactNode` | — | Red invalid state and message. Replaces description. Pass true for the state without a message. |
| `leading` | `ReactNode` | — | Icon or text addon before the value. Icons light up on focus. |
| `trailing` | `ReactNode` | — | Icon, hint or small button after the value. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| `className` | `string` | — | Classes for the field box: border, background, height. |
| `containerClassName` | `string` | — | Classes for the outer block with the label and message. Use it for width and margins. |
## Accessibility
- The label is a native