Composants interactifs
<Input>, <Textarea>, <Select> et <Tabs> : focus, raccourcis et copie de texte quand la page n’a pas le focus.
Ces champs se pilotent au clavier et gèrent leur propre focus.
En directTab 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 et Shift+Tab font passer le focus d’un élément à l’autre. autoFocus prend le focus au montage.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Les éditeurs qui ont le focus interceptent leurs touches, donc saisir 1 ne déclenche jamais de raccourci global.
<Input>
Champ de saisie sur une ligne avec édition de type readline.
| Prop | Description |
|---|---|
value / onChange | Valeur contrôlée |
onSubmit | Appelé sur Enter |
placeholder | Affiché quand le champ est vide |
mask | Caractère de masquage pour les secrets |
<Textarea>
Champ de rédaction multiligne. Enter envoie le contenu, Shift+Enter ajoute un saut de ligne.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Liste d’options au clavier avec recherche approximative facultative.
| Prop | Description |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Appelé sur Enter |
searchable | Saisie filtrant les options |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Curseur sans focus
Quand la page perd le focus, les curseurs se figent et les frames s’arrêtent, vous pouvez donc sélectionner et copier le texte de la console.