Copy page

Input

An input component for forms and user input.

Import

Code
import { Input } from "zudoku/ui/Input";

Basic Usage

Code
<Input placeholder="Enter your email" />

Input Types

Text Input

Code
<Input type="text" placeholder="Text input" />

Email Input

Code
<Input type="email" placeholder="Email input" />

Password Input

Code
<Input type="password" placeholder="Password input" />

Number Input

Code
<Input type="number" placeholder="Number input" />

With Label

Code
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

Disabled State

Code
<Input disabled placeholder="Disabled input" />

File Input

Code
<Input type="file" />

Custom Styling

The Input component accepts all standard input HTML attributes and can be customized with additional className:

Code
<Input className="w-full max-w-xs" placeholder="Custom styled input" />