---
title: Input
description: A native input element that automatically works with Field for labeling and validation.
links:
  doc: https://base-ui.com/react/components/input
  anatomy: https://base-ui.com/react/components/input#anatomy
  api: https://base-ui.com/react/components/input#api-reference
---

```tsx
import { Input } from "@/components/ui/input";

export function InputDemo() {
  return <Input type="email" placeholder="Email" className="max-w-sm" />;
}
```

## Installation

<ComponentSource name="input" title="components/ui/input.tsx" />

## Usage

```tsx
import { Input } from "@/components/ui/input";
```

```tsx
<Input />
```

## Examples

### Sizes

```tsx
import { Input } from "@/components/ui/input";

export function InputDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Input placeholder="Name" size="xs" />
      <Input placeholder="Name" size="sm" />
      <Input placeholder="Name" size="default" />
      <Input placeholder="Name" size="lg" />
      <Input placeholder="Name" size="xl" />
    </div>
  );
}
```

### File Input

```tsx
import { Input } from "@/components/ui/input";

export function InputDemo() {
  return (
    <div className="flex flex-col gap-2">
      <label htmlFor="picture">Picture</label>
      <Input id="picture" type="file" />
    </div>
  );
}
```

### Disabled

```tsx
import { Input } from "@/components/ui/input";

export function InputDemo() {
  return <Input placeholder="Enter your name" disabled className="max-w-sm" />;
}
```

## API Reference

### Input Props

<ApiReferenceAccordion
  type={{
    size: {
      description: "The size of the input component.",
      type: `'xs' | 'sm' | 'default' | 'lg' | 'xl'`,
      default: `'default'`,
    },
  }}
/>