表單與回饋
<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） |
浮動通知會渲染在模態視窗上方，且不會取得焦點。