Input
A styled input component for forms and user input
A form input component with consistent styling, focus states, and support for validation states.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/input.jsonCopy from the nteract/elements registry.
Usage
import { Input } from "@/registry/primitives/input"
export function Example() {
return <Input placeholder="Enter text..." />
}Examples
Default
<Input placeholder="Default input" />With Label
<label htmlFor="kernel" className="text-sm font-medium">
Kernel Name
</label>
<Input id="kernel" placeholder="python3" />File Input
<Input type="file" />Disabled
<Input placeholder="Disabled input" disabled />With Default Value
<Input defaultValue="print('Hello, world!')" />Different Types
<Input type="text" placeholder="Text input" />
<Input type="email" placeholder="Email input" />
<Input type="password" placeholder="Password input" />
<Input type="number" placeholder="Number input" />
<Input type="search" placeholder="Search..." />Invalid State
The input supports aria-invalid for validation states:
<Input aria-invalid="true" defaultValue="invalid input" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | "text" | Input type (text, email, password, number, etc.) |
placeholder | string | — | Placeholder text |
disabled | boolean | false | Disable the input |
className | string | — | Additional CSS classes |
...props | InputHTMLAttributes | — | All standard input attributes |
Accessibility
- The input has proper focus-visible styles for keyboard navigation
- Supports
aria-invalidfor validation states - Use with
<label>elements for proper accessibility