交互组件

<Input>、<Textarea>、<Select> 和 <Tabs>:焦点、快捷键以及页面失焦时的文本复制。

这些输入组件由键盘驱动,并自行管理焦点。

实时Tab next field · Enter submittsx
preview://form:1
<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} />

失焦时的光标

页面失去焦点时,光标冻结并停止渲染帧,便于你选择和复制控制台文本。

在 GitHub 上编辑此页