Интерактивные компоненты
<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} />Курсор без фокуса
Когда страница теряет фокус, курсоры замирают и кадры перестают обновляться, чтобы вы могли выделить и скопировать текст консоли.