इंटरैक्टिव कंपोनेंट
<Input>, <Textarea>, <Select> और <Tabs>: पेज पर फ़ोकस न होने पर फ़ोकस, शॉर्टकट और टेक्स्ट कॉपी करना।
ये इनपुट कीबोर्ड से चलते हैं और अपना फ़ोकस खुद संभालते हैं।
लाइवTab next field · Enter submittsx
<Box className="flex-col gap-1 p-1"> <Input placeholder="my-text-app" autoFocus /> <Select options={regions} value={region} onChange={setRegion} /> <Tabs tabs={plans} activeTab={plan} onChange={setPlan} variant="pill" /></Box>फ़ोकस
Tab और Shift+Tab कुंजियां फ़ोकस बदलती हैं। autoFocus प्रॉप माउंट होने पर फ़ोकस लेता है।
const { isFocused } = useFocus({ autoFocus: true });useFocusManager().focus("search");फ़ोकस वाले एडिटर अपनी कुंजियों के इवेंट खुद संभालते हैं, इसलिए 1 टाइप करने से कभी ग्लोबल शॉर्टकट ट्रिगर नहीं होता।
<Input>
readline-शैली की एडिटिंग वाला सिंगल-लाइन इनपुट।
| Prop | विवरण |
|---|---|
value / onChange | कंट्रोल्ड वैल्यू |
onSubmit | Enter दबाने पर कॉल होता है |
placeholder | खाली होने पर दिखता है |
mask | गोपनीय जानकारी छिपाने के लिए मास्क कैरेक्टर |
<Textarea>
मल्टी-लाइन कंपोज़र। Enter कुंजी सबमिट करती है, Shift+Enter शॉर्टकट नई लाइन जोड़ता है।
<Textarea placeholder="Ask anything…" maxRows={6} onSubmit={send} /><Select>
कीबोर्ड से चलने वाली विकल्प सूची, जिसमें फ़ज़ी सर्च का विकल्प है।
| Prop | विवरण |
|---|---|
options | { value, label, hint?, badge? }[] |
onChange | Enter दबाने पर कॉल होता है |
searchable | टाइप करने से विकल्प फ़िल्टर होते हैं |
<Tabs>
<Tabs tabs={[{ id: "home", label: "Home", shortcut: "1" }]} activeTab={tab} onChange={setTab} />फ़ोकस के बिना कर्सर
जब पेज से फ़ोकस हटता है, तो कर्सर स्थिर हो जाते हैं और फ़्रेम रुक जाते हैं, ताकि आप कंसोल का टेक्स्ट चुनकर कॉपी कर सकें।