Input

Installation

pnpm dlx shadcn@latest add @paneui/input

Usage

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

<Input type="email" placeholder="you@example.com" />

Examples

Types

File

Disabled

Invalid

With Button

Sizes

Match the size of the button beside it.

Text size on phones

Field text matches the control size on every screen (13px at the default size), the same as the button beside it. iOS Safari zooms into a focused field whose text is under 16px. To stop that, mount iOS Zoom Lock once (recommended, opt-in); or add max-md:text-base to a field to give it 16px text on phones.

API Reference

Built on the Input primitive. Only the props this library adds or changes are listed; everything else passes through.

Text field that takes any native type. It adds no props of its own. Also accepts every prop of Input.

size= "default": "xs" | "sm" | "default" | "lg"; Height 24 / 28 / 32 / 36px, the Button heights. Inside a sized Field it takes the field's size.
htmlSize: number; The native size attribute (width in characters).

Prop	Type	Default	Description
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height 24 / 28 / 32 / 36px, the Button heights. Inside a sized `Field` it takes the field's size.
htmlSize	number	—	The native `size` attribute (width in characters).

data-size: The resolved size.

Data attribute	Description
data-size	The resolved size.