Input

Displays a form input field or a component that looks like an input field.

Installation

The Input component is part of the Anya UI registry:


import { Input } from "@/src/registry/anya/ui/input";

Usage


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

Demo

Input Types

States

With Labels

Name

Password

Form Examples

File Input

Upload File

Picture

Examples

Default


import { Input } from "@/src/registry/anya/ui/input";
 
export function InputDemo() {
  return <Input type="email" placeholder="Email" />
}

File

Picture


import { Input } from "@/src/registry/anya/ui/input";
import { Label } from "@/registry/anya/ui/label";
 
export function InputFile() {
  return (
    <div className="grid w-full max-w-sm items-center gap-3">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  )
}

Disabled


import { Input } from "@/src/registry/anya/ui/input";
 
export function InputDisabled() {
  return <Input type="email" placeholder="Email" disabled />
}

Error


import { Input } from "@/src/registry/anya/ui/input";
 
export function InputError() {
  return <Input type="email" id="email" placeholder="Email" aria-invalid={true} />
}

With Label


import { Input } from "@/src/registry/anya/ui/input";
import { Label } from "@/registry/anya/ui/label";
 
export function InputWithLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-3">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

With Button


import { Button } from "@/src/registry/anya/ui/button";
import { Input } from "@/src/registry/anya/ui/input";
 
export function InputWithButton() {
  return (
    <div className="flex w-full max-w-sm items-center gap-2">
      <Input type="email" placeholder="Email" />
      <Button type="submit" variant="outline">
        Subscribe
      </Button>
    </div>
  )
}

API Reference

Input

The Input component is a wrapper around the native input element that adds consistent styling and behavior.

Prop	Type	Default	Description
`type`	`string`	`"text"`	The input type (text, email, password, file, etc.)
`placeholder`	`string`	-	Placeholder text displayed when input is empty
`disabled`	`boolean`	`false`	Whether the input is disabled
`aria-invalid`	`boolean`	`false`	Whether the input is invalid
`class`	`string`	-	Additional CSS classes
`...props`	`React.ComponentProps<"input">`	-	All standard input HTML attributes

Exports

Input - The main Input component