表单与反馈
<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） |
消息提示渲染在模态框上方，且从不获取焦点。