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.
Name | Type | Default | Description |
---|---|---|---|
as | "label" | "div" | "div" | The HTML element to render |