फ़ॉर्म और फ़ीडबैक

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

टोस्ट मोडल के ऊपर रेंडर होते हैं और कभी फ़ोकस नहीं लेते।