Componenti interattivi
<Input>, <Textarea>, <Select> e <Tabs>: focus, scorciatoie e copia del testo quando la pagina non ha il focus.
Questi campi di input si controllano con la tastiera e gestiscono il proprio focus.
Dal vivoTab 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>Focus
Tab e Shift+Tab spostano il focus ciclicamente. autoFocus acquisisce il focus al montaggio.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Gli editor con il focus intercettano i propri tasti, quindi digitare 1 non attiva mai una scorciatoia globale.
<Input>
Campo di input a riga singola con modifica in stile readline.
| Prop | Descrizione |
|---|---|
value / onChange | Valore controllato |
onSubmit | Chiamata alla pressione di Enter |
placeholder | Testo mostrato quando il campo è vuoto |
mask | Carattere di mascheramento per i dati segreti |
<Textarea>
Editor di testo su più righe. Enter invia, Shift+Enter aggiunge una nuova riga.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Un elenco di opzioni controllato da tastiera con ricerca fuzzy opzionale.
| Prop | Descrizione |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Chiamata alla pressione di Enter |
searchable | Filtro delle opzioni durante la digitazione |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Cursore senza focus
Quando la pagina perde il focus, i cursori si bloccano e i frame si fermano, così puoi selezionare e copiare il testo della console.