Find out what's new in Tiptap Editor 3.0

Integrate the Label UI component

A flexible label component that provides consistent typography for form labels and UI element labels, with smart interaction handling to prevent unwanted text selection.

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add label

Usage

import { Label } from '@/components/tiptap-ui-primitive/label'

export default function MyComponent() {
  return (
    <div>
      {/* Basic Label as div (default) */}
      <Label>Section Title</Label>

      {/* Label as HTML label element */}
      <Label as="label" htmlFor="email">
        Email Address
      </Label>

      {/* Label with custom styling */}
      <Label className="text-blue-600">Custom Styled Label</Label>

      {/* Label with click handler */}
      <Label as="label" htmlFor="terms" onClick={() => console.log('Label clicked')}>
        Terms and Conditions
      </Label>
    </div>
  )
}

Props

Label

A flexible label component that can render as either a label or div element.

NameTypeDefaultDescription
as"label" | "div""div"The HTML element to render