Label
برچسب دسترسپذیر فیلدهای فرم. با htmlFor به id کنترل وصل میشود؛ صفحهخوان متن را اعلام میکند و کلیک روی برچسب هم به کنترل فوکوس میدهد.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/label.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/label.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/label.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/label.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Label } from "@/components/ui/label"
<Label htmlFor="email">ایمیل</Label>
<Input id="email" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- htmlFor روی Label باید دقیقاً برابر id کنترل باشد؛ در غیر این صورت صفحهخوان رابطهٔ بین متن و کنترل را نمیفهمد.
- کلیک یا لمس متن برچسب، فوکوس (در ورودیها) یا فعالسازی (در چکباکس و رادیو) را به کنترل مرتبط منتقل میکند؛ این یعنی ناحیهٔ قابلکلیک بزرگتر از خودِ کنترل کوچک میشود.
- بهجای placeholder بهتنهایی همیشه یک Label واقعی بگذارید؛ placeholder با شروع تایپ کاربر ناپدید میشود و برای صفحهخوان هم برچسب پایدار محسوب نمیشود.
- برای فیلد الزامی، ستاره یا نشانهٔ بصری بهتنهایی کافی نیست؛ یا با متنی مثل «(الزامی)» در خودِ برچسب، یا با aria-required روی کنترل، اطلاع را به صفحهخوان هم برسانید.
مرجع API
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| htmlFor | string | — | id کنترلی که این برچسب برایش است. |
| children | React.ReactNode | — | متن برچسب، یا کنترلی که میخواهید اتصال ضمنی داشته باشد (مثال Implicit Association). |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Implicit Association
بهجای htmlFor، میتوانید کنترل را مستقیم داخل Label بگذارید؛ رابطه ضمنی برقرار میشود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Disabled
وقتی کنترل کلاس peer دارد و disabled است، برچسب با peer-disabled خودش کمرنگ و غیرقابلکلیک میشود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Inside a Fieldset
وقتی چند برچسب زیر هم میآیند، فاصلهٔ عمودی یکسان با gap روی والد تنظیم میشود، نه margin روی خودِ Label.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
الزامی و غیرفعال
ستاره برای اجباری بودن یک قرارداد دیداری رایج است؛ آن را با متنی مثل «(الزامی)» هم همراه کنید تا صفحهخوان هم بفهمد. وقتی فیلد غیرفعال است، برچسب هم باید کمرنگ شود تا هماهنگ بماند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
متن بلند (Overflow)
برچسب با فیلد در یک ستون میماند و اجازه دارد در چند سطر بشکند؛ عرض فیلد را عوض نمیکند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Implicit Association | بهجای htmlFor، میتوانید کنترل را مستقیم داخل Label بگذارید؛ رابطه ضمنی برقرار میشود. |
| Disabled | وقتی کنترل کلاس peer دارد و disabled است، برچسب با peer-disabled خودش کمرنگ و غیرقابلکلیک میشود. |
| Inside a Fieldset | وقتی چند برچسب زیر هم میآیند، فاصلهٔ عمودی یکسان با gap روی والد تنظیم میشود، نه margin روی خودِ Label. |
| الزامی و غیرفعال | فیلد اجباری در برابر فیلدی که در دسترس نیست |
| متن بلند (Overflow) | برچسبی که توضیح اضافه دارد |
دستورالعمل استفاده
برچسب همیشه به کنترلش وصل باشد
انجام بده
با htmlFor روی Label برابر id کنترل، هم صفحهخوان رابطه را میفهمد و هم کلیک روی متن، فوکوس را به ورودی میدهد.
انجام نده
متنی که فقط شکل ظاهری برچسب را دارد ولی به هیچ id ای وصل نیست، برای صفحهخوان یک پاراگراف بیربط است و کلیک رویش هم کاری نمیکند.
متن برچسب کوتاه و مشخص
۱۶ رقم، بدون فاصله یا خطتیره.
انجام بده
برچسب فقط اسم فیلد را میگوید؛ توضیح اضافه اگر لازم است، جدا زیر ورودی میآید.
انجام نده
دستورالعمل کامل داخل خودِ برچسب، هم متن را طولانی میکند و هم اسکن سریع فرم را سخت.
فیلد الزامی را در متن هم مشخص کنید
انجام بده
نشانهٔ بصری «*» را با متنی برای صفحهخوان همراه کنید، نه فقط یک نماد تنها.
انجام نده
ستارهٔ بیمتن با aria-hidden نشده و بدون هیچ اعلان دیگری، برای کاربر صفحهخوان کاملاً نامرئی است؛ او نمیفهمد فیلد الزامی است.