# Input
URL: /design/components/input

A single-line field with a label, drawn with a hairline.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component InputSpecimen omitted]

Code for InputSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

function InputSpecimen(): ReactNode {
  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Label htmlFor="specimen-email">Email</Label>
      <Input id="specimen-email" type="email" placeholder="you@example.com" />
    </div>
  );
}
```

## Installation

Install the dependencies:

- packages

  - @base-ui/react

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

- code

  import \* as React from "react"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { cn } from "@/lib/utils"; function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( \<InputPrimitive type={type} data-slot="input" className={cn( "file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 bg-muted/60 focus-visible:bg-background h-9 w-full min-w-0 rounded-lg border border-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 md:text-sm", className, )} {...props} /> ); } export { Input };

* title

  components/ui/input.tsx

* copyText

  import \* as React from "react"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { cn } from "@/lib/utils"; function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( \<InputPrimitive type={type} data-slot="input" className={cn( "file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 bg-muted/60 focus-visible:bg-background h-9 w-full min-w-0 rounded-lg border border-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 md:text-sm", className, )} {...props} /> ); } export { Input };

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  import \* as React from "react"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { cn } from "@/lib/utils"; function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( \<InputPrimitive type={type} data-slot="input" className={cn( "file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 bg-muted/60 focus-visible:bg-background h-9 w-full min-w-0 rounded-lg border border-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 md:text-sm", className, )} {...props} /> ); } export { Input };

## 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="you@example.com" />
    </div>
  );
}
```

## Examples

### With a button

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

\[interactive preview component InputWithButtonSpecimen omitted]

Code for InputWithButtonSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

function InputWithButtonSpecimen(): ReactNode {
  return (
    <div className="flex w-full max-w-72 items-center gap-2">
      <Input type="email" aria-label="Email" placeholder="you@example.com" />
      <Button>Invite</Button>
    </div>
  );
}
```

## API Reference

### Input

Accepts every native `input` prop.

- `type`: `string` (default `"text"`) — The native input type.
- `disabled`: `boolean` (default `false`) — Prevents editing and mutes the field.
- `className?`: `string` — Additional CSS classes.