Integrate the Input UI component

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

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add input

Usage

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>
  )
}