تکست اریا

کامپوننت Text Area یک ورودی متنی چندخطی است که به کاربر اجازه می‌دهد متون طولانی‌تر مانند توضیحات، کلیدهای SSH، پیکربندی‌های چندخطی یا پیام‌های پشتیبانی را وارد و ویرایش کند. این کامپوننت تمامی ویژگی‌های یک فیلد متنی استاندارد (Text Input) را داراست، اما با ابعاد عمودی گسترده‌تر و قابلیت تغییر اندازه (Resize).

نمونه زنده

defaultSelect option

قابل تغییر سایزSelect option

بدون آیکونSelect option

آناتومی

کادر متنی چندخطی از اجزای زیر تشکیل شده است.

با هاور روی شماره‌های روی Text Area (یا آیتم‌های لیست کنار آن)، هر بخش برجسته می‌شود.

1

توضیحات منبع را وارد کنید... 2

⋰3

1. 1Input Container
2. 2Placeholder
3. 3Resize Handle

1. کادر ورودی (Input Container): محلی که متن تایپ شده در آن قرار می‌گیرد و دارای اسکرول عمودی داخلی است.
2. متن پیش‌فرض (Placeholder): متن راهنمای کم‌رنگ داخل کادر که نمونه‌ای از فرمت ورودی را نشان می‌دهد.
3. دستگیره تغییر سایز (Resize Handle - اختیاری): آیکونی در گوشه پایین (سمت چپ در RTL) برای تغییر اندازه عمودی توسط کاربر.

ساختار

ابعاد و فواصل این کامپوننت برای حفظ خوانایی متون طولانی طبق توکن‌های سرخآب تنظیم شده است.

با هاور روی بخش‌های Text Area (یا روی آیتم‌های لیست زیر آن)، اندازه‌ی مرتبط با هر بخش نمایش داده می‌شود.

توضیحات منبع را وارد کنید...

4px

86px

8px

1px

1. 86pxDefault Height
2. 4pxInner Padding
3. 8pxCorner Radius
4. 1pxBorder Width
5. AllAll Sizes

۱. انحنا و ابعاد پیش‌فرض

• انحنای لبه‌ها (Border Radius): مقدار 8px هماهنگ با سایر فیلدهای ورودی.
• ارتفاع پیش‌فرض (Default Height): ارتفاع استاندارد بدون rows برابر 86px است؛ حداقل ارتفاع متن 48px.
• ضخامت خط حاشیه (Border Width): مقدار 1px

۲. فواصل داخلی (Internal Spacing)

• پدینگ باکس متن: مقدار 4px از لبه‌ها.
• پدینگ داخلی متن: مقدار 4px
• فاصله متن تا آیکون: مقدار 4px.

انواع

کامپوننت Text Area در دو ورینت اصلی Default و Error ارائه می‌شود که کانتکس و وضعیت کلی سلامت ورودی را تعیین می‌کنند:

(نمایش مقایسه‌ای بین ورینت Default و ورینت Error که تغییر رنگ بردر را نمایش می‌دهد)

۱. ورینت دیفالت (Default Variant)

حالت استاندارد کامپوننت برای دریافت اطلاعات عادی بدون وجود خطا.

• استایل بصری: بردر خنثی که در حالت فوکوس تغییر رنگ می‌دهد.
• کاربرد: فرم‌ها و بخش‌های ورودی در حالت پایدار و پیش‌فرض.

۲. ورینت ارور (Error Variant)

این ورینت زمانی فعال می‌شود که داده‌ی وارد شده با قوانین اعتبارسنجی (Validation) مغایرت داشته باشد.

• **تغییرات بصری:حاشیه قرمز (Danger Border): رنگ بردر کادر به قرمز استاندارد سیستم تغییر می‌یابد.

وضعیت‌ها

کادر متنی چندخطی در ۵ وضعیت بصری رندر می‌شود:

وضعیت (State)	کارکرد
Default	حالت پیش‌فرض ورودی برای دریافت داده از کاربر، بدون خطا یا وضعیت خاص. مناسب تعاملات عمومی با فرم‌ها.
Hover	زمانی که کاربر روی ورودی قرار می‌گیرد، نشان‌دهنده قابل کلیک یا قابل تمرکز بودن آن.
Focus	زمانی که ورودی در حالت تمرکز قرار می‌گیرد و آماده دریافت داده است، با یک خط دور ورودی همراه است.
Press	ورودی غیرفعال است و نمی‌توان داده‌ای در آن وارد کرد. ورودی در این حالت خاکستری می‌شود.
Disabled	پس‌زمینه خاکستری + متن غیرقابل ویرایش
Read-only	ورودی تنها برای مشاهده است و کاربر نمی‌تواند در آن تغییری ایجاد کند، مناسب نمایش داده‌های غیرقابل ویرایش.

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

بایدها

• Placeholder کاربردی: از Placeholder برای نمایش فرمت ورودی (مثلا یک نمونه کامنت یا فرمت کانفیگ) استفاده کنید، نه تکرار عنوان فیلد.
• اسکرول هوشمند: اگر کادر غیرقابل تغییر سایز است، حتما اسکرول داخلی را فعال کنید تا متن‌های طولانی پنهان نشوند.

نبایدها

• از Text Area برای ورودی‌های تک‌خطی (مانند نام، ایمیل یا آدرس IP) استفاده نکنید؛ برای این موارد Text Input اولویت دارد.
• اجازه تغییر سایز افقی (Horizontal Resize) را به کاربر ندهید، زیرا باعث شکستن گریدبندی و لایه‌بندی صفحه می‌شود.

الگوی مصرف در کامپوننت فیلد

در دیزاین سیستم سهراب، کامپوننت Text Area به‌صورت مستقل برای مدیریت لیبل و پیام خطا استفاده نمی‌شود، بلکه به‌عنوان یک ورودی (Control Input) در داخل کامپوننت والد یعنی Field قرار می‌گیرد.

کامپوننت Field مسئولیت مدیریت لیبل (Label)، نشانگر الزامی بودن (Required)، متن راهنما (Helper Text) و پیام خطا (Error Message) را بر عهده دارد و Text Area صرفا کادر دریافت ورودی را رندر می‌کند.

۱. چه زمانی باید Text Area را داخل Field قرار دهیم؟

همواره در عموم فرم‌ها و سناریوهای استاندارد، Text Area باید حتما در داخل کامپوننت Field مصرف شود.

موارد الزام استفاده از Field:

• فرم‌های پیکربندی و ثبت اطلاعات: هر جا که کاربر نیاز دارد بداند چه دیتایی را وارد می‌کند (نیاز به Label دارد).
• ورودی‌های دارای اعتبارسنجی (Validation): زمانی که احتمال بروز خطا در فرمت یا طول متن وجود دارد و باید پیام Error تحت کنترل Field نمایش داده شود.

۲. چه زمانی می‌توان Text Area را بدون Field (مستقل) استفاده کرد؟

در موارد نادر و استثنایی زیر، می‌توان Text Area را به‌صورت مستقل (Standalone) و بدون کامپوننت Field استفاده کرد:

• چت‌ها و سیستم‌های تیکتینگ: کادرهای ارسال پیام در پایین صفحات چت که نیازی به لیبل بالای کادر ندارند و نقش آن‌ها از طریق کانتکس صفحه مشخص است.
• ویرایشگرهای کُد یا کانفیگ اختصاصی: کادرهای ورودی عریض که داخل یک Section یا Modal قرار گرفته‌اند و عنوانِ سکشن نقش راهنما را ایفا می‌کند.
• جداول پیشرفته (In-table Editing): زمانی که ویرایش یک سلول جدول به‌صورت مستقیم (Inline) تبدیل به یک Text Area کوچک می‌شود.