Componentes interativos
<Input>, <Textarea>, <Select> e <Tabs>: foco, atalhos e cópia de texto com a página sem foco.
Esses campos são controlados pelo teclado e gerenciam o próprio foco.
Ao 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 e Shift+Tab alternam o foco. autoFocus recebe o foco na montagem.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Editores com foco consomem as teclas pressionadas, então digitar 1 nunca aciona um atalho global.
<Input>
Campo de linha única com edição no estilo readline.
| Prop | Descrição |
|---|---|
value / onChange | Valor controlado |
onSubmit | Chamada ao pressionar Enter |
placeholder | Texto exibido quando o campo está vazio |
mask | Caractere de máscara para dados secretos |
<Textarea>
Editor de múltiplas linhas. Enter envia, Shift+Enter adiciona uma quebra de linha.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Uma lista de opções controlada pelo teclado com busca aproximada opcional.
| Prop | Descrição |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Chamada ao pressionar Enter |
searchable | Filtragem das opções ao digitar |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Cursor sem foco
Quando a página perde o foco, os cursores congelam e os quadros param, para você poder selecionar e copiar o texto do console.