Component tương tác
<Input>, <Textarea>, <Select> và <Tabs>: focus, phím tắt và sao chép văn bản khi trang không có focus.
Các ô nhập này nhận điều khiển từ bàn phím và tự quản lý tiêu điểm.
Trực tiếpTab 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>Tiêu điểm
Tab và Shift+Tab chuyển tiêu điểm lần lượt. autoFocus lấy tiêu điểm khi component gắn vào.
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");Trình soạn thảo đang có tiêu điểm giữ lại các phím nhập vào, nên gõ 1 không bao giờ kích hoạt phím tắt toàn cục.
<Input>
Ô nhập một dòng với kiểu chỉnh sửa readline.
| Prop | Mô tả |
|---|---|
value / onChange | Giá trị có kiểm soát |
onSubmit | Gọi khi nhấn Enter |
placeholder | Hiển thị khi trống |
mask | Ký tự che thông tin bí mật |
<Textarea>
Ô soạn thảo nhiều dòng. Enter gửi nội dung, Shift+Enter thêm dòng mới.
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
Danh sách lựa chọn bằng bàn phím, có tùy chọn tìm kiếm gần đúng.
| Prop | Mô tả |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Gọi khi nhấn Enter |
searchable | Lọc lựa chọn khi gõ |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />Con trỏ khi mất tiêu điểm
Khi trang mất tiêu điểm, con trỏ đứng yên và frame dừng lại, để bạn có thể chọn và sao chép văn bản trong console.