Input

Stable

Form controls for capturing user text data with a high-tech aesthetic.

Examples

Default Input

tsx
<Input placeholder="Enter access code..." />

Neon Variant

tsx
<Input variant="neon" placeholder="Search logs..." />

With Icons

tsx
<div className="flex flex-col gap-4">
  <Input leftIcon={<Terminal className="w-4 h-4" />} placeholder="Command..." />
  <Input rightIcon={<Lock className="w-4 h-4 text-slate-500" />} type="password" placeholder="Password" />
</div>

API Reference

PropertyDescriptionTypeDefault
variantThe visual style variant."default" | "neon" | "glass" | "ghost""default"
leftIconIcon to render inside the left of the input.React.ReactNode-
rightIconIcon to render inside the right of the input.React.ReactNode-