Input

Source code

A single-line text field.

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

export default function InputDemo() {
  return <Input placeholder="Your name" className="w-64" />;
}

Sizes

Three sizes to fit different layouts.

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

const sizes = ["sm", "md", "lg"] as const;

export default function InputSizesDemo() {
  return (
    <div className="flex w-64 flex-col gap-3">
      {sizes.map((size) => (
        <Input key={size} size={size} placeholder={`Size ${size}`} />
      ))}
    </div>
  );
}

Disabled

Prevent interaction with the field.

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

export default function InputDisabledDemo() {
  return <Input disabled defaultValue="Can't edit this" className="w-64" />;
}

Invalid

Shows an error state when the value is invalid.

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

export default function InputInvalidDemo() {
  return <Input data-invalid defaultValue="not-an-email" className="w-64" />;
}

API

PropTypeDefault
size"sm" | "md" | "lg""md"

Plus everything from Base UI Input, including value, defaultValue, onValueChange, and the native input attributes.