فرم‌ها و بازخورد

⁦Text.js⁩ شامل کنترل‌های فرم، کادرهای گفت‌وگو و اعلان‌های گذرا است. هر کنترل در ترتیب پیمایش با کلید Tab قرار می‌گیرد و به کلید Space یا 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>

#کنترل‌ها

همهٔ آن‌ها autoFocus، focused، id و disabled را می‌پذیرند. هر دو حالت کنترل‌شده و کنترل‌نشده (defaultChecked، defaultValue) کار می‌کنند.

#دکمه‌ها

مقدار variant یکی از primary، secondary، ghost یا danger است. فوکوس، دکمه را با رنگ تأکیدی پر می‌کند، بدون آنکه اندازهٔ آن تغییر کند.

#<Dialog>

یک <Modal> با توضیح و ردیفی از کنش‌ها.

<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>

بله یا خیر. کلیدهای y و n مستقیماً پاسخ می‌دهند؛ کلیدهای ← → بین دکمه‌ها جابه‌جا می‌شوند. ویژگی destructive به دکمهٔ تأیید سبک می‌دهد و ابتدا فوکوس را روی «لغو» قرار می‌دهد.

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

#اعلان‌های گذرا

یک کامپوننت <Toaster /> رندر کنید، سپس هوک useToast() را در هر جای همان ریشه فراخوانی کنید.

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",});

اعلان‌های گذرا بالای مودال‌ها رندر می‌شوند و هرگز فوکوس را نمی‌گیرند.