Input

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/input.tsx. Registry items that depend on it install it automatically.

components/ui/input.tsx

Usage

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function Example() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="[email protected]" />
    </div>
  );
}

Examples

With a button

Inputs sit on the same 32px rhythm as buttons, so rows compose without alignment fixes.

API Reference

Input

Accepts every native input prop.

InputProps

type : string = "text": The native input type.
disabled : boolean = false: Prevents editing and mutes the field.
className ?: string: Additional CSS classes.