対話型コンポーネント
<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形式の編集に対応した1行の入力欄です。
| プロパティ | 説明 |
|---|---|
value / onChange | 制御された値 |
onSubmit | Enter 押下時の呼び出し |
placeholder | 空欄時の表示 |
mask | 機密情報を隠すマスク文字 |
<Textarea>
複数行の入力欄です。Enter で送信し、Shift+Enter で改行を追加します。
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
キーボードで操作する選択肢リストで、任意であいまい検索を有効にできます。
| プロパティ | 説明 |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Enter 押下時の呼び出し |
searchable | 入力による選択肢の絞り込み |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />フォーカスが外れたときのカーソル
ページからフォーカスが外れると、カーソルが静止してフレームの更新が止まるため、コンソールのテキストを選択してコピーできます。