فارمز اور فیڈبیک

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

ٹوسٹس موڈلز کے اوپر رینڈر ہوتے ہیں اور کبھی فوکس نہیں لیتے۔