Komponen interaktif
<Input>, <Textarea>, <Select>, dan <Tabs>: fokus, pintasan, dan penyalinan teks saat halaman tidak berfokus.
Input ini dikendalikan melalui keyboard dan mengelola fokusnya sendiri.
LangsungTab 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 dan Shift+Tab menggilir fokus. autoFocus mengambil fokus saat komponen dipasang.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Editor yang memiliki fokus menangkap penekanan tombolnya, sehingga mengetik 1 tidak pernah memicu pintasan global.
<Input>
Input satu baris dengan penyuntingan bergaya readline.
| Prop | Deskripsi |
|---|---|
value / onChange | Nilai terkontrol |
onSubmit | Dipanggil saat Enter ditekan |
placeholder | Ditampilkan saat kosong |
mask | Karakter penyamar untuk rahasia |
<Textarea>
Editor multibaris. Enter mengirim, Shift+Enter menambahkan baris baru.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Daftar opsi berbasis keyboard dengan pencarian fuzzy opsional.
| Prop | Deskripsi |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Dipanggil saat Enter ditekan |
searchable | Mengetik menyaring opsi |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Kursor tanpa fokus
Saat halaman kehilangan fokus, kursor membeku dan frame berhenti, sehingga Anda dapat memilih dan menyalin teks konsol.