1

Input

Text field foundation with start/end adornment slots, size variants, and a signature animated focus ring that draws in on focus.

Dependencies

motionclass-variance-authority

Interaction Type

Focus the field — accent ring draws in (opacity + scale 0.98→1 settle). Start/end adornments for icons or kbd hints. Invalid state recolors ring and border.

Props

Options you can pass to customize this component.

Prop
Type
Description
size
'sm' | 'md'

Input size variant. Defaults to md.

startAdornment
ReactNode

Icon or element rendered before the input.

endAdornment
ReactNode

Icon or element rendered after the input.

label
string

Label text above the input.

error
string

Error message below the input. Triggers invalid state.

containerClassName
string

Additional classes for the outer wrapper.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/input.json

How to use

<Input
  label="Email"
  placeholder="you@example.com"
  startAdornment={<MailIcon />}
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/input.json