Formulir dan umpan balik
<Button>, <Checkbox>, <Switch>, <RadioGroup>, <Slider>, <Dialog>, <Confirm>, dan toast.
Text.js menyertakan kontrol formulir, dialog, dan toast. Setiap kontrol masuk dalam urutan Tab dan merespons Space atau 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>Kontrol
| Komponen | Tombol | Nilai |
|---|---|---|
<Button> | ↵ Space | onPress |
<Checkbox> | Space ↵ | checked / onChange |
<Switch> | Space ← → | checked / onChange |
<RadioGroup> | ↑ ↓ (atau ← →) | value / onChange |
<Slider> | ← →, Shift ×5, Home End | value / onChange |
Semuanya menerima autoFocus, focused, id, dan disabled. Mode terkontrol maupun tidak terkontrol (defaultChecked, defaultValue) sama-sama berfungsi.
Tombol
variant bernilai primary, secondary, ghost, atau danger. Fokus mengisi tombol dengan warna aksen tanpa mengubah ukurannya.
<Dialog>
<Modal> dengan deskripsi dan baris tindakan.
<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>
Ya atau tidak. y dan n menjawab langsung; ← → berpindah antartombol. destructive mengatur gaya tombol konfirmasi dan memfokuskan Batal terlebih dahulu.
<Confirm open={confirming} destructive title="Delete project?" message="This removes acme-web and all 312 deployments." confirmLabel="Delete" onConfirm={remove} onCancel={() => setConfirming(false)}/>Toast
Render satu <Toaster />, lalu panggil useToast() di mana saja dalam root yang sama.
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",});| Opsi | Deskripsi |
|---|---|
duration | Milidetik (default 4000; toast pemuatan tetap tampil) |
id | Gunakan kembali untuk memperbarui toast di tempat |
position | Pada <Toaster>: bottom-right (default), top-center, … |
max | Pada <Toaster>: jumlah yang terlihat sekaligus (default 3) |
Toast di-render di atas modal dan tidak pernah mengambil fokus.