GooseUI

Input

Previous
Next

Displays a text input field

Preview

Installation

npm
pnpm
yarn
bun
npx shadcn@latest add @gooseui/input

Usage

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

export function MyInput() {
  return <Input type="email" placeholder="Email" />
}

Examples

Default

Disabled

With Label

<div className="grid gap-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="email@example.com" />
</div>

File Input

With Validation Error

Please enter a valid email address

<div className="grid gap-2">
  <Label htmlFor="email">Email</Label>
  <Input
    id="email"
    type="email"
    placeholder="email@example.com"
    aria-invalid="true"
  />
  <p className="text-sm text-destructive">
    Please enter a valid email address
  </p>
</div>

Props

Input accepts all standard HTML attributes for <input>