---
title: "Integrate the Input UI component"
description: "Integrate a simple input field component for text entry. Perfect for forms, search fields, and user input. Learn more in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/input"
---

# Integrate the Input UI component

Integrate a simple input field component for text entry. Perfect for forms, search fields, and user input. Learn more in the docs.

A simple input field component that provides consistent styling and behavior for text entry, built with accessibility in mind.

> **Interactive demo:** [input](https://template.tiptap.dev/preview/tiptap-ui-primitive/input)

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add input
```

## Usage

```tsx
import { Input, InputGroup } from '@/components/tiptap-ui-primitive/input'

export default function MyComponent() {
  const [value, setValue] = React.useState('')

  return (
    <div className="space-y-4">
      {/* Basic Input */}
      <Input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter your text..."
      />

      {/* Input with Group */}
      <InputGroup>
        <Input type="email" placeholder="Enter your email..." />
      </InputGroup>

      {/* Input with different types */}
      <Input type="password" placeholder="Enter password..." />

      {/* Input with clamp styling */}
      <Input
        type="text"
        placeholder="This text will be clamped..."
        className="tiptap-input-clamp"
      />
    </div>
  )
}
```