کامپوننت‌های تعاملی

این ورودی‌ها با صفحه‌کلید کنترل می‌شوند و فوکوس خود را مدیریت می‌کنند.

<Box className="flex-col gap-1 p-1">  <Input placeholder="my-text-app" autoFocus />  <Select options={regions} value={region} onChange={setRegion} />  <Tabs tabs={plans} activeTab={plan} onChange={setPlan} variant="pill" /></Box>

#فوکوس

کلیدهای Tab و Shift+Tab فوکوس را به‌صورت چرخه‌ای جابه‌جا می‌کنند. ویژگی autoFocus هنگام نصب کامپوننت، فوکوس را می‌گیرد.

const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");

ویرایشگرهای دارای فوکوس، رویدادهای کلیدهای خود را مصرف می‌کنند، بنابراین تایپ کردن 1 هرگز میان‌بر سراسری را فعال نمی‌کند.

#<Input>

ورودی تک‌خطی با ویرایش به سبک readline.

#<Textarea>

ویرایشگر متن چندخطی. کلید Enter متن را ارسال می‌کند و کلید Shift+Enter خط جدیدی اضافه می‌کند.

<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} />

#<Select>

فهرست گزینه‌های قابل کنترل با صفحه‌کلید، با جست‌وجوی تقریبی اختیاری.

#<Tabs>

<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />

#نشانگر بدون فوکوس

وقتی صفحه فوکوس را از دست می‌دهد، نشانگرها ثابت می‌مانند و فریم‌ها متوقف می‌شوند تا بتوانید متن کنسول را انتخاب و کپی کنید.