Checkbox

کامپوننت x-checkbox برای نمایش و مدیریت چک‌باکس‌های فرم با امکانات پیشرفته و قابل شخصی‌سازی استفاده می‌شود. این کامپوننت از ویژگی‌هایی مانند نمایش لیبل، حالت فقط‌خواندنی، غیرفعال، پیام راهنما، نمایش خطا و کنترل ظاهر و رفتار پشتیبانی می‌کند.

---

ویژگی‌ها

• پشتیبانی از لیبل اصلی و لیبل گزینه (optionLabel)
• امکان تعیین مقدار اولیه (checked) و مقدار دلخواه (value)
• قابلیت فقط‌خواندنی (readonly) و غیرفعال (disabled)
• پشتیبانی از نمایش پیام راهنما (tooltip) و پیام غیرفعال بودن (disabledTooltip)
• امکان تعیین جهت نمایش (افقی یا عمودی) با پراپ orientation
• نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
• امکان شخصی‌سازی کلاس‌های CSS برای خود چک‌باکس و کانتینر

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
name	string	—	نام فیلد (اجباری)
label	string	null	لیبل اصلی چک‌باکس
labelSpaceReserved	bool	false	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
id	string	null	شناسه یکتا برای چک‌باکس
optionLabel	string	null	لیبل کنار خود چک‌باکس (معمولاً سمت راست)
checked	bool	false	آیا چک‌باکس به‌صورت پیش‌فرض تیک خورده باشد؟
readonly	bool	false	فقط‌خواندنی بودن چک‌باکس
disabled	bool	false	غیرفعال بودن چک‌باکس
required	bool	false	اجباری بودن فیلد
value	string	null	مقدار ارسالی چک‌باکس در صورت انتخاب
class	string	null	کلاس CSS سفارشی برای خود چک‌باکس
containerClass	string	null	کلاس CSS سفارشی برای کانتینر
messageStyle	string	"message"	استایل نمایش پیام (message, tooltip, ...)
defaultMessageType	string	"info"	نوع پیام پیش‌فرض (info, error, success, ...)
defaultMessage	string	null	پیام پیش‌فرض برای نمایش
tooltip	string	null	پیام راهنما هنگام هاور روی چک‌باکس
disabledTooltip	string	null	پیام راهنما هنگام غیرفعال بودن چک‌باکس
suppressLogicMessages	bool	false	عدم نمایش پیام‌های منطقی
orientation	string	"vertical"	جهت نمایش: vertical (ستونی) یا horizontal (سطری)

---

مثال‌ها

نمونه پایه

<x-checkbox 
    name="terms" 
    id="terms2" 
    label="شرایط و ضوابط" 
    optionLabel="من با شرایط و ضوابط موافقم"
    tooltip="test" 
/>

<x-checkbox
    name="terms"
    id="terms"
    label="شرایط و ضوابط"
    optionLabel="من با شرایط و ضوابط موافقم"
    :checked="true"
    :readonly="false"
    :disabled="true"
    class="custom-checkbox"
    containerClass="my-custom-container"
    defaultMessage="لطفا حداقل یک اندازه را انتخاب کنید."
    defaultMessageType="warning"
    messageStyle="message"
    required="true"
    tooltip="test"
/>