Input

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

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/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.

Profile URL

neonkit.dev/

That one is taken. Try aadi-dev.

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

Secret key

Read-only. Roll the key from the dashboard if it leaks.

Billing email

Managed by your organization owner.

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.	`—`
`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` 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.	`—`
`containerClassName`	`string` Classes for the outer block with the label and message. Use it for width and margins.	`—`

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.