Komponenty interaktywne
<Input>, <Textarea>, <Select> i <Tabs>: fokus, skróty klawiszowe i kopiowanie tekstu, gdy strona nie ma fokusu.
Te pola obsługuje się klawiaturą i same zarządzają swoim fokusem.
Na żywoTab 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>Fokus
Tab i Shift+Tab cyklicznie przenoszą fokus. autoFocus przejmuje fokus przy montowaniu.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Edytory z fokusem przechwytują naciśnięcia klawiszy, więc wpisanie 1 nigdy nie wywołuje globalnego skrótu klawiszowego.
<Input>
Jednowierszowe pole z edycją w stylu readline.
| Prop | Opis |
|---|---|
value / onChange | Wartość kontrolowana |
onSubmit | Wywołanie po naciśnięciu Enter |
placeholder | Tekst wyświetlany w pustym polu |
mask | Znak maskujący poufne dane |
<Textarea>
Wielowierszowe pole tekstowe. Enter zatwierdza, Shift+Enter dodaje nowy wiersz.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Lista opcji obsługiwana klawiaturą z opcjonalnym wyszukiwaniem przybliżonym.
| Prop | Opis |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Wywołanie po naciśnięciu Enter |
searchable | Filtrowanie opcji podczas pisania |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Kursor bez fokusu
Gdy strona traci fokus, kursory zamierają, a klatki przestają się pojawiać, więc możesz zaznaczać i kopiować tekst konsoli.