# Input (/docs/components/input)



<ComponentPreview name="input-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Input for short free-form text, numbers, email addresses, URLs, search terms, and file selection.

Input is a low-level control. In forms, wrap it with Field so users get a label, description, error, and disabled state in a consistent layout.

## Anatomy [#anatomy]

An input has a value, placeholder, type, size, disabled state, and optional surrounding controls. The placeholder should never replace a real label.

## Usage guidance [#usage-guidance]

Choose the native input type that matches the data. Use `email` for email, `search` for search, `file` for files, and so on. Use Textarea for longer multi-line text.

## Accessibility [#accessibility]

Always provide a label. Use clear validation messages and keep focus styles visible.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add input
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

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

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

```tsx
<Input />
```

## Examples [#examples]

The examples show sizes, disabled state, file input, labels, attached buttons, and form usage.

For accessible labelling and validation, prefer using the `Field` component to wrap inputs, or the `FieldControl` component. See some [related examples](/ui/docs/components/field).

### Small Size [#small-size]

<ComponentPreview name="input-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Large Size [#large-size]

<ComponentPreview name="input-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Disabled [#disabled]

<ComponentPreview name="input-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### File [#file]

<ComponentPreview name="input-file" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Label [#with-label]

<ComponentPreview name="input-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### With Button [#with-button]

<ComponentPreview name="input-with-button" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Form Integration [#form-integration]

<ComponentPreview name="form-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />