Input — ورودی متن

فیلد ورودی متن مبتنی بر TextFieldکپی کد از react-aria-components است. رفتار، فوکوس و ارتباط برچسب و خطا از React Aria می‌آید؛ ظاهر فقط با توکن‌ها و صفت‌های data-*کپی کد تعیین می‌شود. برای متن چندخطی همین کامپوننت با multilineکپی کد کار می‌کند؛ جدا از آن فیلد textarea نداریم.

وضعیت: beta · لایه: ۳ (@tokapps/tukکپی کد) · کد: packages/tuk/src/controls/input/کپی کد

import { Input } from '@tokapps/tuk';

نمونهٔ زنده

همهٔ نمونه‌ها زنده‌اند؛ ورودی‌ها را لمس کنید، از آن‌ها خارج شوید و حالت‌های خطا، فقط‌خواندنی و بارگذاری را ببینید.

کد قابل کپی

فیلد ساده با توضیح

import { Input } from '@tokapps/tuk';export function NameField() {  return <Input label="نام و نام خانوادگی" description="همان‌طور که در کارت ملی آمده" isRequired />;}

ایمیل با اعتبارسنجی

<Input  type="email"  label="ایمیل"  placeholder="name@example.com"  isInvalid={!isValidEmail(email)}  errorMessage="نشانی ایمیل معتبر نیست"  value={email}  onChange={setEmail}/>

متن چندخطی

<Input multiline rows={4} label="شرح ایده" /><Input multiline autosize rows={2} maxRows={6} label="شرح ایده" /><Input multiline rows={3} maxLength={280} label="توضیح کوتاه" />

کد یا شناسه (چپ‌به‌راست با فونت مونو)

<Input label="شناسه" defaultValue="TOK-2048" code isReadOnly />

همهٔ پیکربندی‌ها

به‌علاوه تمام پراپ‌های TextFieldکپی کد از react-aria-components: valueکپی کد / defaultValueکپی کد، onChangeکپی کد، nameکپی کد، autoCompleteکپی کد، isRequiredکپی کد، isInvalidکپی کد، isReadOnlyکپی کد، isDisabledکپی کد، validateکپی کد و maxLengthکپی کد.

حالت‌ها

RTL و متن ترکیبی

محتوای کاربر dir="auto"کپی کد است؛ یعنی یک نام فارسی راست‌به‌چپ و یک عنوان انگلیسی چپ‌به‌راست نوشته می‌شود. ایمیل، نشانی، تلفن، عدد، گذرواژه و codeکپی کد همیشه ltrکپی کد هستند و با text-align: match-parentکپی کد هم‌تراز با جهت صفحه می‌مانند. تمام فاصله‌ها منطقی‌اند (inlineکپی کد/blockکپی کد)، پس با dir="rtl"کپی کد بدون تغییر کد درست می‌چینند.

کیبورد و صفحه‌خوان

• Tabکپی کد ورود و خروج فوکوس؛ Enterکپی کد در فیلد تک‌خطی فرم را می‌فرستد.
• دکمهٔ گذرواژه با Enterکپی کد یا Spaceکپی کد نمایش و پنهان می‌شود؛ برچسبش با حالت عوض می‌شود.
• برچسب با <label>کپی کد متصل است؛ توضیح و پیام خطا با aria-describedbyکپی کد خوانده می‌شوند.
• خطا با aria-invalidکپی کد اعلام می‌شود و همراه آیکون و متن است؛ رنگ تنها نشانه نیست.
• هدف لمسی حداقل ۴۴px است.

صدا، حرکت، چاپ

• صدا: پیش‌فرض tapکپی کد است و فقط پس از ترک فیلد پخش می‌شود (نه با هر کلید). معادل بصری آن حاشیه و پیام خطاست. sound={false}کپی کد برای فیلدهای احراز هویت یا حساس.
• حرکت: تغییر رنگ حاشیه با --tds-input-transitionکپی کد. در prefers-reduced-motionکپی کد زمان گذار ۱ms و آیکون بدون چرخش.
• چاپ: print="show"کپی کد پیش‌فرض است؛ مقدار با کادر ساده چاپ می‌شود و دکمهٔ گذرواژه و آیکون بارگذاری پنهان می‌شوند.

توکن‌ها

• معنایی: --tds-fg-defaultکپی کد، --tds-fg-mutedکپی کد، --tds-danger-defaultکپی کد، --tds-focus-ringکپی کد، --tds-surface-hoverکپی کد.
• کامپوننتی: --tds-input-*کپی کد (پس‌زمینه، حاشیه در چهار حالت، شعاع، فاصله‌ها، ارتفاع textareaکپی کد، زمان گذار). تعریف کامل در packages/tokens/src/component/input.cssکپی کد و فهرست ماشینی در Input.tokens.tsکپی کد.

نکات

• برای انتخاب از فهرست ثابت از Select یا RadioGroup استفاده کنید.
• برای تاریخ از DatePicker و برای کد یک‌کاراکتری از CodeCells استفاده کنید.
• برای مبلغ پولی از CurrencyInput استفاده کنید تا نماد ارز و قالب محلی بماند.