交互组件
<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} />失焦时的光标
页面失去焦点时,光标冻结并停止渲染帧,便于你选择和复制控制台文本。