---
title: "Integrate the Label UI component"
description: "Integrate a semantic label component for forms and UI elements. Supports both label and div elements with consistent styling. Learn more in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/label"
---

# Integrate the Label UI component

Integrate a semantic label component for forms and UI elements. Supports both label and div elements with consistent styling. Learn more in the docs.

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

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

## Install

You can add the primitive via Tiptap CLI

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

## Usage

```tsx
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 |