Input

Installation

npx bearnie add input

import Input from "@/components/ui/input/Input.astro";
import Label from "@/components/ui/label/Label.astro";

Usage

import { Input } from "@/components/ui/input"

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

Examples

With label

<div class="grid gap-2 w-full max-w-sm">
<Label for="email">Email</Label>
<Input type="email" id="email" placeholder="m@example.com" />
</div>

Password

Disabled

With left icon

<div class="relative w-full max-w-sm">
<Mail class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
<Input type="email" placeholder="Email" class="pl-10" />
</div>

With right icon

<div class="relative w-full max-w-sm">
<Input type="search" placeholder="Search..." class="pr-10" />
<Search class="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
</div>

With button

<div class="flex gap-2 w-full max-w-sm">
<Input type="email" placeholder="Email" />
<Button>Subscribe</Button>
</div>

File

Upload file

<div class="grid gap-2 w-full max-w-sm">
<Label for="file">Upload file</Label>
<Input id="file" type="file" />
</div>

Anatomy

Input - A single form input element

Props

Prop	Type	Default	Description
type	text \| email \| password \| search \| tel \| url \| number	text	Input type
placeholder	string	-	Placeholder text
disabled	boolean	false	Disables the input
required	boolean	false	Makes the field required
name	string	-	Form field name
id	string	-	Element ID
value	string	-	Input value
class	string	-	Additional CSS classes