互動元件
<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} />失去焦點時的游標
頁面失去焦點時，游標會凍結，影格也會停止更新，方便你選取並複製主控台文字。