Biểu mẫu và phản hồi

Text.js có các điều khiển biểu mẫu, hộp thoại và thông báo toast. Mỗi điều khiển tham gia thứ tự Tab và phản hồi với Space hoặc Enter.

<Checkbox label="Web Analytics" description="privacy-friendly" defaultChecked /><Switch label="Edge runtime" defaultChecked /><RadioGroup orientation="horizontal" value={plan} onChange={setPlan} options={plans} /><Slider label="Concurrency" defaultValue={40} width={20} /><Button variant="primary" onPress={deploy}>Deploy</Button>

#Điều khiển

Tất cả đều nhận autoFocus, focused, id và disabled. Cả chế độ có kiểm soát và không kiểm soát (defaultChecked, defaultValue) đều hoạt động.

#Nút

variant là primary, secondary, ghost hoặc danger. Khi có tiêu điểm, nút hiển thị màu nhấn trên toàn bộ nền mà không đổi kích thước.

#<Dialog>

Một <Modal> có mô tả và một hàng thao tác.

<Dialog  open={open}  title="Invite teammate"  description="They'll get an email with a link."  onClose={close}  actions={<Button variant="primary" onPress={send}>Send</Button>}>  <Input autoFocus placeholder="email" /></Dialog>

#<Confirm>

Có hoặc không. y và n trả lời trực tiếp; ← → di chuyển giữa các nút. destructive định kiểu nút xác nhận và đặt tiêu điểm vào nút Hủy trước.

<Confirm  open={confirming}  destructive  title="Delete project?"  message="This removes acme-web and all 312 deployments."  confirmLabel="Delete"  onConfirm={remove}  onCancel={() => setConfirming(false)}/>

#Thông báo toast

Render một <Toaster />, rồi gọi useToast() ở bất kỳ đâu trong cùng root.

const toast = useToast();toast("Copied");toast.success("Deployed", { description: "dpl_8f2k is live on iad1." });toast.error("Build failed");await toast.promise(deploy(), {  loading: "Deploying…",  success: (d) => `Deployed ${d.id}`,  error: "Deploy failed",});

Toast render phía trên hộp thoại modal và không bao giờ chiếm tiêu điểm.