Input

Text field with an animated neon focus ring, icons, labels and error states.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/input.json

import { Input } from "@/components/ui/input"

<Input label="Email" type="email" placeholder="you@company.com" />

trailing holds hints and small buttons. Press / to focus this one.

error turns the field red, sets aria-invalid and takes the description's place. leading also takes text addons.

Read-only fields keep a quieter focus state so they don't read as editable.

Heights match Button: 32, 40 and 48px.

Also accepts every native input attribute, and the ref points at the <input>. className and style go to the field box around it.

Prop	Type	Default
`label`	`ReactNode` Visible label, linked to the input.	None
`description`	`ReactNode` Helper text under the field.	None
`error`	`ReactNode` Red invalid state and message. Replaces description. Pass true for the state without a message.	None
`leading`	`ReactNode` Icon or text addon before the value. Icons light up on focus.	None
`trailing`	`ReactNode` Icon, hint or small button after the value.	None
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`size`	`"sm" \| "md" \| "lg"` Height, padding and text size.	`"md"`
`className`	`string` Classes for the field box: border, background, height.	None
`containerClassName`	`string` Classes for the outer block with the label and message. Use it for width and margins.	None

required shows the neon dot after the label and stays a native attribute, so the browser validates it.
When the browser rejects the field on submit (required, type, pattern), it turns red until it's edited or the form resets. The browser shows its own message.
The label is a native <label>, and the description or error is linked with aria-describedby.
Clicking the padding or the leading icon focuses the input, like a native field.
Fields without a visible label need an aria-label.
Buttons inside trailing need their own aria-label and stay in the tab order after the input.