Input
Displays a form input field.
Installation
Install this component via the shadcn CLI.
npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/input.jsonOr install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json
Preview
Interactive component demo.
Types
With Label
States
With File
Usage
How to use this component in your code.
{/* Types */}
<Input type="text" placeholder="Text" />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="search" placeholder="Search..." />
{/* With Label */}
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />
{/* States */}
<Input disabled placeholder="Disabled" />
<Input aria-invalid="true" placeholder="Error" />
{/* File */}
<Input type="file" />