3

Label

An accessible, styled label element for form controls.

Last updated August 9, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
 
export function LabelDemoExample() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="label-demo-terms" />
      <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
    </div>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/label.json

Usage

import { Label } from "@/components/ui/label"
 
export function Example() {
  return <Label htmlFor="email">Email</Label>
}

With Input

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
 
export function LabelInputExample() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="label-input-email">Email</Label>
      <Input id="label-input-email" type="email" placeholder="you@example.com" />
    </div>
  )
}

RTL

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
 
export function LabelRtlExample() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="label-rtl-email">ایمیل</Label>
      <Input id="label-rtl-email" type="email" placeholder="you@example.com" />
    </div>
  )
}

API Reference

Label

Edit this page on GitHub
PreviousKbdNextMarker