Interaktive Komponenten
<Input>, <Textarea>, <Select> und <Tabs>: Fokus, Tastenkürzel und Text kopieren, während die Seite keinen Fokus hat.
Diese Eingabekomponenten werden per Tastatur bedient und verwalten ihren eigenen Fokus.
LiveTab 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 und Shift+Tab wechseln den Fokus reihum. autoFocus setzt den Fokus beim Einhängen.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Fokussierte Editoren fangen ihre Tasteneingaben ab, sodass die Eingabe von 1 nie ein globales Tastenkürzel auslöst.
<Input>
Einzeilige Eingabe mit Bearbeitung im Readline-Stil.
| Prop | Beschreibung |
|---|---|
value / onChange | Kontrollierter Wert |
onSubmit | Aufruf bei Enter |
placeholder | Anzeige bei leerem Feld |
mask | Maskierungszeichen für vertrauliche Eingaben |
<Textarea>
Mehrzeilige Texteingabe. Enter sendet ab, Shift+Enter fügt einen Zeilenumbruch ein.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Eine per Tastatur bedienbare Auswahlliste mit optionaler unscharfer Suche.
| Prop | Beschreibung |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Aufruf bei Enter |
searchable | Filtern der Optionen durch Tippen |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Cursor ohne Fokus
Wenn die Seite den Fokus verliert, frieren die Cursor ein und die Frames stoppen, sodass du Konsolentext auswählen und kopieren kannst.