برچسب (Label)

معرفی

کامپوننت Label برای برچسب‌گذاری فیلدهای فرم استفاده می‌شود. بر پایه Radix UI Label ساخته شده و به‌صورت خودکار با فیلد مرتبط لینک می‌شود.

چه زمانی استفاده کنیم:

• برای برچسب‌گذاری فیلدهای فرم (input، select، textarea و ...)
• وقتی نیاز به لینک شدن خودکار بین برچسب و فیلد با htmlFor دارید
• در ترکیب با Input یا سایر فیلدهای فرم بدون استفاده از Field یا Form

چه زمانی استفاده نکنیم:

• برای عناوین بخش — از h2، h3 استفاده کنید
• وقتی از FormLabel در context react-hook-form هستید — از FormLabel استفاده کنید

استفاده

import { Label } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <div>
      <Label htmlFor="email">ایمیل</Label>
      <input id="email" type="email" />
    </div>
  )
}

با Input

import { Label, Input } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="username">نام کاربری</Label>
      <Input id="username" placeholder="نام کاربری خود را وارد کنید" />
    </div>
  )
}

حالت غیرفعال

برچسب به‌صورت خودکار با حالت disabled فیلد مرتبط همگام می‌شود:

<div className="grid gap-2">
  <Label htmlFor="disabled-input">فیلد غیرفعال</Label>
  <Input id="disabled-input" disabled />
</div>

Props

حالت‌ها و انواع

با Input

ترکیب Label با htmlFor و Input با id مطابق.

حالت غیرفعال

برچسب به‌صورت خودکار با حالت disabled فیلد مرتبط همگام می‌شود و opacity کاهش می‌یابد.

راهنمای استفاده

دسترسی‌پذیری

• همیشه از htmlFor با id فیلد مرتبط استفاده کنید
• کلیک روی Label باعث focus شدن فیلد می‌شود
• در حالت disabled، Label به‌صورت خودکار opacity کاهش می‌یابد
• بر پایه Radix UI Label با پشتیبانی کامل از screen reader

کامپوننت‌های مرتبط

• اگر نیاز به Label + Input + error message یکجا دارید → Field
• اگر در context فرم react-hook-form هستید → Form (از FormLabel استفاده کنید)
• اگر نیاز به input ساده بدون wrapper دارید → Input