טפסים ומשוב
<Button>, <Checkbox>, <Switch>, <RadioGroup>, <Slider>, <Dialog>, <Confirm> והודעות קופצות.
Text.js כולל פקדי טפסים, תיבות דו-שיח והודעות צצות. כל פקד מצטרף לסדר הניווט של Tab ומגיב ל-Space או ל-Enter.
בשידור חי72×14 · booting Turbolog…tsx
<Checkbox label="Web Analytics" description="privacy-friendly" defaultChecked /><Switch label="Edge runtime" defaultChecked /><RadioGroup orientation="horizontal" value={plan} onChange={setPlan} options={plans} /><Slider label="Concurrency" defaultValue={40} width={20} /><Button variant="primary" onPress={deploy}>Deploy</Button>פקדים
| רכיב | מקשים | ערך |
|---|---|---|
<Button> | ↵ Space | onPress |
<Checkbox> | Space ↵ | checked / onChange |
<Switch> | Space ← → | checked / onChange |
<RadioGroup> | ↑ ↓ (או ← →) | value / onChange |
<Slider> | ← →, Shift ×5, Home End | value / onChange |
כולם מקבלים autoFocus, focused, id ו-disabled. הם פועלים גם במצב מבוקר וגם במצב לא מבוקר (defaultChecked, defaultValue).
כפתורים
הערך של variant הוא primary, secondary, ghost או danger. המיקוד ממלא את הכפתור בצבע ההדגשה בלי לשנות את גודלו.
<Dialog>
רכיב <Modal> עם תיאור ושורת פעולות.
<Dialog open={open} title="Invite teammate" description="They'll get an email with a link." onClose={close} actions={<Button variant="primary" onPress={send}>Send</Button>}> <Input autoFocus placeholder="email" /></Dialog><Confirm>
כן או לא. y ו-n משיבים ישירות; ← → מעבירים בין הכפתורים. destructive מעצב את כפתור האישור וממקד תחילה את כפתור הביטול.
<Confirm open={confirming} destructive title="Delete project?" message="This removes acme-web and all 312 deployments." confirmLabel="Delete" onConfirm={remove} onCancel={() => setConfirming(false)}/>הודעות צצות
יש לרנדר רכיב <Toaster /> אחד, ואז לקרוא ל-useToast() מכל מקום באותו שורש.
const toast = useToast();toast("Copied");toast.success("Deployed", { description: "dpl_8f2k is live on iad1." });toast.error("Build failed");await toast.promise(deploy(), { loading: "Deploying…", success: (d) => `Deployed ${d.id}`, error: "Deploy failed",});| אפשרות | תיאור |
|---|---|
duration | אלפיות שנייה (ברירת מחדל 4000; הודעות טעינה נשארות) |
id | שימוש חוזר לעדכון הודעה צצה במקומה |
position | ברכיב <Toaster>: bottom-right (ברירת מחדל), top-center, … |
max | ברכיב <Toaster>: מספר ההודעות הגלויות בו-זמנית (ברירת מחדל 3) |
הודעות צצות מרונדרות מעל תיבות מודאליות ולעולם אינן מקבלות מיקוד.