المكوّنات التفاعلية
<Input> و <Textarea> و <Select> و <Tabs>: التركيز والاختصارات ونسخ النص حين لا يكون التركيز على الصفحة.
تعمل حقول الإدخال هذه بلوحة المفاتيح وتدير تركيزها بنفسها.
مباشرTab next field · Enter submittsx
<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.
| Prop | الوصف |
|---|---|
value / onChange | قيمة متحكّم بها |
onSubmit | استدعاء عند الضغط على Enter |
placeholder | نص يظهر عند خلو الحقل |
mask | حرف إخفاء للقيم السرية |
<Textarea>
محرر متعدد الأسطر. يرسل Enter المحتوى، ويضيف Shift+Enter سطرًا جديدًا.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
قائمة خيارات بلوحة المفاتيح مع بحث تقريبي اختياري.
| Prop | الوصف |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | استدعاء عند الضغط على Enter |
searchable | تصفية الخيارات عند الكتابة |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />المؤشر عند فقدان التركيز
عندما تفقد الصفحة التركيز، تتجمد المؤشرات وتتوقف الإطارات، مما يتيح تحديد نص وحدة التحكم ونسخه.