רכיבים אינטראקטיביים
<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} />סמן ללא מיקוד
כשהדף מאבד מיקוד, הסמנים קופאים והפריימים נעצרים, כך שאפשר לבחור ולהעתיק טקסט מהמסוף.