Components

Input

A form input field. Pair with Field to add a label, description, or error message.

example.tsx

Import

tsx

import { AppInput } from "@/components/primitives/AppInput"

Examples

Email

example.tsx

Password with toggle

example.tsx

With icon

example.tsx

Field — with description

example.tsx

Full name

This is your public display name.

Field — required

example.tsx

Email address*

We will never share your email.

Field — invalid

example.tsx

Username

Username must be at least 3 characters.

Grid

example.tsx

First name

Last name

With badge

example.tsx

API KeyOptional

Leave blank to use the default key.

Input group

example.tsx

Website

https://

Button group

example.tsx

File

example.tsx

Attachment

Disabled

example.tsx

API Reference

AppInput extends all native <input> HTML attributes.

Prop	Type	Description
type	"text" \| "email" \| "password" \| "number" \| "tel" \| "url" \| "file" \| "search"	The input type. Defaults to text.
placeholder	string	Placeholder text displayed when the field is empty.
disabled	boolean	Prevents interaction and applies a muted visual style.
className	string	Additional Tailwind classes merged via cn(). Applied after base styles, so it always wins.

Source

src/components/primitives/AppInput.tsx

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

function AppInput(props: React.ComponentProps<typeof Input>) {
  return <Input {...props} />
}

export { AppInput }