Componentes interactivos
<Input>, <Textarea>, <Select> y <Tabs>: foco, atajos y copia de texto con la página desenfocada.
Estos campos se controlan con el teclado y gestionan su propio foco.
En 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>Foco
Tab y Shift+Tab alternan el foco. autoFocus toma el foco al montarse.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Los editores con foco consumen las pulsaciones de teclas, por lo que escribir 1 nunca activa un atajo global.
<Input>
Campo de una sola línea con edición al estilo de readline.
| Prop | Descripción |
|---|---|
value / onChange | Valor controlado |
onSubmit | Función que se llama al pulsar Enter |
placeholder | Texto que se muestra cuando el campo está vacío |
mask | Carácter de enmascaramiento para datos secretos |
<Textarea>
Editor de varias líneas. Enter envía el contenido, Shift+Enter añade un salto de línea.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Lista de opciones controlada con el teclado, con búsqueda difusa opcional.
| Prop | Descripción |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Función que se llama al pulsar Enter |
searchable | Filtrado de opciones al escribir |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Cursor sin foco
Cuando la página pierde el foco, los cursores se congelan y los fotogramas se detienen, para que puedas seleccionar y copiar texto de la consola.