Input

A flexible and accessible input field.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add input

Variants & Examples

Basic Input

A standard text input field.

Code for Basic Input

1import { Input } from "@/components/ui/input";
2import { Label } from "@/components/ui/label";
3
4export function MyInput() {
5  return (
6    <div className="grid w-full max-w-sm items-center gap-1.5">
7      <Label htmlFor="email">Email</Label>
8      <Input type="email" id="email" placeholder="Email" />
9    </div>
10  );
11}

Props

These are the available props for the Input component:

Prop	Type	Description	Default
type	string	The type of the input (e.g., 'text', 'email', 'password').	"text"
placeholder	string	Placeholder text for the input field.	-
id	string	The unique ID for the input element.	-
disabled	boolean	Whether the input is disabled.	false