टेक्स्ट फ़ील्ड
लोगों को टेक्स्ट दर्ज और संपादित करने देता है — एक पंक्ति में, या कई पंक्तियों में जो टेक्स्ट के साथ बढ़ती हैं या हाथ से छोटी-बड़ी की जाती हैं — या लोकेल के रूप में इकाई-दर-इकाई दर्ज की जाने वाली तारीख़ या समय, या ठीक वैसे ही रखा गया कोड जैसा वह लिखा गया है, ऐसे लेबल के साथ जो बता सकता है कि फ़ील्ड ज़रूरी है या वैकल्पिक, और वैकल्पिक आइकन, प्रीफ़िक्स और सफ़िक्स, सहायक टेक्स्ट, अक्षरों की गिनती और पिकर बटन के साथ।
- श्रेणी
- टेक्स्ट इनपुट
- टोकन
comp.field- स्तर
- संयोजित
- इनसे बना है
- Field, Text input
- Web
tanrei-text-fieldschedule - SwiftUI
TanreiTextFieldschedule - Jetpack Compose
TanreiTextFieldschedule - Flutter
TanreiTextFieldschedule - React Native
TextFieldschedule
- वे वेरिएंट जो इनमें शामिल नहीं
- tanrei: filled, outlined
इससे जनरेट किया गया: docs/status/status.json, specs/text-field.spec.json
संशोधित स्पेक, जो अभी हर प्लैटफ़ॉर्म पर नहीं है
यह पेज टेक्स्ट फ़ील्ड को वैसा बताता है जैसा स्पेक में वह अभी है: एक stacked वेरिएंट, जो डिफ़ॉल्ट है और जिसका लेबल फ़ील्ड के ऊपर रहता है; filled और outlined, जो सिर्फ़ Material और cupertino प्रीसेट के लिए रखे गए हैं; 32, 40 और 56 की ऊँचाइयाँ (filled या outlined फ़ील्ड की, जिसके भीतर लेबल फ़्लोट होता है, 40, 48 और 56); तारीख़ और समय के टाइप, पिकर बटन के साथ; कई पंक्तियों वाला फ़ील्ड, जो अपने टेक्स्ट के साथ बढ़ता है या हैंडल से छोटा-बड़ा किया जाता है (resize); सेगमेंट में इकाई-दर-इकाई दर्ज की जाने वाली तारीख़ या समय; और required व optional, जो फ़ील्ड को ज़रूरी या वैकल्पिक के रूप में चिह्नित करते हैं। वेब कंपोनेंट यह सब पहले से करता है, और डेमो भी। फ़ील्ड कोड भी रख सकता है (type="code", और उसकी पंक्तियों के लिए wrap): वेब ने इसे बना लिया है, और किसी दूसरे प्लैटफ़ॉर्म ने अभी नहीं। टेक्स्ट फ़ील्ड टेक्स्ट इनपुट के चारों ओर का फ़ील्ड है, जैसा यह पेज बताता है: वेब ने यह भी बना लिया है, और वहाँ required ऐट्रिब्यूट अब नहीं है। SwiftUI, Compose, Flutter और React Native ऊपर “पीछे” के रूप में चिह्नित हैं: जब तक वे बराबरी पर नहीं आते, वे पिछला संशोधन देते हैं, जो डिफ़ॉल्ट रूप से outlined है और 36 और 40 की ऊँचाई पर है, जिसका required फ़्लैग कोई निशान नहीं बनाता, और जिसमें न stacked वेरिएंट है, न तारीख़ या समय के टाइप, न पिकर बटन और न resize के मोड। उनके उदाहरण वही संशोधन दिखाते हैं।
Stacked, जो डिफ़ॉल्ट है: एक ज़रूरी फ़ील्ड, और अपने पिकर बटन के साथ एक तारीख़
जहाँ भी फ़ॉर्म टेक्स्ट माँगता है, वहाँ टेक्स्ट फ़ील्ड इस्तेमाल करें: यह आम स्थिति के लिए है, और इस्तेमाल के लिए तैयार है, लेबल, बॉक्स, सहायता की एक पंक्ति, ग़लत मान के लिए शब्दों और गिनती के साथ।
किनसे बना है: एक फ़ील्ड और एक टेक्स्ट इनपुट से। फ़ील्ड फ़्रेम है: लेबल, ज़रूरी या वैकल्पिक का निशान, सहायता, त्रुटि और गिनती। टेक्स्ट इनपुट कंट्रोल है: बॉक्स, और वह सब जो उसमें टाइप किया जाता है। टेक्स्ट फ़ील्ड अपना कुछ नहीं बनाता और उसका कोई टोकन नहीं है: उसकी हर प्रॉपर्टी इन दोनों में से किसी एक की प्रॉपर्टी है, जो उसी को बिना बदले दे दी जाती है।
यह एक ब्लॉक है, उतना ही चौड़ा जितनी वह जगह जिसमें इसे रखा गया है, और इसका बॉक्स उसे पूरा भरता है। इसकी अपनी कोई चौड़ाई नहीं है: फ़ील्ड कम चौड़ा चाहिए, तो उसे कम चौड़ी जगह दें।
प्लेग्राउंड
<form>
<tanrei-text-field name="email" label="ईमेल" type="email" autocomplete="email" required required-text="ज़रूरी"
supporting-text="हम इसका इस्तेमाल सिर्फ़ आपको साइन इन कराने के लिए करते हैं।"></tanrei-text-field>
<tanrei-text-field name="company" label="कंपनी" optional optional-text="वैकल्पिक"></tanrei-text-field>
<!-- 3 से 8 पंक्तियों तक अपने टेक्स्ट के साथ बढ़ता है, फिर स्क्रॉल होता है। -->
<tanrei-text-field name="message" label="संदेश" multiline min-rows="3" max-rows="8"></tanrei-text-field>
<!-- हैंडल से, हाथ से छोटा-बड़ा किया जाता है। -->
<tanrei-text-field name="notes" label="नोट" multiline resize="manual" resize-label="नोट का साइज़ बदलें"></tanrei-text-field>
</form>
<!-- टूलबार में सिर्फ़ बॉक्स: एक टेक्स्ट इनपुट, जिसे नाम उसके अपने label से मिलता है। टेक्स्ट फ़ील्ड को इंपोर्ट करने से वह डिफ़ाइन हो जाता है। -->
<tanrei-text-input label="खोजें" type="search" placeholder="कंपोनेंट खोजें">
<span slot="leading-icon">search</span>
</tanrei-text-input>
<!-- कोड: पेज की हर दिशा में बाएँ से दाएँ, कोड के टाइपफ़ेस में, जिसे न कभी अपने आप सुधारा जाता है, न जिसकी स्पेलिंग जाँची जाती है। -->
<tanrei-text-field label="पैटर्न" type="code" value="tanrei.comp.button.*.container.color"></tanrei-text-field>
<tanrei-text-field label="वेबहुक की बॉडी" type="code" multiline min-rows="4" supporting-text="JSON"></tanrei-text-field>
<!-- रैप नहीं होता: कोड की हर पंक्ति एक ही पंक्ति में रहती है, और लंबी पंक्ति फ़ील्ड के भीतर स्क्रॉल होती है। -->
<tanrei-text-field label="पंक्तियाँ" type="code" multiline no-wrap></tanrei-text-field>
<!-- लोकेल के क्रम में इकाई-दर-इकाई दर्ज की गई तारीख़, जो 2026-09-27 के रूप में रखी जाती है, पिकर बटन के साथ। -->
<tanrei-text-field id="start" label="शुरू होने की तारीख़" type="date" min="2026-01-01" disabled-dates="2026-05-01 2026-12-25"
invalid-text="तारीख़ पूरी करें।" unavailable-text="2026 या उसके बाद का कोई कार्य दिवस चुनें।"
picker picker-label="शुरू होने की तारीख़ चुनें" segment-empty-text="ख़ाली"></tanrei-text-field>
<tanrei-date-time-picker id="start-picker" presentation="docked" anchor="start" label="शुरू होने की तारीख़"></tanrei-date-time-picker>
<script type="module">
import '@tanrei/web/components/text-field';
const email = document.querySelector('[name="email"]');
email.addEventListener('input', () => draft(email.value)); // हर संपादन पर
email.addEventListener('change', () => save(email.value)); // फ़ोकस हटने या Enter पर, जब मान बदला हो
// वैलिडेशन आपका काम है: फ़ील्ड ख़ुद कभी error सेट नहीं करता।
email.error = submitted && !isValid(email.value);
email.errorText = 'पूरा ईमेल पता दर्ज करें।';
// फ़ील्ड माँगता है; प्रॉडक्ट पिकर दिखाता है और मान वापस लिखता है।
const start = document.querySelector('#start');
const picker = document.querySelector('#start-picker');
start.addEventListener('pickerrequest', (e) => {
Object.assign(picker, { value: e.detail.value, min: e.detail.min, max: e.detail.max, disabledDates: start.disabledDates, open: true });
});
picker.addEventListener('change', () => (start.value = picker.value));
picker.addEventListener('close', () => (picker.open = false));
</script>import { TextField } from '@tanrei/react';
<TextField
label="ईमेल"
type="email"
autocomplete="email"
value={email}
onInput={(e) => setEmail(e.currentTarget.value)}
onChange={() => save(email)}
required
requiredText="ज़रूरी"
error={submitted && !isValid(email)}
errorText="पूरा ईमेल पता दर्ज करें।"
/>
<TextField label="संदेश" multiline minRows={3} maxRows={8} value={message}
onInput={(e) => setMessage(e.currentTarget.value)} />
// तारीख़: मान ISO 8601 में होता है, या जब तक कोई सेगमेंट ख़ाली है तब तक ख़ाली।
<TextField
label="शुरू होने की तारीख़"
type="date"
min="2026-01-01"
value={start}
invalidText="तारीख़ पूरी करें।"
unavailableText="2026 या उसके बाद की कोई तारीख़ चुनें।"
segmentEmptyText="ख़ाली"
picker
pickerLabel="शुरू होने की तारीख़ चुनें"
onChange={(e) => setStart(e.currentTarget.value)}
onEntryError={(e) => report(e.detail.reason)}
onPickerRequest={() => setPickerOpen(true)}
/>import Tanrei
TanreiTextField("ईमेल", text: $email, type: .email,
supportingText: "हम इसका इस्तेमाल सिर्फ़ आपको साइन इन कराने के लिए करते हैं।",
errorText: "पूरा ईमेल पता दर्ज करें।",
error: submitted && !isValid(email),
textContentType: "email", // HTML का ऑटोफ़िल नाम
onCommit: save,
// क्रिया यहीं दें: बाहर का .onSubmit, onCommit से पहले चलता है।
onSubmit: signIn)
// कई पंक्तियों वाला फ़ील्ड, पंक्तियों की सीमा की रेंज के साथ खड़ा अक्ष है।
TanreiTextField("संदेश", text: $message, axis: .vertical, lineLimit: 3...8)import androidx.compose.foundation.text.KeyboardActions
import io.github.chnotchy.tanrei.components.TanreiTextField
import io.github.chnotchy.tanrei.components.TanreiTextFieldType
var email by remember { mutableStateOf("") }
TanreiTextField(
value = email,
onValueChange = { email = it },
label = "ईमेल",
type = TanreiTextFieldType.Email,
contentType = "email", // HTML का ऑटोफ़िल नाम
supportingText = "हम इसका इस्तेमाल सिर्फ़ आपको साइन इन कराने के लिए करते हैं।",
isError = submitted && !isValid(email),
errorText = "पूरा ईमेल पता दर्ज करें।",
onCommit = { save(it) },
keyboardActions = KeyboardActions(onDone = { signIn() }),
)
// singleLine, स्पेक के multiline का उलटा है।
TanreiTextField(value = message, onValueChange = { message = it }, label = "संदेश", singleLine = false, minLines = 3)import 'package:tanrei/tanrei.dart';
TanreiTextField(
controller: email, // या initialValue: '…'
labelText: 'ईमेल',
type: TanreiTextFieldType.email,
autofillHints: TanreiTextField.autofillHintsFromHtml('email'),
helperText: 'हम इसका इस्तेमाल सिर्फ़ आपको साइन इन कराने के लिए करते हैं।',
isError: submitted && !isValid(email.text),
errorText: 'पूरा ईमेल पता दर्ज करें।',
onCommit: save,
onSubmitted: (String value) => signIn(),
);
TanreiTextField(labelText: 'संदेश', multiline: true, minLines: 3);import { TextField } from '@tanrei/react-native';
<TextField
label="ईमेल"
type="email"
autoComplete="email"
value={email}
onChangeText={setEmail}
supportingText="हम इसका इस्तेमाल सिर्फ़ आपको साइन इन कराने के लिए करते हैं।"
error={submitted && !isValid(email)}
errorText="पूरा ईमेल पता दर्ज करें।"
onEndEditing={save}
onSubmitEditing={signIn}
/>
<TextField label="संदेश" multiline minRows={3} value={message} onChangeText={setMessage} />वही फ़ील्ड, उसके दोनों सदस्यों से हाथ से लिखा जाए, तो वैसा ही दिखता है, और सहायक तकनीक के लिए वही टेक्स्ट बॉक्स होता है, उसी नाम, विवरण और स्टेट के साथ:
<tanrei-field label="ईमेल" required required-text="ज़रूरी"
supporting-text="हम इसका इस्तेमाल सिर्फ़ आपको साइन इन कराने के लिए करते हैं।">
<tanrei-text-input name="email" type="email" autocomplete="email"></tanrei-text-input>
</tanrei-field>वही फ़ील्ड हाथ से लिखा हुआ: एक फ़ील्ड, जिसके भीतर एक टेक्स्ट इनपुट है
एक स्तर नीचे तब जाएँ जब आपको ऐसी व्यवस्था चाहिए जो टेक्स्ट फ़ील्ड नहीं देता:
| आपको चाहिए | इस्तेमाल करें |
|---|---|
| लेबल, बॉक्स, सहायता, त्रुटि और गिनती | टेक्स्ट फ़ील्ड |
| फ़्रेम के भीतर, बॉक्स के बग़ल में या उसके नीचे अपनी कोई चीज़ | एक फ़ील्ड, जिसके भीतर एक टेक्स्ट इनपुट और आपका अपना एलिमेंट है |
| सिर्फ़ बॉक्स, ऐसे लेबल के नीचे जो कहीं और है: टूलबार का फ़िल्टर, टेबल का कोई सेल, ऐसी पंक्ति जिसका लेबल उसके बग़ल में है | अकेला टेक्स्ट इनपुट, जिसे नाम उसके अपने label से मिलता है |
एक स्तर नीचे जो बदलता है, वह यह है कि कौन-सी बात कहाँ कही जाती है। name और value टेक्स्ट इनपुट पर होते हैं, जो तब वह कंट्रोल है जो फ़ॉर्म को मिलता है, और उसके इवेंट उसी पर सुने जाते हैं। label, error, disabled और ज़रूरी या वैकल्पिक होना फ़ील्ड पर ही रहते हैं, जो उन्हें कंट्रोल तक पहुँचाता है: इनपुट के अपने सेट न करें।
टेक्स्ट फ़ील्ड एक काम ऐसा करता है जो हाथ से लिखे गए फ़ील्ड और टेक्स्ट इनपुट नहीं करते: वह गिनती को सिंक में रखता है। हाथ से लिखते समय, counter सेट हो, तो हर बदलाव पर फ़ील्ड को इनपुट की गिनती दें:
field.countText = input.countText;
input.addEventListener('input', () => (field.countText = input.countText));त्रुटि, अक्षम, सिर्फ़ पढ़ने के लिए, प्रीफ़िक्स-सफ़िक्स और काउंटर
टाइप: पासवर्ड, खोज, संख्या, टेलीफ़ोन और URL
ज़रूरी और वैकल्पिक: टैग, और तारांकन
कई पंक्तियाँ: टेक्स्ट के साथ बढ़ने वाला, हैंडल से छोटा-बड़ा होने वाला (नीचे की ओर, और दोनों दिशाओं में), और स्थिर
कोड: एक पंक्ति में पैटर्न, कई पंक्तियों में JSON, और ऐसी पंक्तियाँ जो रैप नहीं होतीं
दाएँ से बाएँ वाले पेज में कोड: लेबल और सहायता पेज के साथ चलते हैं, कोड बाईं ओर से शुरू होता है
सेगमेंट में एक तारीख़, एक समय, और तारीख़ के साथ समय। Tab, ऐरो कुंजियाँ और अंक इन्हें भरते हैं
Filled और outlined, Material प्रीसेट के वेरिएंट
m3-like के साथ| पहलू | फ़ील्ड से | टेक्स्ट इनपुट से |
|---|---|---|
| प्रॉपर्टी | label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText, optionalText |
बाक़ी सभी: variant, size, type, value, placeholder, readOnly, पंक्तियाँ और resize, wrap, maxLength, counter, प्रीफ़िक्स और सफ़िक्स, autocomplete, और तारीख़ या समय की हर चीज़ |
| इवेंट | — | input, change, action, pickerRequest, entryError |
| स्लॉट | label-icon |
leading-icon, trailing-icon |
| टोकन | comp.field.* |
बॉक्स के लिए comp.input-box.*, जिन्हें हर इनपुट बॉक्स पढ़ता है; comp.text-input.* उसके लिए जो सिर्फ़ टेक्स्ट इनपुट बनाता है |
टेक्स्ट इनपुट के अपने label, labelHidden, error और disabled होते हैं। टेक्स्ट फ़ील्ड इन्हें सेट नहीं करता: उसका label फ़ील्ड का है, जो इनपुट को नाम देता है और filled या outlined फ़ील्ड में वही है जो बॉक्स में फ़्लोट होता है।
टेक्स्ट फ़ील्ड का अपना कोई टोकन नहीं है। उसका बॉक्स टेक्स्ट इनपुट के टोकन पढ़ता है, और उसकी पंक्तियाँ, यानी लेबल, निशान, सहायता, त्रुटि और गिनती, फ़ील्ड के टोकन पढ़ती हैं, वे जहाँ भी सेट हों। नीचे की टेबल में फ़ील्ड के टोकन हैं। किसी एक इंस्टेंस को बदलने के लिए, उस पर सदस्य का टोकन सेट करें:
<tanrei-text-field label="ईमेल"
style="--tanrei-comp-field-label-gap: 12px"></tanrei-text-field>संरचना
संरचना
outlined-empty बनाता है, उसी के ऊपर बनाया गया।| भाग | विवरण |
|---|---|
1 field | The Field: the label row with its glyph and its requirement mark, and the supporting row with the help, the error text and the count the text field gives it (TXF-67). In a look whose input floats the label it draws no label row. |
2 text-input | The text input, as the Field's one control: the box and everything typed in it, the icons, the prefix and the suffix, the segments of a date, the picker button, the resize handle, and the label that floats in the box in the looks that float one. |
प्रॉपर्टी
| प्रॉपर्टी | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
variant | stacked | filled | outlined | "stacked" | Stacked is a filled box that shows focus and error with a line inside its edge and draws no label: the label of the Field that frames it stands above it. Filled and outlined float the label inside the box, marked by a tinted box and a bottom line, or by a border. Use one style per form. A design system may leave some out (the Tanrei system ships stacked only) or add values. — Text input |
size | small | medium | large | "medium" | Minimum height of a single-line input's container: stacked 32 / 40 / 56, as tall as a Button of the same size, so that an input and a Button side by side in one row stand as tall as each other; filled and outlined 40 / 48 / 56, which hold the label that floats inside them. Medium and large are for forms; small is for an input in an app bar, a toolbar or a dense row of controls, beside a small select or button. The hit area always meets the minimum target. — Text input |
type | text | email | password | number | search | tel | url | code | date | time | date-time | "text" | What the value is: chooses the keyboard, autocorrection, obscured entry and semantics. code is text written for a machine rather than for a reader — a snippet of configuration, a pattern, an identifier, a query, a key: a left-to-right run in the code face that the platform does not correct, capitalise, check for spelling or complete, on one line or, with multiline, on many. date, time and date-time are entered segment by segment in the locale's numeric form and held as ISO 8601. The value is a string for every type. — Text input |
value | string | "" | The text in the field; for date, time and date-time, the ISO 8601 form of what its segments give (2026-09-27, 14:30, 2026-09-27T14:30), or empty while a segment is empty or the value is not available. — Text input |
label | string | "" | Names the control, visibly and to assistive technology. Required, unless the control names itself (a checkbox or a switch with its own label): then leave it empty and the field adds only help and an error. — Field Names the text input. In a filled or outlined look the input draws it, floating in its box, and the Field draws no label row (FLD-25, TXI-13). |
labelHidden | boolean | false | Does not draw the label, which stays the accessible name. For a control whose visible label is elsewhere (a table column, a toolbar). — Field Hides the label wherever it would be drawn: the Field's row, or the input's floating label (FLD-25). |
placeholder | string | "" | A hint shown while the value is empty and the label is not in the input line (above, floated or hidden). Never a replacement for label. In a code field it is an example of the code and is drawn as code (TXI-53, TXI-54); a hint in words belongs in the supportingText of its Field. Ignored by a date, time or date-time field, whose empty segments each show their own. — Text input |
supportingText | string | "" | Help shown below the control and given to assistive technology as the control's description. While the field is in error it gives way to errorText, unless the design system keeps both (comp.field.error-text.placement append). — Field |
errorText | string | "" | Shown while error is true, in supportingText's place — or below it, which then stays, where the design system's comp.field.error-text.placement is append: what is wrong and how to put it right, in words. — Field |
error | boolean | false | Puts the field in the error condition: the error text is drawn, the control is exposed as invalid and, where it has an error condition of its own, drawn in it. What a value means is the product's to validate; the field never sets this itself. — Field The Field puts its text input in the input's own error condition (FLD-8, TXI-11). |
disabled | boolean | false | Disables the control and draws the frame as disabled. Disable a framed control here, not on the control, so that its label follows. — Field The Field disables its text input (FLD-14, TXI-5); the text field is then left out of its form (TXF-63). |
readOnly | boolean | false | The value can be focused, selected and copied, but not changed. — Text input |
required | boolean | false | What the form asks of the control: true exposes it as required and draws the required mark beside the label. It never validates: a missing answer is the product's to report with error. — Field The Field exposes its text input as required (FLD-10, TXI-23). |
optional | boolean | false | Draws the optional tag after the label and adds optionalText to the control's description, because assistive technology has no state for it. Ignored while required is true: a control is never both. — Field |
requiredMark | auto | tag | asterisk | none | "auto" | How this control shows that it is required: tag is a small filled Tag with requiredText, asterisk is "*" after the label, none draws nothing and keeps the semantics. Auto takes comp.field.requirement.mark, which follows sys.behavior.requirement-mark, the system's one answer. Ignored unless required is true. — Field |
requiredText | string | "" | The text of the required tag, in the product's language ("Required", "必須"). The product's: Tanrei has no word for it. Empty reads the product's words; with neither, FLD-24 says what is drawn. — Field |
optionalText | string | "" | The text of the optional tag, in the product's language ("Optional", "任意"); also read to assistive technology as part of the description. The product's: Tanrei has no word for it. Empty reads the product's words. — Field |
multiline | boolean | false | Accepts line breaks and shows several lines, sized as resize says. Ignored for password, date, time and date-time. — Text input |
minRows | number | 2 | The fewest lines a multi-line field shows: the height of an empty auto-resized field, the starting and smallest height of a manually resized one, and the height of a fixed one. — Text input |
maxRows | number | 0 | The most lines an auto-resized field grows to before it scrolls, and the tallest a manually resized one can be made; 0 is no limit. Ignored while resize is fixed. — Text input |
resize | auto | manual | fixed | "auto" | How a multi-line field gets its height. auto: it follows the number of lines between minRows and maxRows, with an animated change, and has no handle. manual: it starts at minRows lines and the person resizes it with the handle in its bottom end corner. fixed: it stays at minRows lines, with no handle. Ignored unless multiline. — Text input |
resizeAxis | vertical | both | "vertical" | What the person can resize by hand: the height only, or the height and the width. Ignored unless resize is manual. — Text input |
resizeLabel | string | "" | The accessible name of the resize handle, in the product's language ("Resize"). The product's: Tanrei has no word for it. Empty reads the product's words. Required while the handle is shown. — Text input |
wrap | boolean | true | Whether a multi-line code field continues a line that does not fit on following rows (true), or keeps every line of the code on one row and scrolls sideways inside its container (false) — for code whose lines are read as rows: a table of values, a log, a file in which a line break means something. The value is the same either way. Ignored unless type is code and multiline is true: prose always wraps, and a single line always scrolls in its line. — Text input |
maxLength | number | 0 | The most user-perceived characters the user can enter; 0 is no limit. Ignored for date, time and date-time. — Text input |
counter | boolean | false | Keeps the character count (and maxLength, when set): part of the input's description and announced when typing pauses (TXI-19). The input draws none: a text field gives the count to its Field, which draws it at the end of its supporting row, and a product that frames the input by hand gives it to the Field's countText. — Text input The input keeps the count, the text field gives it to its Field, and the Field draws it (TXI-19, TXF-67, FLD-27). |
counterText | string | "" | The count said to assistive technology while counter is true and maxLength is greater than 0: the whole sentence in the product's language with three places the input fills — {count} with the characters entered, {limit} with maxLength and {remaining} with how many more can be entered ("{remaining} characters left", "{limit}文字中{count}文字"). Empty reads the product's words; with neither, the count is said as the digits it is drawn in ("12/40"). A sentence that is right for every number, or a prop set per count where the language needs another form for one. — Text input |
counterNoLimitText | string | "" | The count said to assistive technology while counter is true and maxLength is 0: the whole sentence with one place, {count}, filled with the characters entered ("{count} characters", "{count}文字"). Empty reads the product's words; with neither, the count is said as its digits. — Text input |
prefixText | string | "" | Fixed text before the value, not part of it. In a code field it is code: drawn in the code face at the left of the value in every layout direction (TXI-53). — Text input |
suffixText | string | "" | Fixed text after the value, not part of it. In a code field it is code: drawn in the code face at the right of the value in every layout direction (TXI-53). — Text input |
autocomplete | string | "" | The autofill hint, as an HTML autofill field name (email, current-password, new-password, one-time-code, tel, postal-code, …); each platform maps it to its own content type. A code field left without one asks the platform to offer no remembered entry (TXI-55). — Text input |
locale | string | "" | A BCP 47 language tag ("en-US", "ja-JP") for how a date, time or date-time field shows and reads its value: the order of the year, month and day segments, the separators, the clock, the digits and the names of the units. Empty uses the platform's current locale. The calendar is the Gregorian calendar in every locale. — Text input |
min | string | "" | The earliest value a date, time or date-time field accepts from the person, in its ISO 8601 form; empty for no limit. — Text input |
max | string | "" | The latest value a date, time or date-time field accepts from the person, in its ISO 8601 form; empty for no limit. — Text input |
disabledDates | strings | | Dates inside min and max that a date or date-time field does not accept from the person, as ISO 8601 calendar dates — the same list the product gives its DateTimePicker. Ignored by a time field. — Text input |
invalidText | string | "" | The words for a date, time or date-time input committed with some segments filled and others empty: given to the Field that frames it, which shows them as its error text (TXI-30). — Text input Shown by the Field, in its supporting row (FLD-28). |
unavailableText | string | "" | The words for a date, time or date-time input committed with a value before min, after max or, for a date, listed in disabledDates: given to the Field that frames it, which shows them as its error text (TXI-30). — Text input Shown by the Field, in its supporting row (FLD-28). |
segmentEmptyText | string | "" | What assistive technology reads as the value of a date or time segment that holds nothing yet, in the product's language ("Empty"). The product's: Tanrei has no word for it. Empty reads the product's words; with neither, an empty segment has no value text. — Text input |
picker | boolean | false | Shows the picker button in a date, time or date-time field. The field presents no picker itself: it emits pickerRequest, and the product presents a DateTimePicker in the matching mode and sets value to what was picked. — Text input |
pickerLabel | string | "" | The accessible name of the picker button ("Choose date"). Required while picker is shown. — Text input |
स्लॉट
| स्लॉट | विवरण |
|---|---|
leading-icon | An icon at the start of the input. — Text input |
trailing-icon | An icon at the end of the input, or the product's own icon-only Button (clear, reveal password). A date or time field's picker button comes after it. — Text input |
label-icon | A glyph before the label. — Field |
इवेंट
| इवेंट | विवरण |
|---|---|
input | The user changed the value; carries the new value. Emitted for every change, not when the product sets value. A date, time or date-time field emits it when its value changes — when its last segment is filled, a filled field is edited, or it is emptied — not for a segment that leaves the value empty. — Text input |
change | The user committed a changed value (focus left the field, or the action key was pressed in a single-line field); carries the value. — Text input |
action | The user pressed the keyboard's action key (Enter, Return, Go, Search, Done) in a single-line field. — Text input |
pickerRequest | The user activated the picker button of a date, time or date-time field; carries the value, type, min and max. The product presents the picker and sets value to the picked value. — Text input |
entryError | The user committed a date, time or date-time field that is half-filled or whose value is not available; carries the reason (invalid: some segments are empty; unavailable: before min, after max or a listed date) and the text of the row of segments as drawn. The entry error itself is shown by the Field that frames the input (TXI-30). — Text input |
resizeEnd | The person finished changing the size of a field resized by hand: a drag of its handle ended, or a key or an activation of the handle changed the size (TXI-69). Carries lines, the number of lines the input shows, and width, the field's width in pixels WHILE resizeAxis is both (null otherwise). Not emitted when a change of resize, resizeAxis, minRows or maxRows gives the size back. — Text input |
स्टेट
व्यवहार
EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।
| ID | आवश्यकता |
|---|---|
TXF-62 | THE text field SHALL be a Field that frames one text input, and nothing else. It SHALL give label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText and optionalText to its Field and every other prop to its text input, each unchanged; SHALL hold the label-icon slot for its Field and the leading-icon and trailing-icon slots for its text input; and SHALL emit its text input's events as its own, each once. THE text field SHALL be as wide as the place it stands in, and its text input SHALL fill it: it is a block with no width of its own, as its Field is (FLD-1), around a control that fills the width it is given (TXI-63). It SHALL draw no part of its own, have no token of its own and hold no state of its own but the count it carries from one member to the other (TXF-67): what it shows, how it behaves and what it exposes to assistive technology SHALL be exactly what that Field and that text input do when a product places the one in the other (FLD-1 to FLD-28; TXI-1 to TXI-63), with the Field given the input's count — the label row and its requirement mark (FLD-2 to FLD-6), or the label that floats in the box with the Field's row left out (FLD-25, TXI-13, TXI-50); the supporting row, the error and the count (FLD-7 to FLD-9, FLD-26, FLD-27, TXI-19, TXF-67); the name, the description and the states (FLD-10, FLD-11, FLD-14, TXI-23); and a date's entry error shown in the Field's row (FLD-28, TXI-30). |
TXF-63 | WHERE the platform has forms (the web) THE text field SHALL be the one control the form sees: it SHALL take name, submit its text input's value, reset to the value it was first given, restore it on navigation, report to the form's constraint validation exactly what its text input would report there (TXI-23, TXI-30), and be left out WHILE disabled is true or a disabled group of the form holds it; its text input and its Field SHALL take no part in the form themselves. WHEN the action key asks for the form's submission (TXI-3) the form asked SHALL be the text field's own. |
TXF-64 | WHEN the text field is given focus — by the product, by a press on any part of it that FLD-12 or TXI-8 gives to the input, or by a form that reports its validity — THE text field SHALL pass the focus to its text input (in a date, time or date-time field, to the segment TXI-43 names) and SHALL add no stop to the focus order: the stops inside it are its text input's, in that input's order (an interactive slot element, the picker button, the resize handle). WHILE focus is anywhere inside it THE text field SHALL count as focused for its Field (FLD-13). |
TXF-65 | IF the text field is placed in a Field THE text field SHALL in debug builds report that it is a field already and that the bare control is the text input, and both SHALL still render (FLD-15). WHILE it stands in a field group THE text field SHALL follow that group's disabled, through its own Field, and take nothing else from the group (FGR-20). |
TXF-66 | THE text field SHALL have no words of its own and SHALL read none: requiredText and optionalText are read by its Field (FLD-24), resizeLabel and segmentEmptyText by its text input (TXI-52), each from the instance's prop and then from the product's words. |
TXF-67 | WHILE counter is true THE text field SHALL give its Field, as its count text (FLD-27), the count its text input keeps (TXI-19), as the input writes it, and SHALL give the new one in the same frame in which the value changes — by typing, by a paste, because the product set value or maxLength — without a motion and without an announcement of its own: the input describes and announces its count itself (TXI-19) and the Field keeps the drawn text from assistive technology (FLD-27). WHILE counter is false THE text field SHALL give its Field no count text. THE text field SHALL NOT count, format or write a digit itself. |
TXF-68 | WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE text field SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the text field is invalid — except those the text field owns (aria-label, aria-labelledby, aria-disabled), which it SHALL move and not expose: its name is label (TXF-62). WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE text field SHALL take it off that element. WHEN the product sets an aria- attribute the text field owns THE text field SHALL report it in debug builds. |
प्लैटफ़ॉर्म के अनुसार नामों का मिलान
पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।
| स्पेक | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| कंपोनेंट | tanrei-text-field | TanreiTextField | TanreiTextField | TanreiTextField | TextField |
variant · प्रॉपर्टी | variant | variant | variant | variant | variant |
size · प्रॉपर्टी | size | size | size | size | size |
type · प्रॉपर्टी | type | type | type | type | type |
value · प्रॉपर्टी | value | text | value | controller | value |
label · प्रॉपर्टी | label | label | label | labelText | label |
labelHidden · प्रॉपर्टी | labelHidden | labelsHidden | labelHidden | labelHidden | labelHidden |
placeholder · प्रॉपर्टी | placeholder | prompt | placeholder | hintText | placeholder |
supportingText · प्रॉपर्टी | supportingText | supportingText | supportingText | helperText | supportingText |
errorText · प्रॉपर्टी | errorText | errorText | errorText | errorText | errorText |
error · प्रॉपर्टी | error | error | isError | isError | error |
disabled · प्रॉपर्टी | disabled | disabled | enabled | enabled | disabled |
readOnly · प्रॉपर्टी | readOnly | readOnly | readOnly | readOnly | readOnly |
required · प्रॉपर्टी | required | isRequired | required | required | required |
optional · प्रॉपर्टी | optional | isOptional | optional | optional | optional |
requiredMark · प्रॉपर्टी | requiredMark | requiredMark | requiredMark | requiredMark | requiredMark |
requiredText · प्रॉपर्टी | requiredText | requiredText | requiredText | requiredText | requiredText |
optionalText · प्रॉपर्टी | optionalText | optionalText | optionalText | optionalText | optionalText |
multiline · प्रॉपर्टी | multiline | axis | singleLine | multiline | multiline |
minRows · प्रॉपर्टी | minRows | lineLimit | minLines | minLines | minRows |
maxRows · प्रॉपर्टी | maxRows | lineLimit | maxLines | maxLines | maxRows |
resize · प्रॉपर्टी | resize | resize | resize | resize | resize |
resizeAxis · प्रॉपर्टी | resizeAxis | resizeAxis | resizeAxis | resizeAxis | resizeAxis |
resizeLabel · प्रॉपर्टी | resizeLabel | resizeLabel | resizeContentDescription | resizeSemanticLabel | resizeAccessibilityLabel |
wrap · प्रॉपर्टी | noWrap | wrap | softWrap | softWrap | wrap |
maxLength · प्रॉपर्टी | maxLength | maxLength | maxLength | maxLength | maxLength |
counter · प्रॉपर्टी | counter | counter | counter | showCounter | counter |
counterText · प्रॉपर्टी | counterText | counterText | counterText | counterSemanticText | counterAccessibilityText |
counterNoLimitText · प्रॉपर्टी | counterNoLimitText | counterNoLimitText | counterNoLimitText | counterNoLimitSemanticText | counterNoLimitAccessibilityText |
prefixText · प्रॉपर्टी | prefixText | prefix | prefix | prefixText | prefix |
suffixText · प्रॉपर्टी | suffixText | suffix | suffix | suffixText | suffix |
autocomplete · प्रॉपर्टी | autocomplete | textContentType | contentType | autofillHints | autoComplete |
locale · प्रॉपर्टी | locale | locale | locale | locale | locale |
min · प्रॉपर्टी | min | min | min | min | min |
max · प्रॉपर्टी | max | max | max | max | max |
disabledDates · प्रॉपर्टी | disabledDates | disabledDates | disabledDates | disabledDates | disabledDates |
invalidText · प्रॉपर्टी | invalidText | invalidText | invalidText | invalidText | invalidText |
unavailableText · प्रॉपर्टी | unavailableText | unavailableText | unavailableText | unavailableText | unavailableText |
segmentEmptyText · प्रॉपर्टी | segmentEmptyText | segmentEmptyText | segmentEmptyText | segmentEmptyText | segmentEmptyText |
picker · प्रॉपर्टी | picker | onPickerRequest | onPickerRequest | onPickerRequest | onPickerRequest |
pickerLabel · प्रॉपर्टी | pickerLabel | pickerLabel | pickerContentDescription | pickerSemanticLabel | pickerAccessibilityLabel |
input · इवेंट | input | text | onValueChange | onChanged | onChangeText |
change · इवेंट | change | onCommit | onCommit | onCommit | onEndEditing |
action · इवेंट | action | onSubmit | keyboardActions | onSubmitted | onSubmitEditing |
pickerRequest · इवेंट | pickerrequest | onPickerRequest | onPickerRequest | onPickerRequest | onPickerRequest |
entryError · इवेंट | entryerror | onEntryError | onEntryError | onEntryError | onEntryError |
resizeEnd · इवेंट | resizeend | onResizeEnd | onResizeEnd | onResizeEnd | onResizeEnd |
| टिप्पणियाँ | The tag is tanrei-text-field, the class TanreiTextField, the React name TextField. Members: <tanrei-field> holding one <tanrei-text-input> in its default slot; the product places none. The host is display: block, as wide as its place, and the input fills it (TXF-62). Value member: tanrei-text-input. The host is the form's element — name, the value and its state, validity anchored on the input, reset to the value attribute, restore, form, a disabled fieldset — and the input inside has no name. Props, set as properties on the member each is from. On the Field: label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText, optionalText. On the text input: variant, size, type, value, placeholder, readOnly, multiline, minRows, maxRows, resize, resizeAxis, resizeLabel, noWrap (the inverse of wrap, attribute no-wrap), maxLength, counter, prefixText, suffixText, autocomplete, locale, min, max, disabledDates, invalidText, unavailableText, segmentEmptyText, picker, pickerLabel. Attributes are the members' own: kebab-case, except readonly, maxlength, autocomplete, min and max. Props of one name on both members — label, labelHidden, error, disabled — are the Field's; the input's are never set by the element and reach the input through the connection. Events: input, change, action, pickerrequest, entryerror are the text input's own composed events and leave by themselves, with the host as their target and value already new; action stays cancelable. None is stopped and none is copied. Slots: label-icon is passed to the Field, leading-icon and trailing-icon to the text input, each by a slot element of the same name rendered only while the host has a child for it; the product's own Button in trailing-icon stays the product's element. Parts: the member hosts are field and text-input. Exported from the Field: label, label-icon, requirement-label, supporting-text, counter. Exported from the text input: container, outline, active-indicator, label, requirement-label, input, segment, prefix, suffix, leading-icon, trailing-icon, picker-button, resize-handle. Two names collide, label and requirement-label. Each is exported with its member's name before it, always (field-label, text-input-label, field-requirement-label, text-input-requirement-label), and under the bare name from both members as well, because the two are one thing to a person and are never drawn at once: FLD-25 is the sentence that holds it — while its control draws the label itself the Field draws no label row and no requirement tag, and a stacked input draws neither (TXI-13, TXI-50). So tanrei-text-field::part(label) keeps meaning the drawn label. Focus: the shadow root does not delegate. focus() and blur() call the text input's; a press on the label row — the label, its glyph, the requirement mark — focuses the input by FLD-12, the Field's own sentence (the Field calls focus() on its control, which stands beside it in the same tree); a press on the box, and on a label that floats in it, by TXI-8; and a press on the supporting row — the help, the error text, the count — or on the gap between a row and the box does nothing (FLD-12). The connection is the Field's with its control, in both directions (FLD-25, FLD-26, FLD-28, TXI-62); the element takes no part in it. A member's prop it sets itself (fills): the Field's countText, from the text input's read-only countText after each of the input's updates, in the same task (TXF-67). Parts and tokens of its own: none. The element writes no custom property: --tanrei-comp-field-*, --tanrei-comp-input-box-* and --tanrei-comp-text-input-* reach the members by inheritance, and one text field is set apart by setting any of them on the element. What its twin cannot do that it does: keep the Field's count text equal to the input's count as the person types (TXF-67); nothing else. The twin: <tanrei-field label="Email" supporting-text="We never share your address." required><tanrei-text-input name="email" type="email" autocomplete="email"></tanrei-text-input></tanrei-field>. Its Field draws the help and the error text together (FLD-7, FLD-31), and the five fixtures *-supporting-error* hold the pair to its twin. | Lagging: this platform draws the text field as one view that draws its own frame, written against the token group comp.text-field, which the tokens do not have. It owes, first, its sources moved to the generated names of comp.input-box, comp.text-input and comp.field: they do not compile until then. Then the split: the text input as a view of its own, and the text field as the Field around it. Its names and its props stay. What it does today: text: Binding<String> (as TextField); every edit writes the binding, which is the input event. password draws a SecureField; multiline is TextField(axis: .vertical) with .lineLimit(minRows...maxRows) — not TextEditor, which has no prompt and does not grow. labelHidden follows the .labelsHidden() environment; disabled follows .disabled(_:); action is the onSubmit: parameter, called after the commit (TXI-3); an enclosing .onSubmit modifier still fires, but before the commit, because SwiftUI runs the outer handler first. onCommit is Tanrei's own parameter (SwiftUI deprecated its own), called when focus leaves with a changed value. type maps to .keyboardType, .textInputAutocapitalization, .autocorrectionDisabled and .submitLabel; autocomplete maps HTML names to UITextContentType. locale follows the \.locale environment when not given. The picker button is shown when an onPickerRequest: closure is given (a nil closure is picker false); the product presents the picker and writes the binding. Not built on this platform yet: the optional flag (optional) beside the required flag; the resize modes and the handle (TXI-37–TXI-41, TXI-69), the segmented date and time row (TXI-42–TXI-47) and the requirement label (FLD-4, FLD-5, TXI-50). The platform proposes its own idiom for the segments when it catches up — each unit focusable and adjustable on its own, with the same value and events. Not built on this platform yet: the words props have no defaults, and the product's words are read from the \.tanreiWords environment value. Not built on this platform yet, for type code: .autocorrectionDisabled(), .textInputAutocapitalization(.never), .keyboardType(.asciiCapable), a monospaced design of the input's size, and .environment(\.layoutDirection, .leftToRight) on the input row alone; smart quotes, smart dashes and smart insert and delete are traits of the UIKit and AppKit text view (smartQuotesType, smartDashesType, smartInsertDeleteType, isAutomaticQuoteSubstitutionEnabled), so a code field is drawn on that view where SwiftUI's TextField gives no access to them; wrap: false needs that view too (a text container that does not track the view's width, in a scroll view), because TextField(axis: .vertical) always wraps. Not built on this platform yet: the count said as the product's sentence (counterText, counterNoLimitText, TXI-19); today the digits are said. Not built on this platform yet: comp.field.error-text.placement — the error text takes the help's place under every system, which is replace, the default; append, which keeps the help and draws the error text below it, is not drawn (FLD-7, FLD-31). Not built on this platform yet: size small (40), and in a right-to-left layout the value of an always left-to-right type beside its prefix (TXI-67). | Lagging: this platform draws the text field as one view that draws its own frame, written against the token group comp.text-field, which the tokens do not have. It owes, first, its sources moved to the generated names of comp.input-box, comp.text-input and comp.field: they do not compile until then. Then the split: the text input as a view of its own, and the text field as the Field around it. Its names and its props stay. What it does today: Compose idiom (as TextField): value / onValueChange, with a TextFieldValue overload for products that manage selection and composition themselves; enabled and singleLine are inverse flags; isError, readOnly, minLines, maxLines, prefix and suffix keep Compose's names. Built on BasicTextField. type maps to KeyboardOptions (keyboard type, capitalization, autocorrect, IME action) and, for password, PasswordVisualTransformation; autocomplete maps to ContentType semantics. onCommit is Tanrei's own callback, called when focus leaves with a changed value or the IME action commits. locale defaults to the current configuration's locale. The picker button is shown when onPickerRequest is not null (null is picker false); pickerContentDescription follows Compose's naming for an icon's accessible name. Not built on this platform yet: the optional flag (optional) beside the required flag; the resize modes and the handle (TXI-37–TXI-41, TXI-69), the segmented date and time row (TXI-42–TXI-47) and the requirement label (FLD-4, FLD-5, TXI-50). The platform proposes its own idiom for the segments when it catches up — each unit focusable and adjustable on its own, with the same value and events. Not built on this platform yet: the words props have no defaults, and the product's words are read from LocalTanreiWords. Not built on this platform yet, for type code: KeyboardOptions(capitalization = KeyboardCapitalization.None, autoCorrectEnabled = false, keyboardType = KeyboardType.Ascii), TextStyle(textDirection = TextDirection.Ltr, textAlign = TextAlign.Left, fontFamily = …, fontFeatureSettings = "liga 0") on the input row inside CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr); softWrap = false puts the BasicTextField in a horizontalScroll that follows the cursor's rectangle. Not built on this platform yet: the count said as the product's sentence (counterText, counterNoLimitText, TXI-19); today the digits are said. Not built on this platform yet: comp.field.error-text.placement — the error text takes the help's place under every system, which is replace, the default; append, which keeps the help and draws the error text below it, is not drawn (FLD-7, FLD-31). Not built on this platform yet: size small (40), and in a right-to-left layout the value of an always left-to-right type beside its prefix (TXI-67). | Lagging: this platform draws the text field as one view that draws its own frame, written against the token group comp.text-field, which the tokens do not have. It owes, first, its sources moved to the generated names of comp.input-box, comp.text-input and comp.field: they do not compile until then. Then the split: the text input as a view of its own, and the text field as the Field around it. Its names and its props stay. What it does today: Flutter idiom (as TextField and InputDecoration): the value lives in a TextEditingController (or an internal one with initialValue); labelText, hintText, helperText, errorText, prefixText, suffixText, minLines, maxLines, maxLength, readOnly, enabled and autofillHints keep Flutter's names, enabled being the inverse flag. isRequired and showCounter avoid Dart's required keyword and Flutter's own counter, which Tanrei replaces (it counts grapheme clusters with characters). maxRows: 0 is maxLines: null. type maps to keyboardType, obscureText, autocorrect, textCapitalization and textInputAction. onCommit is Tanrei's own callback, called when focus leaves with a changed value. locale defaults to Localizations.localeOf(context). The picker button is shown when onPickerRequest is not null (null is picker false). Not built on this platform yet: the optional flag (optional) beside the required flag; the resize modes and the handle (TXI-37–TXI-41, TXI-69), the segmented date and time row (TXI-42–TXI-47) and the requirement label (FLD-4, FLD-5, TXI-50). The platform proposes its own idiom for the segments when it catches up — each unit focusable and adjustable on its own, with the same value and events. Not built on this platform yet: the words props have no defaults, and the product's words are read from the TanreiWords inherited widget, which the app fills from its own localizations. Not built on this platform yet, for type code: autocorrect: false, enableSuggestions: false, textCapitalization: TextCapitalization.none, smartDashesType: SmartDashesType.disabled, smartQuotesType: SmartQuotesType.disabled, spellCheckConfiguration: const SpellCheckConfiguration.disabled(), textDirection: TextDirection.ltr, textAlign: TextAlign.left, a TextStyle with the code family and fontFeatures: [FontFeature.disable('liga')], the input row in a Directionality(textDirection: TextDirection.ltr); softWrap: false is an EditableText of unbounded width in a horizontal Scrollable that keeps the caret in view, because a multi-line TextField always wraps. Not built on this platform yet: helperText stays while the field is in error and errorText is drawn below it (FLD-7, FLD-31), unlike InputDecoration; today the error text takes the help's place. Not built on this platform yet: the count said as the product's sentence (counterText, counterNoLimitText, TXI-19); today the digits are said. Not built on this platform yet: comp.field.error-text.placement (FLD-7, FLD-31), size small (40), and in a right-to-left layout the value of an always left-to-right type beside its prefix (TXI-67). | Lagging: this platform draws the text field as one view that draws its own frame, written against the token group comp.text-field, which the tokens do not have. It owes, first, its sources moved to the generated names of comp.input-box, comp.text-input and comp.field: they do not compile until then. Then the split: the text input as a view of its own, and the text field as the Field around it. Its names and its props stay. What it does today: React Native idiom (as TextInput): value / onChangeText, onEndEditing for a commit, onSubmitEditing for the action key; multiline, readOnly, maxLength and autoComplete keep TextInput's names. type maps to keyboardType, secureTextEntry, autoCapitalize, autoCorrect, inputMode and returnKeyType. A controlled value echoed back during a composition must not reset it (TXI-4). React Native gives JavaScript no signal that a composition is in progress, so the component cannot defer a write the product makes mid-composition; echoing the value back is safe. For date, time and date-time, onChangeText receives the value (ISO 8601 or empty), not the text as typed (TXI-29). The picker button is shown when onPickerRequest is given (undefined is picker false). Locale data needs Intl with formatToParts, which Hermes has only in part. Not built on this platform yet: the optional flag (optional) beside the required flag; the resize modes and the handle (TXI-37–TXI-41, TXI-69), the segmented date and time row (TXI-42–TXI-47) and the requirement label (FLD-4, FLD-5, TXI-50). The platform proposes its own idiom for the segments when it catches up — each unit focusable and adjustable on its own, with the same value and events. Not built on this platform yet: the words props have no defaults, and the product's words are read from the TanreiWordsProvider context. Not built on this platform yet, for type code: autoCorrect={false}, autoCapitalize="none", spellCheck={false}, autoComplete="off", smartInsertDelete={false}, keyboardType="ascii-capable" on iOS and "visible-password" on Android only where suggestions cannot be turned off otherwise, style={{ writingDirection: 'ltr', textAlign: 'left', fontFamily: … }}, the input row with direction: 'ltr'. TextInput has no multi-line form that does not wrap: wrap={false} needs a native text view, and until one exists the field wraps and its README says so. Not built on this platform yet: the count said as the product's sentence (counterText, counterNoLimitText, TXI-19); today the digits are said. Not built on this platform yet: comp.field.error-text.placement — the error text takes the help's place under every system, which is replace, the default; append, which keeps the help and draws the error text below it, is not drawn (FLD-7, FLD-31). Not built on this platform yet: size small (40), and in a right-to-left layout the value of an always left-to-right type beside its prefix (TXI-67). |
टोकन
| टोकन | किसका एलियास | रिज़ॉल्व किया गया मान (लाइट) |
|---|---|---|
--tanrei-comp-field-counter-gap | sys.space.space200 | 16px |
--tanrei-comp-field-error-text-gap | sys.space.space50 | 4px |
--tanrei-comp-field-error-text-placement | — | 0 |
--tanrei-comp-field-label-icon-gap | sys.space.space100 | 8px |
--tanrei-comp-field-label-icon-size | sys.icon.small | 20px |
--tanrei-comp-field-label-gap | sys.space.space100 | 8px |
--tanrei-comp-field-motion-state-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-field-motion-state-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-field-requirement-asterisk-gap | sys.space.space25 | 2px |
--tanrei-comp-field-requirement-gap | sys.space.space100 | 8px |
--tanrei-comp-field-requirement-mark | sys.behavior.requirement-mark | 0 |
--tanrei-comp-field-standard-counter-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-disabled-counter-color | — | |
--tanrei-comp-field-standard-disabled-error-text-color | — | |
--tanrei-comp-field-standard-disabled-error-counter-color | — | |
--tanrei-comp-field-standard-disabled-error-label-icon-color | — | |
--tanrei-comp-field-standard-disabled-error-label-color | — | |
--tanrei-comp-field-standard-disabled-error-required-asterisk-color | — | |
--tanrei-comp-field-standard-disabled-error-supporting-text-color | — | |
--tanrei-comp-field-standard-disabled-error-value-text-color | — | |
--tanrei-comp-field-standard-disabled-label-icon-color | — | |
--tanrei-comp-field-standard-disabled-label-color | — | |
--tanrei-comp-field-standard-disabled-required-asterisk-color | — | |
--tanrei-comp-field-standard-disabled-supporting-text-color | — | |
--tanrei-comp-field-standard-disabled-value-text-color | — | |
--tanrei-comp-field-standard-error-text-color | sys.color.error | |
--tanrei-comp-field-standard-error-counter-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-error-label-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-error-label-color | sys.color.on-surface | |
--tanrei-comp-field-standard-error-required-asterisk-color | sys.color.primary | |
--tanrei-comp-field-standard-error-supporting-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-error-value-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-focused-counter-color | — | |
--tanrei-comp-field-standard-focused-error-text-color | — | |
--tanrei-comp-field-standard-focused-error-counter-color | — | |
--tanrei-comp-field-standard-focused-error-label-icon-color | — | |
--tanrei-comp-field-standard-focused-error-label-color | — | |
--tanrei-comp-field-standard-focused-error-required-asterisk-color | — | |
--tanrei-comp-field-standard-focused-error-supporting-text-color | — | |
--tanrei-comp-field-standard-focused-error-value-text-color | — | |
--tanrei-comp-field-standard-focused-label-icon-color | — | |
--tanrei-comp-field-standard-focused-label-color | — | |
--tanrei-comp-field-standard-focused-required-asterisk-color | — | |
--tanrei-comp-field-standard-focused-supporting-text-color | — | |
--tanrei-comp-field-standard-focused-value-text-color | — | |
--tanrei-comp-field-standard-label-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-label-color | sys.color.on-surface | |
--tanrei-comp-field-standard-required-asterisk-color | sys.color.primary | |
--tanrei-comp-field-standard-supporting-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-standard-value-text-color | sys.color.on-surface-variant | |
--tanrei-comp-field-supporting-text-gap | sys.space.space50 | 4px |
--tanrei-comp-field-value-text-gap | sys.space.space200 | 16px |
--tanrei-comp-field-label-typescale | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-field-supporting-text-typescale | sys.typescale.label-small | 500 12px/1.3333 |
--tanrei-comp-field-value-text-typescale | sys.typescale.label | 500 14px/1.4286 |
फ़िक्स्चर
मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।
variant: stacked (71)
stacked-empty
variant: stacked label: Email stacked-filled
variant: stacked value: [email protected] label: Email stacked-placeholder
variant: stacked label: Email placeholder: [email protected] stacked-large
variant: stacked size: large value: [email protected] label: Email stacked-small
variant: stacked size: small value: tokens label: Search stacked-label-hidden
variant: stacked label: Search labelHidden: true placeholder: Search stacked-supporting
variant: stacked value: [email protected] label: Email supportingText: We never share your address. stacked-error
variant: stacked value: ada@ label: Email errorText: Enter a complete address. error: true stacked-supporting-error
variant: stacked type: password value: ada1 label: Password supportingText: At least 8 characters, with one number. errorText: This password is too short. error: true stacked-supporting-error-long
variant: stacked value: 12 Example Stret label: Billing address supportingText: Use the address your bank has on file, w… errorText: We could not find this address. Check th… error: true stacked-supporting-error-rtl
variant: stacked type: password value: ada1 label: סיסמה supportingText: לפחות 8 תווים, כולל ספרה אחת. errorText: הסיסמה קצרה מדי. error: true direction: rtl stacked-disabled
variant: stacked value: [email protected] label: Email disabled: true stacked-read-only
variant: stacked value: [email protected] label: Email readOnly: true stacked-icons
variant: stacked value: tanrei label: Search stacked-label-icon
variant: stacked value: Ada Lovelace label: Display name slots: label-icon stacked-affixes
variant: stacked type: number value: 120 label: Amount prefixText: $ suffixText: USD stacked-counter
variant: stacked value: Ada Lovelace label: Display name maxLength: 40 counter: true stacked-supporting-error-counter
variant: stacked value: Ada label: Display name supportingText: Shown beside your posts. errorText: This name is taken. Choose another. error: true maxLength: 40 counter: true stacked-multiline
variant: stacked value: Thanks for the review.
The new tokens ar… label: Message multiline: true minRows: 3 stacked-password
variant: stacked type: password value: correct horse label: Password stacked-date
variant: stacked type: date value: 2026-09-27 label: Start date locale: en-US stacked-date-empty
variant: stacked type: date label: Start date locale: en-US segmentEmptyText: Empty stacked-date-picker
variant: stacked type: date value: 2026-09-27 label: Start date locale: en-US picker: true pickerLabel: Choose date stacked-date-picker-large
variant: stacked size: large type: date value: 2026-09-27 label: Start date locale: en-US picker: true pickerLabel: Choose date stacked-date-ja
variant: stacked type: date value: 2026-09-27 label: 開始日 locale: ja-JP picker: true pickerLabel: 日付を選択 stacked-time-picker
variant: stacked type: time value: 14:30 label: Start time locale: en-US picker: true pickerLabel: Choose time stacked-date-time-picker
variant: stacked type: date-time value: 2026-09-27T14:30 label: Starts locale: en-US picker: true pickerLabel: Choose date and time stacked-date-error
variant: stacked type: date value: 2026-09-27 label: Start date errorText: Choose a date after today. error: true locale: en-US picker: true pickerLabel: Choose date stacked-date-disabled
variant: stacked type: date value: 2026-09-27 label: Start date disabled: true locale: en-US picker: true pickerLabel: Choose date stacked-multiline-auto-grown
variant: stacked value: Thanks for the review.
The new tokens ar… label: Message multiline: true stacked-multiline-auto-grown-icons
variant: stacked value: Thanks for the review.
The new tokens ar… label: Message multiline: true stacked-multiline-auto-max
variant: stacked value: Thanks for the review.
The new tokens ar… label: Message multiline: true maxRows: 3 stacked-multiline-manual
variant: stacked value: Thanks for the review.
The new tokens ar… label: Message multiline: true minRows: 3 resize: manual resizeLabel: Resize stacked-multiline-manual-both
variant: stacked value: Thanks for the review.
The new tokens ar… label: Message multiline: true minRows: 3 resize: manual resizeAxis: both resizeLabel: Resize stacked-multiline-manual-rtl
variant: stacked value: תודה על הסקירה. label: הודעה multiline: true minRows: 3 resize: manual resizeAxis: both resizeLabel: שינוי גודל direction: rtl stacked-multiline-fixed
variant: stacked value: Thanks for the review.
The new tokens ar… label: Message multiline: true minRows: 3 resize: fixed stacked-time-empty
variant: stacked type: time label: Start time locale: en-US segmentEmptyText: Empty stacked-time-24h
variant: stacked type: time value: 14:30 label: 開始時刻 locale: ja-JP stacked-date-rtl
variant: stacked type: date value: 2026-09-27 label: תאריך התחלה locale: he-IL picker: true pickerLabel: בחירת תאריך direction: rtl stacked-required
variant: stacked label: Email required: true requiredText: Required stacked-optional
variant: stacked label: Company optional: true optionalText: Optional stacked-required-asterisk
variant: stacked label: Email required: true requiredMark: asterisk stacked-required-ja
variant: stacked value: 山田 太郎 label: 氏名 required: true requiredText: 必須 stacked-optional-ja
variant: stacked label: 会社名 optional: true optionalText: 任意 stacked-required-label-icon
variant: stacked value: Ada Lovelace label: Display name required: true requiredText: Required slots: label-icon stacked-required-error
variant: stacked label: Email errorText: Enter your email address. error: true required: true requiredText: Required stacked-required-disabled
variant: stacked value: [email protected] label: Email disabled: true required: true requiredText: Required stacked-required-rtl
variant: stacked label: אימייל required: true requiredText: חובה direction: rtl stacked-code
variant: stacked type: code value: tanrei.comp.button.*.container.color label: Pattern stacked-code-empty
variant: stacked type: code label: Pattern placeholder: tanrei.comp.*.color stacked-code-large
variant: stacked size: large type: code value: tanrei.comp.button.*.container.color label: Pattern stacked-code-affixes
variant: stacked type: code value: ^sys\.color\. label: Pattern supportingText: A regular expression, matched against a… prefixText: / suffixText: /u stacked-code-multiline
variant: stacked type: code value: {
"id": "acme",
"extends": "tanrei"… label: Layer multiline: true minRows: 3 stacked-code-multiline-empty
variant: stacked type: code label: Layer placeholder: { "id": "acme", "extends": "tanrei" } multiline: true minRows: 3 stacked-code-multiline-wrap
variant: stacked type: code value: { "match": "tanrei.comp.button.*.hovered… label: Rule multiline: true stacked-code-multiline-nowrap
variant: stacked type: code value: { "match": "tanrei.comp.button.*.hovered… label: Rule multiline: true minRows: 3 wrap: false stacked-code-multiline-tabs
variant: stacked type: code value: build:
pnpm generate
pnpm check label: Recipe multiline: true stacked-code-multiline-error
variant: stacked type: code value: {
"id": "acme",
} label: Layer errorText: Line 3: a name was expected before }. error: true multiline: true minRows: 3 stacked-code-multiline-counter
variant: stacked type: code value: {
"id": "acme",
"extends": "tanrei"… label: Layer multiline: true maxLength: 200 counter: true stacked-code-multiline-manual
variant: stacked type: code value: { "match": "tanrei.comp.button.*.hovered… label: Rule multiline: true minRows: 3 resize: manual resizeAxis: both resizeLabel: Resize wrap: false stacked-code-multiline-read-only
variant: stacked type: code value: { "match": "tanrei.comp.button.*.hovered… label: Rule readOnly: true multiline: true wrap: false stacked-code-multiline-disabled
variant: stacked type: code value: {
"id": "acme",
"extends": "tanrei"… label: Layer disabled: true multiline: true stacked-code-rtl
variant: stacked type: code value: tanrei.comp.button.*.container.color label: النمط supportingText: معرّف رمز، مع * لأي جزء. direction: rtl stacked-code-empty-rtl
variant: stacked type: code label: النمط placeholder: tanrei.comp.*.color direction: rtl stacked-code-affixes-rtl
variant: stacked type: code value: ^sys\.color\. label: النمط prefixText: / suffixText: /u direction: rtl stacked-code-multiline-rtl
variant: stacked type: code value: {
"id": "acme",
"extends": "tanrei"… label: الطبقة supportingText: الصق ملف الطبقة هنا. required: true requiredText: مطلوب multiline: true minRows: 3 maxLength: 200 counter: true direction: rtl stacked-code-multiline-empty-rtl
variant: stacked type: code label: الطبقة placeholder: { "id": "acme", "extends": "tanrei" } multiline: true minRows: 3 direction: rtl stacked-code-multiline-brace-rtl
variant: stacked type: code value: { label: الطبقة multiline: true minRows: 3 direction: rtl stacked-code-multiline-arabic-first-rtl
variant: stacked type: code value: ["مرحبا", "acme"]
// تعليق: comment label: المصادر multiline: true minRows: 3 direction: rtl stacked-code-multiline-nowrap-rtl
variant: stacked type: code value: { "match": "tanrei.comp.button.*.hovered… label: القاعدة errorText: السطر 2: القاعدة ينقصها سبب. error: true multiline: true minRows: 3 wrap: false direction: rtl stacked-code-multiline-manual-rtl
variant: stacked type: code value: {
"id": "acme",
"extends": "tanrei"… label: الطبقة multiline: true minRows: 3 resize: manual resizeAxis: both resizeLabel: تغيير الحجم direction: rtl variant: filled (7)
filled-empty
variant: filled label: Email filled-filled
variant: filled value: [email protected] label: Email filled-large
variant: filled size: large value: [email protected] label: Email filled-error
variant: filled value: ada@ label: Email errorText: Enter a complete email address. error: true filled-disabled
variant: filled value: [email protected] label: Email disabled: true filled-multiline
variant: filled value: Thanks for the review.
The new tokens ar… label: Message multiline: true minRows: 3 filled-code-multiline
variant: filled type: code value: {
"id": "acme",
"extends": "tanrei"… label: Layer multiline: true minRows: 3 variant: outlined (19)
outlined-empty
variant: outlined label: Email outlined-filled
variant: outlined value: [email protected] label: Email outlined-large
variant: outlined size: large value: [email protected] label: Email outlined-label-hidden
variant: outlined type: search label: Search labelHidden: true placeholder: Search components outlined-supporting
variant: outlined value: [email protected] label: Email supportingText: We only use it to sign you in. outlined-error
variant: outlined value: ada@ label: Email errorText: Enter a complete email address. error: true outlined-supporting-error
variant: outlined value: ada@ label: Email supportingText: We never share your address. errorText: Enter a complete email address. error: true outlined-disabled
variant: outlined value: [email protected] label: Email disabled: true outlined-read-only
variant: outlined value: [email protected] label: Email readOnly: true outlined-icons
variant: outlined value: tanrei label: Search outlined-affixes
variant: outlined type: number value: 120 label: Amount prefixText: $ suffixText: USD outlined-counter
variant: outlined value: Ada Lovelace label: Display name maxLength: 40 counter: true outlined-multiline
variant: outlined value: Thanks for the review.
The new tokens ar… label: Message multiline: true minRows: 3 outlined-password
variant: outlined type: password value: correct horse label: Password outlined-date-picker
variant: outlined type: date value: 2026-09-27 label: Start date locale: en-US picker: true pickerLabel: Choose date outlined-multiline-manual
variant: outlined value: Thanks for the review.
The new tokens ar… label: Message multiline: true minRows: 3 resize: manual resizeLabel: Resize outlined-required
variant: outlined label: Email required: true requiredText: Required outlined-optional
variant: outlined label: Company optional: true optionalText: Optional outlined-code-multiline
variant: outlined type: code value: {
"id": "acme",
"extends": "tanrei"… label: Layer multiline: true minRows: 3 इससे जनरेट किया गया: specs/text-field.spec.json, tokens/comp/field.tokens.json, design/tokens/
- एलिमेंट के शैडो रूट में एक
<tanrei-field>रहता है, जिसके भीतर एक<tanrei-text-input>है, और कुछ नहीं। एलिमेंट को इंपोर्ट करने से दोनों डिफ़ाइन हो जाते हैं। - एलिमेंट एक ब्लॉक है जो अपनी जगह को पूरा भरता है, ब्राउज़र के अपने टेक्स्ट इनपुट जितना चौड़ा इनलाइन बॉक्स नहीं।
- एलिमेंट फ़ॉर्म से जुड़ा एलिमेंट है। वह
nameऔरformलेता है, मान सबमिट करता है (अक्षम रहते कुछ नहीं), रीसेट होने परvalueऐट्रिब्यूट पर लौटता है, नेविगेशन पर बहाल होता है, अक्षम<fieldset>के साथ अक्षम होता है, और जब तकrequiredसेट है और वह ख़ाली है, फ़ॉर्म को बताता है कि मान नहीं है। उसके दोनों सदस्य फ़ॉर्म में कोई एंट्री नहीं जोड़ते। एक पंक्ति वाले फ़ील्ड में Enter एलिमेंट के फ़ॉर्म के डिफ़ॉल्ट बटन को दबाती है; इसे रोकने के लिएactionको रद्द करें। input,change,action,pickerrequestऔरentryerrorटेक्स्ट इनपुट के अपने इवेंट हैं। उनका टार्गेट यही एलिमेंट है, और हर लिसनर मेंevent.target.valueनया मान होता है। detail के टाइप इनपुट के हैं:TanreiTextInputActionDetail,TanreiTextInputPickerRequestDetailऔरTanreiTextInputEntryErrorDetail।- भाग:
fieldऔरtext-inputदोनों सदस्य हैं। उनके अपने भागों के नाम यहाँ वही हैं जो एक स्तर नीचे हैं:label-icon,supporting-text,counter;container,outline,active-indicator,input,segment,prefix,suffix,leading-icon,trailing-icon,picker-button,resize-handle।labelऔरrequirement-labelवे हैं जो दिखाए जाते हैं, उन्हें जो भी सदस्य बनाए;field-label,text-input-label,field-requirement-labelऔरtext-input-requirement-labelसिर्फ़ किसी एक सदस्य के भाग के नाम हैं। - एलिमेंट पर ख़ुद फ़ोकस नहीं जा सकता और उसका कोई रोल नहीं है:
focus()इनपुट पर जाता है। लेबल की पंक्ति, बॉक्स या फ़्लोट होते लेबल पर दबाने से फ़ोकस इनपुट पर जाता है। सहायता, त्रुटि टेक्स्ट, गिनती या किसी पंक्ति और बॉक्स के बीच की ख़ाली जगह पर दबाने से कुछ नहीं होता। - उसे
labelसे नाम दें, और जहाँ लेबल नहीं दिखाना है वहाँ साथ मेंlabel-hiddenदें। उसेaria-labelसे कभी नाम न दें, जो यहाँ किसी चीज़ को नाम नहीं देता। - ऐट्रिब्यूट सदस्यों के अपने हैं: kebab-case में, जैसे
supporting-text,error-text,min-rowsऔरno-wrap, सिवायreadonly,maxlength,autocomplete,minऔरmaxके।requiredऐट्रिब्यूट नहीं है:requiredलिखें। - एलिमेंट के डिफ़ाइन होने से पहले उसका कोई साइज़ नहीं होता। ऊँचाई के लिए जगह रखें।
टेक्स्ट फ़ील्ड तब इस्तेमाल करें जब लोग कोई मान टाइप करते हैं: नाम, ईमेल पता, खोज, संदेश। जब वे मानों के किसी ज्ञात सेट में से चुनते हैं, तो चुनने के लिए बना कंट्रोल इस्तेमाल करें। जहाँ सिर्फ़ बॉक्स चाहिए, क्योंकि लेबल कहीं और है, जैसे टूलबार का फ़िल्टर या टेबल का कोई सेल, वहाँ टेक्स्ट इनपुट इस्तेमाल करें।
पूरे फ़ॉर्म में एक ही वेरिएंट इस्तेमाल करें।
| वेरिएंट | पहचान | कहाँ |
|---|---|---|
| Stacked (डिफ़ॉल्ट) | बिना किनारे वाले, हल्के रंग के बॉक्स के ऊपर लेबल। फ़ोकस होने पर बॉक्स के किनारे के भीतर एक रेखा बनती है, जिससे कुछ भी नहीं खिसकता; त्रुटि होने पर सामान्य अवस्था में एक पतली रेखा बनती है। | हर सिस्टम। Tanrei सिस्टम सिर्फ़ यही वेरिएंट देता है। |
| Filled | हल्के रंग का बॉक्स और नीचे की रेखा, जिसके भीतर लेबल फ़्लोट होता है | Material और cupertino प्रीसेट |
| Outlined | एक बॉर्डर जो फ़ोकस होने पर मोटा हो जाता है, जिसमें लेबल फ़्लोट होकर बैठ जाता है | Material और cupertino प्रीसेट |
डिफ़ॉल्ट हर सिस्टम में stacked है, प्रीसेट में भी। जिस Material प्रॉडक्ट को Material का फ़्लोट होने वाला लेबल चाहिए, वह अपने फ़ील्ड पर variant को outlined या filled सेट करता है। Tanrei सिस्टम में filled और outlined फिर भी काम करते हैं, डेवलपमेंट में एक चेतावनी के साथ।
medium (40) घना फ़ील्ड है और large (56) सामान्य फ़ील्ड। फ़िल्टर और घनी सेटिंग में medium इस्तेमाल करें, और साइन-इन और चेकआउट फ़ॉर्म में large। small (32) छोटे सेलेक्ट की ऊँचाई है, ऐप बार, टूलबार या कंट्रोल की घनी पंक्ति में रखे फ़ील्ड के लिए, जहाँ उसके इनपुट का टेक्स्ट 14 है। डिफ़ॉल्ट सिस्टम में बाक़ी दोनों साइज़ पर इनपुट का टेक्स्ट 16 है। ऊँचाइयाँ न्यूनतम हैं: बड़े टेक्स्ट के साथ फ़ील्ड बढ़ता है, और हिट एरिया हमेशा न्यूनतम टार्गेट पूरा करता है।
- हर फ़ील्ड को एक
labelचाहिए। stacked फ़ील्ड में वह बॉक्स के ऊपर, उसके शुरुआती किनारे से शुरू होकर रहता है, और न कभी खिसकता है, न उसका साइज़ बदलता है; लंबा लेबल काटा नहीं जाता, अगली पंक्ति में चला जाता है।label-iconस्लॉट उसके पहले एक ग्लिफ़ रख सकता है। filled या outlined फ़ील्ड में, जब तक फ़ील्ड ख़ाली है, लेबल फ़ील्ड के भीतर रहता है, और फ़ील्ड पर फ़ोकस आने या उसके भरे होने पर फ़्लोट होता है। labelHiddenलेबल को बनाना बंद कर देता है, पर वह एक्सेसिबल नाम बना रहता है, और सहायता और त्रुटि बॉक्स के नीचे ही रहती हैं। जहाँ सिर्फ़ बॉक्स चाहिए, जैसे टूलबार का फ़िल्टर, कोई सेल, या ऐसी पंक्ति जिसका लेबल उसके बग़ल में है, वहाँ इसकी जगह अपनेlabelवाला टेक्स्ट इनपुट इस्तेमाल करें।- प्लेसहोल्डर एक संकेत है, जैसे मान का कोई उदाहरण। वह तब दिखता है जब फ़ील्ड ख़ाली हो और लेबल इनपुट की पंक्ति में न हो: stacked फ़ील्ड में हमेशा, और बाक़ी में सिर्फ़ तब, जब लेबल फ़्लोट हो चुका हो या छिपा हो। वह कभी नाम नहीं होता।
required और optional बताते हैं कि फ़ॉर्म किसी फ़ील्ड से क्या माँगता है: required कि उसे भरना ज़रूरी है, optional कि उसे ख़ाली छोड़ा जा सकता है। कोई फ़ील्ड एक साथ दोनों नहीं होता: दोनों सेट हों तो वह ज़रूरी है।
- ज़रूरी सहायक तकनीक को फ़ील्ड ज़रूरी के रूप में देता है और लेबल के बग़ल में ज़रूरी का निशान बनाता है।
- वैकल्पिक वैकल्पिक का टैग बनाता है और उसका टेक्स्ट फ़ील्ड के विवरण में जोड़ता है।
- निशान डिफ़ॉल्ट रूप से stacked लेबल के बाद एक छोटा टैग है: ज़रूरी के लिए filled, वैकल्पिक के लिए tonal। उसके शब्द
requiredTextऔरoptionalTextहैं, और वे आपके हैं: फ़ील्ड पर, याsetWords()से पूरे प्रॉडक्ट के लिए एक बार। Tanrei अपना कोई शब्द साथ नहीं देता:requiredTextके बिना टैग की जगह तारांकन दिखता है, औरoptionalTextके बिना कोई टैग नहीं दिखता। वह लेबल की पंक्ति को ऊँचा नहीं करता, और जब लेबल उसके लिए जगह नहीं छोड़ता, तो वह अपनी अलग पंक्ति में चला जाता है। - उसकी जगह तारांकन। ज़रूरी फ़ील्ड कौन-सा निशान बनाता है, यह हर फ़ॉर्म के लिए डिज़ाइन सिस्टम का एक ही चुनाव है,
sys.behavior.requirement-mark: डिफ़ॉल्ट सिस्टम में टैग, Material प्रीसेट में तारांकन, cupertino में कुछ नहीं।requiredMarkकिसी एक फ़ील्ड के लिए इसे बदल देता है (tag,asterisk, याnone, जो सिमैंटिक्स बनाए रखता है और कुछ नहीं बनाता)। filled या outlined फ़ील्ड वहाँ तारांकन बनाता है जहाँ टैग माँगा गया हो। - फ़्लोट होते लेबल में वैकल्पिक। filled या outlined फ़ील्ड में फ़्लोट होते लेबल के बग़ल में वैकल्पिक टैग के लिए जगह नहीं होती: वह इसकी जगह लेबल के बाद
optionalTextको एक शब्द की तरह दिखाता है (“Company Optional”, “कंपनी (वैकल्पिक)”), जो लेबल के साथ टिका रहता है और उसके साथ फ़्लोट होता है। शब्द वैसा ही लिखें जैसा आपके फ़ॉर्म उसे दिखाते हैं, कोष्ठक के साथ या उसके बिना। - यह कुछ भी वैलिडेट नहीं करता। मान न होने पर फ़ील्ड कभी
errorसेट नहीं करता। यह आप करते हैं,errorऔरerrorTextसे।
फ़ॉर्म में दोनों में से उसे चिह्नित करें जो कम हों: जहाँ ज़्यादातर फ़ील्ड ज़रूरी हैं, वहाँ वैकल्पिक फ़ील्ड चिह्नित करें, और जहाँ ज़्यादातर वैकल्पिक हैं, वहाँ ज़रूरी। अगर आप तारांकन इस्तेमाल करते हैं — और filled या outlined फ़ील्ड ज़रूरी फ़ील्ड के लिए हमेशा करता है — तो फ़ॉर्म में, उसके ऊपरी हिस्से के पास, एक बार बताएँ कि उसका क्या मतलब है (“* ज़रूरी”): तारांकन एक परिपाटी है, शब्द नहीं, और हर कोई उसे नहीं जानता।
ज़रूरी फ़ील्ड एक निशान दिखाता है: जहाँ आपको निशान नहीं चाहिए, वहाँ requiredMark को none सेट करें।
supportingTextफ़ील्ड के नीचे सहायता की एक पंक्ति है। इसे फ़ील्ड के विवरण के रूप में भी पढ़ा जाता है।- वैलिडेशन आपका काम है। जब कोई मान ग़लत हो, तो
errorसेट करें औरerrorTextलिखें: फ़ील्ड के त्रुटि में रहते वह सहायक टेक्स्ट की जगह ले लेता है, इसलिए त्रुटि वाला फ़ॉर्म सामान्य से ज़्यादा ऊँचा नहीं होता। जहाँ सहायता की बात अब भी काम की है, उसे इसमें कहें। जो डिज़ाइन सिस्टम सहायता को दिखता रखता है, वहcomp.field.error-text.placementकोappendपर सेट करता है: तब त्रुटि टेक्स्ट सहायता के नीचे दिखाया जाता है, और त्रुटि में रहते फ़ील्ड एक पंक्ति ज़्यादा ऊँचा होता है (फ़ील्ड देखें)। - सिर्फ़ यह नहीं कि मान ग़लत है, यह बताएँ कि उसे कैसे ठीक किया जाए: “पूरा ईमेल पता दर्ज करें।”, न कि “अमान्य”।
- त्रुटि तब दिखाएँ जब व्यक्ति फ़ील्ड छोड़ दे या फ़ॉर्म सबमिट कर दे, तब नहीं जब वह अभी टाइप कर रहा हो।
maxLengthसीमित करता है कि व्यक्ति कितना टाइप कर सकता है। यह अक्षरों को वैसे गिनता है जैसे लोग उन्हें देखते हैं, इसलिए एक इमोजी या मात्रा-चिह्न वाला अक्षर एक ही बार गिना जाता है। पेस्ट किया गया टेक्स्ट सीमा में समाने के लिए छोटा कर दिया जाता है। जो मान आप सेट करते हैं, वह कभी छोटा नहीं किया जाता।counterसहायक पंक्ति के अंत में गिनती दिखाता है, औरmaxLengthसेट होने पर उसके बाद सीमा भी (“12/40”)।- काउंटर सिर्फ़ तब दिखाएँ जब सीमा व्यक्ति के लिए मायने रखती हो, जैसे दिखने वाला नाम या छोटा परिचय।
type कीबोर्ड, ऑटोकरेक्शन और छिपाकर की जाने वाली एंट्री चुनता है। हर टाइप के लिए मान एक स्ट्रिंग है।
| टाइप | कीबोर्ड और व्यवहार |
|---|---|
text |
सामान्य कीबोर्ड। |
email |
ईमेल कीबोर्ड, बिना ऑटोकैपिटलाइज़ेशन या ऑटोकरेक्शन के। |
password |
छिपाई हुई, सुरक्षित एंट्री, बिना ऑटोकरेक्शन के। हमेशा एक पंक्ति। |
number |
दशमलव सेपरेटर वाला संख्या कीबोर्ड। मान को न पार्स किया जाता है, न राउंड, न वैलिडेट। |
search |
सामान्य कीबोर्ड, जिसकी ऐक्शन कुंजी पर खोज लिखा होता है। |
tel |
फ़ोन का कीपैड। |
url |
URL कीबोर्ड, बिना ऑटोकैपिटलाइज़ेशन या ऑटोकरेक्शन के। |
code |
सामान्य कीबोर्ड, और टेक्स्ट के साथ कुछ नहीं किया जाता: न ऑटोकरेक्शन, न ऑटोकैपिटलाइज़ेशन, न स्पेलिंग की जाँच, न किसी अक्षर की जगह कोई दूसरा अक्षर। एक पंक्ति, या multiline के साथ कई। कोड देखें। |
date, time, date-time |
तारीख़, समय, या दोनों, जो लोकेल के अंकों वाले रूप में इकाई-दर-इकाई दर्ज किए जाते हैं। हमेशा एक पंक्ति। तारीख़ और समय देखें। |
autocomplete में HTML का कोई ऑटोफ़िल नाम (email, current-password, one-time-code …) जोड़ें, ताकि प्लैटफ़ॉर्म फ़ील्ड भर सके। हर प्लैटफ़ॉर्म उसे अपने कॉन्टेंट टाइप से जोड़ता है। तय लंबाई का छोटा कोड, जो सेल में दिखाया जाता है, वन-टाइम कोड इनपुट है।
multiline लाइन ब्रेक स्वीकार करता है और कई पंक्तियाँ दिखाता है। resize बताता है कि फ़ील्ड को उसकी ऊँचाई कैसे मिलती है:
resize |
ऊँचाई | हैंडल | minRows और maxRows |
|---|---|---|---|
auto (डिफ़ॉल्ट) |
पंक्तियों की संख्या के साथ चलती है, एक छोटे मोशन के साथ | नहीं | सबसे कम और सबसे ज़्यादा पंक्तियाँ। सबसे ज़्यादा के बाद यह स्क्रॉल होता है; 0 का मतलब कोई सीमा नहीं |
manual |
जितनी व्यक्ति उसे देता है। यह minRows से शुरू होता है |
निचले कोने में, अंतिम किनारे पर | जितना छोटा और जितना ऊँचा इसे बनाया जा सकता है |
fixed |
minRows पंक्तियाँ |
नहीं | maxRows को अनदेखा किया जाता है |
- Auto ज़्यादातर फ़ील्ड के लिए ठीक है: टिप्पणी, संदेश, विवरण। जहाँ लंबे टेक्स्ट को फ़ॉर्म के बाक़ी हिस्से को दूर नहीं धकेलना चाहिए, वहाँ
maxRowsसेट करें। - Manual उस टेक्स्ट के लिए ठीक है जिसे व्यक्ति दोबारा पढ़ता और सँवारता है: नोट, लंबा विवरण, कोड।
resizeAxisडिफ़ॉल्ट रूप सेverticalहै;bothव्यक्ति को फ़ील्ड की चौड़ाई भी बदलने देता है, उतनी ही जितनी उसका लेआउट होने देता है। साइज़ बना रहता है, और टेक्स्ट उसके भीतर अगली पंक्ति में जाता और स्क्रॉल होता है। - Fixed उस फ़ॉर्म के लिए ठीक है जिसका लेआउट हिलना नहीं चाहिए, जैसे पते का ब्लॉक।
- हैंडल ड्रैग के बिना भी काम करता है। वह नीचे के अंतिम कोने में small साइज़ का हैंडल है, जो तब तक नहीं दिखता जब तक पॉइंटर फ़ील्ड के ऊपर न आए या फ़ील्ड पर फ़ोकस न हो, और फ़ोकस का एक पड़ाव है, जिसका नाम
resizeLabelसे आता है। ऐरो कुंजियाँ एक-एक पंक्ति से और Page Up और Page DownminRowsपंक्तियों से साइज़ बदलती हैं, Home और End सबसे छोटे और सबसे ऊँचे साइज़ पर ले जाती हैं, और क्लिक, Enter या Space ऊँचाई को टेक्स्ट के बराबर कर देती है, या जब वह पहले से बराबर हो तो उसेminRowsपर लौटा देती है। जहाँresizeAxisbothहै, वही क्लिक फ़ील्ड को उसकी जगह जितना चौड़ा भी कर देता है, और अगला क्लिक उसे वह चौड़ाई लौटा देता है जो उसकी थी, ताकि पॉइंटर ड्रैग के बिना भी चौड़ाई बदल सके। उसका टार्गेट न्यूनतम टार्गेट है, हालाँकि उसकी लाइन छोटी है। जब व्यक्ति साइज़ बदल चुका हो, तो फ़ील्ड दिख रही पंक्तियों की संख्या के साथ (और जहाँ वह दोनों तरफ़ छोटा-बड़ा होता है, अपनी चौड़ाई के साथ)resizeendफ़ायर करता है, ताकि आप उसका चुना हुआ साइज़ रख सकें। अक्षम फ़ील्ड में हैंडल नहीं होता; सिर्फ़ पढ़ने वाला फ़ील्ड उसे बनाए रखता है, क्योंकि पढ़ने के लिए जगह की ज़रूरत पड़ सकती है। - टेक्स्ट के ऊपर कुछ नहीं खिसकता। कई पंक्तियों वाले फ़ील्ड की पहली पंक्ति वहीं रहती है जहाँ एक पंक्ति वाला फ़ील्ड अपनी पंक्ति बनाता है, और उसके आइकन, प्रीफ़िक्स और सफ़िक्स उसी पंक्ति के बीचोबीच रहते हैं। आगे की हर पंक्ति उसके नीचे रहती है, इसलिए ऊँचाई बदलने पर लेबल और पहली पंक्ति अपनी जगह रहते हैं।
type="code" उस टेक्स्ट के लिए है जो पाठक के लिए नहीं, मशीन के लिए लिखा जाता है: पैटर्न, आइडेंटिफ़ायर, कुंजी, क्वेरी, JSON या YAML का टुकड़ा। फ़ील्ड वही है, उसी लेबल, सहायता, त्रुटि, काउंटर, साइज़ और फ़ॉर्म के व्यवहार के साथ; बस इनपुट की पंक्ति कोड को ठीक वैसे रखती है जैसा वह लिखा गया है।
- बाएँ से दाएँ, हर भाषा में। मान, उसका कैरेट, प्लेसहोल्डर, प्रीफ़िक्स और सफ़िक्स बाएँ से दाएँ चलने वाली एक पंक्ति हैं, जो बाईं ओर से शुरू होती है, दाएँ से बाएँ वाले पेज में भी, और कोड का पहला अक्षर चाहे जो हो: ख़ाली फ़ील्ड, वह फ़ील्ड जिसमें सिर्फ़
{है, और वह जिसकी पहली स्ट्रिंग अरबी में है, तीनों एक ही तरह रखे जाते हैं। बाक़ी सब पेज के साथ चलता है: लेबल, आइकन, सहायता या त्रुटि टेक्स्ट, काउंटर और साइज़ हैंडल। दाएँ से बाएँ वाली लिपि की स्ट्रिंग या टिप्पणी अपनी पंक्ति के भीतर ही रखी जाती है और अपने आसपास का क्रम नहीं बदलती। - कोड का टाइपफ़ेस, इनपुट के साइज़ पर। फ़ॉन्ट फ़ैमिली कोड रोल की है; साइज़ और लाइन हाइट इनपुट के ही रहते हैं, इसलिए कोड का फ़ील्ड उतना ही ऊँचा होता है जितना उसके बग़ल का टेक्स्ट फ़ील्ड। हर स्पेस बना रहता है, टैब अक्षर अगले टैब स्टॉप तक पहुँचता है, और कोई दो अक्षर लिगेचर में नहीं जोड़े जाते। किसी चीज़ को उसके अर्थ के हिसाब से रंग नहीं दिया जाता।
- जैसा है वैसा छोड़ा गया। प्लैटफ़ॉर्म से कहा जाता है कि वह मान को न सुधारे, न उसके अक्षर बड़े करे, न उसकी स्पेलिंग जाँचे, न उसका अनुवाद करे, न उसे अपने आप पूरा करे, और सीधे उद्धरण चिह्नों को घुमावदार में न बदले। पेस्ट किया गया टेक्स्ट सादा टेक्स्ट होता है, अक्षर-दर-अक्षर। मान को न कभी ट्रिम किया जाता है, न पार्स, न वैलिडेट: वह सही बना है या नहीं, यह बताना आपका काम है,
errorऔरerrorTextसे। - एक पंक्ति या कई। एक पंक्ति पैटर्न या कुंजी के लिए ठीक है।
multilineके साथ, जो पंक्ति नहीं समाती, वह डिफ़ॉल्ट रूप से अगली पंक्तियों में जारी रहती है; मान में सिर्फ़ कोड के अपने लाइन ब्रेक होते हैं। - पंक्तियाँ जो रैप नहीं होतीं।
wrapका false होना, जो वेब परno-wrapहै, कोड की हर पंक्ति को फ़ील्ड की एक ही पंक्ति में रखता है: मानों की टेबल, लॉग, या ऐसी फ़ाइल के लिए जिसमें लाइन ब्रेक का कोई अर्थ होता है। लंबी पंक्ति फ़ील्ड के भीतर आड़ी स्क्रॉल होती है और कुछ भी चौड़ा नहीं करती।wrapको सिर्फ़ कई पंक्तियों वाला कोड फ़ील्ड पढ़ता है: प्रोज़ हमेशा रैप होता है, और अकेली पंक्ति हमेशा अपनी पंक्ति में स्क्रॉल होती है। - Tab फ़ोकस आगे ले जाती है। किसी कुंजी का अर्थ नहीं बदलता: Tab कभी इंडेंट नहीं करती, Enter कोई इंडेंट नहीं जोड़ती, और कोई ब्रैकेट आपके लिए बंद नहीं किया जाता। टैब अक्षर पेस्ट से या आपके प्रॉडक्ट से आता है, और बना रहता है।
- यह एडिटर नहीं है। इसमें न सिंटैक्स के रंग हैं, न पंक्ति संख्याएँ, न फ़ोल्डिंग, न पंक्ति-दर-पंक्ति त्रुटि के निशान। जो कोड दिखाया जाता है और टाइप नहीं किया जाता, उसके लिए कोड ब्लॉक इस्तेमाल करें; एडिटर चाहिए तो वही एम्बेड करें जो आपके प्रॉडक्ट ने चुना है।
- प्लेसहोल्डर कोड का एक उदाहरण है, जो कोड की तरह दिखाया जाता है। शब्दों में दिया गया संकेत
supportingTextमें रहता है, और वहीं फ़ील्ड यह भी बताता है कि उसे क्या चाहिए (“JSON”)।
दाएँ से बाएँ वाले फ़ील्ड में कोड का मान बाईं ओर से शुरू होता है, जबकि email, url, tel, number या password का मान बाएँ से दाएँ चलता है पर फ़ील्ड के शुरुआती किनारे, यानी दाईं ओर, रहता है। बाक़ी प्लैटफ़ॉर्म ने कोड टाइप अभी नहीं बनाया है।
date, time या date-time फ़ील्ड इनपुट की पंक्ति में सेगमेंट की एक क़तार है, हर इकाई के लिए एक: महीना, दिन और साल, घंटा, मिनट और, 12 घंटे वाली घड़ी पर, दिन का हिस्सा। वे लोकेल के क्रम में, उसके सेपरेटर के साथ रहते हैं। फ़ील्ड मान को ISO 8601 में रखता है, बिना टाइम ज़ोन के।
| टाइप | मान | en-US में क़तार | ja-JP में क़तार |
|---|---|---|---|
date |
2026-09-27 |
09/27/2026 | 2026/09/27 |
time |
14:30 |
2:30 PM | 14:30 |
date-time |
2026-09-27T14:30 |
09/27/2026, 2:30 PM | 2026/09/27 14:30 |
- लोकेल।
locale, या प्लैटफ़ॉर्म का लोकेल, क्रम, सेपरेटर, घड़ी और अंक तय करता है। ख़ाली सेगमेंट अपना प्लेसहोल्डर दिखाता है (“mm”, “dd”, “yyyy”), इसलिए क़तार हमेशा अपना रूप दिखाती है। हर सेगमेंट अपने प्लेसहोल्डर और अपने सबसे चौड़े मान में से जो चौड़ा हो, उतना चौड़ा होता है, इसलिए टाइप करते या मिटाते समय क़तार नहीं खिसकती। ये टाइपplaceholder,prefixText,suffixText,maxLengthऔरmultilineको अनदेखा करते हैं। - आगे-पीछे जाना। Tab हर सेगमेंट पर जाती है, फिर पिकर बटन पर। Left और Right Arrow उस ओर के सेगमेंट पर ले जाती हैं, लेआउट की हर दिशा में: क़तार बाएँ से दाएँ लिखी जाती है, जैसे अंकों में तारीख़ लिखी जाती है। किसी सेगमेंट को दबाने पर फ़ोकस उस पर आ जाता है। फ़ोकस वाला सेगमेंट चयनित टेक्स्ट की तरह बनाया जाता है, बिना कैरेट के।
- एक-एक करके बदलना। Up और Down Arrow सेगमेंट को एक से बदलती हैं और सिरे पर पहुँचकर दूसरे सिरे से शुरू करती हैं; ख़ाली सेगमेंट पर वे आज की तारीख़ या मौजूदा समय से शुरू करती हैं। Page Up और Page Down बड़े क़दम से बदलती हैं, और Home और End रेंज के सिरों पर ले जाती हैं।
- टाइप करना। एक अंक सेगमेंट को भरता है, और जब कोई और अंक उसे आगे नहीं बढ़ा सकता, या जब सेपरेटर टाइप किया जाता है, तो फ़ोकस आगे बढ़ जाता है। Backspace एक अंक हटाती है, और ख़ाली सेगमेंट पर पीछे ले जाती है। साल को चार अंक चाहिए। जो तारीख़ होती ही नहीं, वह दर्ज नहीं की जा सकती: नए चुने गए महीने के अंत से आगे का दिन उस महीने का आख़िरी दिन बन जाता है।
- पेस्ट करना। किसी भी सेगमेंट पर पेस्ट की गई पूरी तारीख़ या समय पूरी क़तार भर देता है। उसे लोकेल के क्रम में अंकों के तीन समूहों के रूप में पढ़ा जाता है, और चार अंकों वाला पहला समूह साल के रूप में पढ़ा जाता है, इसलिए पेस्ट की गई ISO तारीख़ हर जगह काम करती है। कॉपी और कट पूरी क़तार लेते हैं।
- मान तब तक ख़ाली रहता है जब तक हर सेगमेंट भर न जाए और नतीजा उपलब्ध न हो।
inputतब एमिट होता है जब मान बदलता है — आख़िरी सेगमेंट भरा जाता है, भरी हुई क़तार संपादित की जाती है, या उसे ख़ाली किया जाता है — और उस सेगमेंट के लिए नहीं, जो मान को ख़ाली ही छोड़ता है।changeतब एमिट होता है जब फ़ोकस फ़ील्ड के सेगमेंट और पिकर बटन से हट जाता है, या ऐक्शन कुंजी दबाई जाती है, और मान बदला हुआ हो। सेगमेंट के बीच जाने से कुछ भी कमिट नहीं होता। - एंट्री की त्रुटि। आधा भरा छोड़ा गया फ़ील्ड
invalidTextदिखाता है। जो फ़ील्डminसे पहले के,maxके बाद के याdisabledDatesमें दिए गए मान के साथ छोड़ा गया हो, वहunavailableTextदिखाता है। दोनों त्रुटि के रूप में बनाए जाते हैं और अपने कारण (invalidयाunavailable) के साथentryErrorएमिट करते हैं; अगला संपादन उसे ख़त्म कर देता है। यह अकेली त्रुटि है जिसे फ़ील्ड ख़ुद सेट करता है, और वह आपकीerrorप्रॉपर्टी को नहीं छूती। - जो आप सेट करते हैं वह जैसा है वैसा ही दिखाया जाता है, कभी वैलिडेट नहीं किया जाता, और उससे कोई इवेंट एमिट नहीं होता।
फ़ील्ड की घड़ी उसके लोकेल की घड़ी है: उसमें 12 या 24 घंटे की कोई सेटिंग नहीं है और मिनट का कोई स्टेप नहीं है, जैसा DateTimePicker में है।
पिकर बटन। picker के साथ फ़ील्ड अपने अंत में सिर्फ़ आइकन वाला एक Button बनाता है, तारीख़ के लिए calendar_month और समय के लिए schedule, जिसका नाम pickerLabel से आता है। उसे सक्रिय करने पर मान, टाइप, min और max के साथ pickerRequest एमिट होता है; आधी भरी क़तार ख़ाली मान भेजती है और एंट्री की कोई त्रुटि नहीं दिखाती, क्योंकि पिकर एक पूरा मान देने ही वाला है। फ़ील्ड ख़ुद कुछ नहीं दिखाता: आपका प्रॉडक्ट मेल खाते मोड में एक DateTimePicker खोलता है, जो docked होने पर फ़ील्ड से ऐंकर किया जाता है, और पिकर के change से फ़ील्ड का value सेट करता है। पिकर को वही min, max और disabledDates दें जो फ़ील्ड के हैं। पिकर बंद होने पर फ़ोकस बटन पर लौटता है। बटन फ़ील्ड के साथ अक्षम होता है और जब फ़ील्ड सिर्फ़ पढ़ने के लिए हो, तब नहीं दिखाया जाता।
- जो स्थिर टेक्स्ट मान का हिस्सा नहीं है, उसे
prefixTextऔरsuffixTextमें रखें: मुद्रा का चिह्न, इकाई। - मिटाने या पासवर्ड दिखाने की क्रिया को अंतिम स्लॉट में अपने, सिर्फ़ आइकन वाले Button के रूप में रखें, उसके अपने नाम के साथ। पिकर बटन अकेली क्रिया है जो फ़ील्ड में पहले से बनी है, और वह आपके बटन के बाद आता है।
- जो टेक्स्ट कई पंक्तियों तक जा सकता है, उसके लिए
multilineइस्तेमाल करें। डिफ़ॉल्ट रूप से यहminRowsसेmaxRowsतक बढ़ता है, फिर स्क्रॉल होता है। - जिन फ़ील्ड को फ़ॉर्म माँगता है, उन पर
requiredसेट करें, और फ़ॉर्म सबमिट होने पर फिर भीerrorTextमें बताएँ कि क्या कमी है। - जिस मान को मशीन पढ़ती है, जैसे पैटर्न, कुंजी या कॉन्फ़िगरेशन का टुकड़ा, उसके लिए
type="code"इस्तेमाल करें, और लेबल औरsupportingTextमें बताएँ कि वह क्या होना चाहिए।
- प्लेसहोल्डर को लेबल की तरह इस्तेमाल न करें। जैसे ही कोई टाइप करता है, वह ग़ायब हो जाता है।
- जो मान मात्रा नहीं हैं, जैसे कार्ड नंबर या पिन कोड, उनके लिए
numberइस्तेमाल न करें। सहीautocompleteके साथtextइस्तेमाल करें। - एक फ़ॉर्म में वेरिएंट न मिलाएँ।
- टेक्स्ट फ़ील्ड को फ़ील्ड के भीतर न रखें। वह पहले से एक फ़ील्ड है; डीबग बिल्ड इसकी रिपोर्ट करता है। फ़ील्ड जिस कंट्रोल को फ़्रेम देता है, वह टेक्स्ट इनपुट है।
- तारीख़ के लिए
textफ़ील्ड और अपनी पार्सिंग इस्तेमाल न करें।dateइस्तेमाल करें, ताकि लोकेल का क्रम, सेगमेंट की कुंजियाँ और एंट्री की त्रुटि उसके साथ मिलें। requiredसेट करने के साथ-साथ लेबल में “(ज़रूरी)” भी न लिखें। निशान यह पहले ही कहता है, और स्क्रीन रीडर इसे दो बार सुनाएगा।- हाथ से छोटे-बड़े किए जाने वाले फ़ील्ड को लंबा टेक्स्ट देखने का अकेला तरीक़ा न बनने दें। उसे इतने
minRowsदें कि वह खुलते ही काम का हो। - किसी फ़ील्ड को सिर्फ़ ऐसा मान दिखाने के लिए अक्षम न करें जो बदल नहीं सकता।
readOnlyइस्तेमाल करें, ताकि लोग फिर भी उस पर फ़ोकस ला सकें, उसे चुन सकें और कॉपी कर सकें। - टेक्स्ट फ़ील्ड पर बाहर से,
::part(input)या अपने किसी स्टाइल से, कोड का टाइपफ़ेस न लगाएँ, और एलिमेंट मेंdirयाspellcheckन जोड़ें।type="code"इस्तेमाल करें: सिर्फ़ टाइपफ़ेस बदलने से ऐसा फ़ील्ड बनता है जो सही दिखता है, पर टाइप किए गए टेक्स्ट को फिर भी सुधारता रहता है। - कोड फ़ील्ड को एडिटर की तरह इस्तेमाल न करें, और लंबा कोड दिखाने के लिए अक्षम कोड फ़ील्ड इस्तेमाल न करें: अक्षम फ़ील्ड में कैरेट नहीं होता जिससे उसे स्क्रॉल किया जा सके।
readOnlyइस्तेमाल करें, या कोड ब्लॉक।
- रोल
textbox- लेबलिंग
- The text field adds nothing to what its members expose, and the one thing it coordinates — the drawn count (TXF-67) — is kept from assistive technology, which hears the count from the input: the Field gives the text input its name, its description and its required, invalid and disabled states (FLD-8, FLD-10, FLD-11, FLD-14), and the text input carries them on its own element (TXI-23). Assistive technology meets one text box — or, for a date or a time, one group of spin buttons — named by label, exactly as it meets a Field around a text input written by hand.
- न्यूनतम टार्गेट
- दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px
कीबोर्ड
| कुंजियाँ | क्रिया |
|---|---|
| Every key | The text input's (its accessibility block; TXI-3, TXI-41, TXI-43 to TXI-45, TXI-59). The text field handles no key and adds no focus stop (TXF-64). |
टिप्पणियाँ
- One level down is the same thing: a Field with a text input in it. Every fixture has that pair as its twin, and the accessibility tree of the two is the same (TXF-62). What the pair by hand does not do by itself is keep the Field's count text equal to the input's count as the person types (TXF-67): the product writes it at each input.
- On the web the two members stand in the text field's own shadow root, so the form meets the text field and not the input (TXF-63); focus passes through to the input (TXF-64).
इससे जनरेट किया गया: specs/text-field.spec.json, tokens/sys/measure.tokens.json
- टेक्स्ट प्लैटफ़ॉर्म के अपने टेक्स्ट एलिमेंट में संपादित होता है, इसलिए इनपुट मेथड, डिक्टेशन, ऑटोफ़िल, चयन और क्लिपबोर्ड वैसे ही काम करते हैं जैसे प्लैटफ़ॉर्म पर बाक़ी जगह। तारीख़ या समय इसका घोषित अपवाद है: उसके सेगमेंट की क़तार फ़ील्ड की अपनी है।
- तारीख़ या समय का फ़ील्ड एक ग्रुप है, जिसका नाम लेबल से आता है। हर सेगमेंट एक स्पिन बटन है, जिसका नाम उसकी इकाई और लेबल से बनता है (“माह, शुरू होने की तारीख़”), अपनी रेंज और अपने मान के साथ; ख़ाली सेगमेंट
segmentEmptyTextपढ़ता है। - ज़रूरी फ़ील्ड ज़रूरी के रूप में दिया जाता है। निशान ख़ुद सहायक तकनीक से छिपा रहता है, इसलिए वह दो बार नहीं पढ़ा जाता; वैकल्पिक का टेक्स्ट फ़ील्ड के विवरण के साथ पढ़ा जाता है।
- साइज़ हैंडल फ़ोकस का एक पड़ाव है, जिसका नाम
resizeLabelसे आता है, और जो ऐसे सेपरेटर के रूप में दिया जाता है जिसका मान पंक्तियों की संख्या है। ऐरो कुंजियाँ, Home और End साइज़ बदलती हैं, इसलिए कुछ भी ड्रैग पर निर्भर नहीं करता, और उसका हिट एरिया न्यूनतम टार्गेट पूरा करता है। - लेबल ही एक्सेसिबल नाम है, चाहे वह दिखाया गया हो या छिपाया गया हो। प्लेसहोल्डर कभी नाम नहीं होता।
- दिखाया जा रहा सहायक या त्रुटि टेक्स्ट और गिनती फ़ील्ड का विवरण हैं। प्रीफ़िक्स और सफ़िक्स भी, जब तक वे दिखते हैं, इसलिए इकाई या मुद्रा मान के साथ पढ़ी जाती है।
- यह सहायक तकनीक को अक्षम स्टेट देता है, और जहाँ प्लैटफ़ॉर्म में हों, वहाँ अमान्य, ज़रूरी और सिर्फ़ पढ़ने वाले स्टेट भी। तारीख़ या समय के फ़ील्ड में एंट्री की त्रुटि ठीक वैसे ही दी जाती है जैसे
error। - पिकर बटन एक Button है, जिसका नाम
pickerLabelसे आता है, जो डायलॉग खोलने वाले के रूप में दिया जाता है, और जो आख़िरी सेगमेंट के बाद एक Tab स्टॉप है। - जब फ़ील्ड पर फ़ोकस रहते हुए कोई त्रुटि आती या बदलती है, तो उसे एक बार, बिना टोके (polite), पढ़कर सुनाया जाता है। गिनती वैसे ही पढ़कर सुनाई जाती है जैसे वह दिखती है (“12/40”), जब टाइपिंग एक सेकंड के लिए रुकती है, हर कीस्ट्रोक पर कभी नहीं।
- खोज फ़ील्ड, जहाँ प्लैटफ़ॉर्म के पास वह रोल है, खोज बॉक्स के रूप में दिया जाता है।
- कोड फ़ील्ड वही टेक्स्ट बॉक्स है जो हर दूसरा टाइप है, और
multilineके साथ कई पंक्तियों वाला: कोई रोल, रोल का विवरण या शब्द यह नहीं कहता कि उसमें कोड है, और उसके मान का कोई हिस्सा ग़लत स्पेलिंग के रूप में चिह्नित नहीं होता। Tab हमेशा उससे बाहर ले जाती है। जहाँ उसकी पंक्तियाँ रैप नहीं होतीं, वहाँ कैरेट उसे स्क्रॉल करता है, और फ़ोकस कंटेनर पर दिखाया जाता है, जो स्क्रॉल नहीं होता। - फ़ोकस फ़ील्ड के अपने किनारे से दिखाया जाता है, चाहे वह कीबोर्ड से आया हो या पॉइंटर से: stacked फ़ील्ड के बॉक्स के भीतर एक रेखा, और filled या outlined फ़ील्ड का ज़्यादा मोटा, रंगीन किनारा। हिट एरिया न्यूनतम टार्गेट पूरा करता है।
- लेबल या बॉक्स पर दबाने से फ़ोकस इनपुट पर जाता है और कुछ ऑपरेट नहीं होता। सहायता, त्रुटि टेक्स्ट या गिनती पर दबाने से कुछ नहीं होता।
- नाम, विवरण और स्टेट ठीक वैसे ही जोड़े जाते हैं जैसे फ़ील्ड उन्हें अपने फ़्रेम में रखे किसी भी कंट्रोल से जोड़ता है। एक स्तर नीचे, हाथ से लिखा गया फ़ील्ड वही टेक्स्ट बॉक्स है।
- लेबल का न होना डीबग बिल्ड में रिपोर्ट किया जाता है।
प्लैटफ़ॉर्म की ज्ञात कमियाँ:
- SwiftUI, Compose, Flutter और React Native
requiredफ़्लैग रखते हैं, जो कोई निशान नहीं बनाता, और उनमें न resize के मोड हैं, न हैंडल, न सेगमेंट। - Web: जब महीना या मिनट अपना पहला अंक लेता है, तो सेगमेंट की क़तार कुछ पिक्सल खिसकती है; जहाँ लोकेल के आख़िरी सेगमेंट में दो अंक हैं, वहाँ
inputदो बार फ़ायर हो सकता है; Android के ऑन-स्क्रीन कीबोर्ड पर ख़ाली सेगमेंट पर Backspace पीछे नहीं ले जा सकती; और सँकरे फ़ील्ड से चौड़ी क़तार स्क्रॉल होने की जगह बाहर निकल जाती है। - प्रॉडक्ट आधी भरी तारीख़ की क़तार को,
valueको वही ख़ाली स्ट्रिंग देकर जो उसके पास पहले से है, ख़ाली नहीं कर सकता। - Web: ग्लो वाली फ़ोकस शैली में filled फ़ील्ड का ग्लो निचले कोनों पर गोल होता है, जबकि वे कोने चौकोर हैं।
- Web: इनपुट मेथड की कंपोज़िशन और ऑटोफ़िल होने पर लेबल की जाँच सिर्फ़ Chromium में की गई है।
- Web: सिर्फ़ पढ़ने वाला कोड फ़ील्ड, जिसकी पंक्तियाँ रैप नहीं होतीं, कीबोर्ड से वैसे ही स्क्रॉल होता है जैसे ब्राउज़र ऐसे किसी भी टेक्स्ट को स्क्रॉल करता है जिसे वह संपादित नहीं करता: Firefox में कैरेट से, Chrome में ऐरो कुंजियों से, Safari में Option और ऐरो कुंजियों से। पेज की दिशा बदलने पर Firefox ऐसे फ़ील्ड को उसके बाएँ किनारे पर लौटा देता है।
- SwiftUI, Compose, Flutter और React Native ने कोड टाइप नहीं बनाया है: वहाँ
typeमेंcodeनहीं है और फ़ील्ड मेंwrapनहीं है। - SwiftUI में अमान्य, ज़रूरी या सिर्फ़ पढ़ने वाले स्टेट नहीं हैं। वे बनाए या लागू किए जाते हैं, पढ़कर सुनाए नहीं जाते। त्रुटि सिर्फ़ विवरण में अपने टेक्स्ट के रूप में सुनाई देती है।
- SwiftUI इनपुट मेथड की कंपोज़िशन को नहीं देख सकता, इसलिए
maxLengthउस टेक्स्ट पर भी लागू होता है जो अभी कंपोज़ हो रहा है, और कंपोज़िशन के दौरान आपका सेट किया हुआ मान रोका नहीं जाता। - SwiftUI: चयनित टेक्स्ट कैरेट के टिंट में हाइलाइट होता है, फ़ील्ड के चयन के रंग में नहीं।
- SwiftUI सिर्फ़ पढ़ने वाले फ़ील्ड का मान चुने जा सकने वाले टेक्स्ट के रूप में बनाता है, टेक्स्ट फ़ील्ड के रूप में नहीं।
- SwiftUI
.labelsHidden()को सिर्फ़ iOS 18 और macOS 15 से पढ़ता है। पहले के वर्शन पर लेबल फिर भी दिखाया जाता है। - React Native इनपुट मेथड की कंपोज़िशन को नहीं देख सकता। कंपोज़िशन के दौरान आपका बदला हुआ मान, और
maxLengthकी सीमा, तुरंत लागू होते हैं और कंपोज़िशन को ख़त्म कर सकते हैं। - React Native में अमान्य, ज़रूरी या सिर्फ़ पढ़ने वाले स्टेट नहीं हैं। त्रुटि सिर्फ़ विवरण में अपने टेक्स्ट के रूप में सुनाई देती है; ज़रूरी होना और सिर्फ़ पढ़ने के लिए होना पढ़कर नहीं सुनाया जाता।
- React Native: पढ़कर सुनाई जाने वाली सूचनाएँ, ऑटोफ़िल और हर टाइप का कीबोर्ड सिर्फ़ मॉक के साथ जाँचे गए हैं, अभी किसी डिवाइस पर नहीं।
- iOS पर React Native में कैरेट और चयन के हाइलाइट के लिए एक ही टिंट है। फ़ील्ड कैरेट का रंग बनाए रखता है, इसलिए हाइलाइट फ़ील्ड के चयन के रंग की जगह उसी का एक टिंट होता है।
- React Native: filled फ़ील्ड का ग्लो सिर्फ़ उसके ऊपरी कोनों के साथ चलता है, और प्लेसहोल्डर और कैरेट के रंग स्टेट के मोशन के दौरान बदलने की जगह एक झटके में बदल जाते हैं।
- Flutter खोज फ़ील्ड को खोज इनपुट टाइप के रूप में देता है, खोज बॉक्स के रोल के रूप में नहीं।
- Flutter Android और दूसरी टच स्क्रीन पर चयन के हैंडल या चयन का टूलबार नहीं बनाता। देर तक दबाना और कीबोर्ड शॉर्टकट फिर भी चुनते और कॉपी करते हैं; iOS अपना सिस्टम मेन्यू दिखाता है।
- Flutter: शुरुआती स्लॉट का इंटरैक्टिव एलिमेंट फ़ोकस के क्रम में इनपुट से पहले आता है, उसके बाद नहीं।
- Compose में ज़रूरी स्टेट नहीं है: उसकी जगह फ़ील्ड अपने स्टेट के विवरण के रूप में “Required” पढ़ता है।
- Compose:
maxLengthऔर काउंटर अक्षरों को वैसे गिनते हैं जैसे लोग उन्हें देखते हैं, पर इमोजी के सीक्वेंस और झंडों की जाँच नहीं की गई है। टेस्ट JVM पर Robolectric में चलते हैं, जिसके अक्षरों के नियम उन्हें नहीं जानते। - Compose: TalkBack का त्रुटि और गिनती को पढ़कर सुनाना, असली इनपुट मेथड और असली ऑटोफ़िल सर्विस किसी डिवाइस पर नहीं जाँचे गए हैं।
- ऐसा लेबल लिखें जो मान का नाम बताए, और उसे छिपाने पर भी बनाए रखें।
- ऐसा त्रुटि टेक्स्ट लिखें जो बताए कि मान को कैसे ठीक किया जाए, और
errorख़ुद सेट करें। SwiftUI और React Native पर वही टेक्स्ट त्रुटि के सुनाई देने का अकेला तरीक़ा है। तारीख़ या समय के फ़ील्ड के लिएinvalidTextऔरunavailableTextभी लिखें, औरsegmentEmptyTextदें: इसके बिना ख़ाली सेगमेंट बिना किसी मान के पढ़ा जाता है। - पिकर बटन को उसका
pickerLabelअपने प्रॉडक्ट की भाषा में दें, और पिकर कोpickerRequestसे खोलें। requiredयाoptionalसेट करें, औरrequiredTextऔरoptionalTextदें: फ़ील्ड पर, याsetWords({ requiredText, optionalText })से पूरे प्रॉडक्ट के लिए एक बार, जैसेresizeLabelऔरsegmentEmptyTextभी दिए जा सकते हैं। वेब पर Tanrei अपना कोई शब्द साथ नहीं देता; छूटे हुए शब्द की डेवलपमेंट में रिपोर्ट होती है। देखें प्रॉडक्ट के शब्द। जब तक SwiftUI, Compose, Flutter और React Native बराबरी पर नहीं आते, उनके फ़ील्ड कोई निशान नहीं बनाते, और SwiftUI और React Native ज़रूरी स्टेट को पढ़कर नहीं सुनाते: वहाँ लेबल में “ज़रूरी” कहें।- साइज़ हैंडल को
resizeLabelसे नाम दें। इसके बिना हैंडल दिखता है और काम करता है, पर उसका कोई नाम नहीं होता। - इकाई या मुद्रा को मान में नहीं,
prefixTextयाsuffixTextमें रखें, ताकि वह मान के साथ पढ़ी जाए और टाइप न करनी पड़े। - कोड फ़ील्ड के लिए
labelऔरsupportingTextमें बताएँ कि कोड क्या होना चाहिए (“वेबहुक की बॉडी”, “JSON”), औरerrorTextमें बताएँ कि उसमें क्या ग़लत है: फ़ील्ड को भाषा का पता नहीं होता। - अंतिम आइकन बटन को अपने प्रॉडक्ट की भाषा में उसका अपना नाम दें।
- Compose पर “Invalid” और “Required” शब्द लाइब्रेरी के स्ट्रिंग रिसोर्स (
tanrei_invalid,tanrei_required) से आते हैं। उनका अनुवाद करने के लिए उन्हें अपने रिसोर्स में ओवरराइड करें। - वेब पर iOS Safari उस इनपुट पर ज़ूम कर देता है जिसका टेक्स्ट 16 px से छोटा हो। डिफ़ॉल्ट सिस्टम के फ़ील्ड दोनों साइज़ पर 16 px का टेक्स्ट इस्तेमाल करते हैं; जो लेयर उसे छोटा करती है, वह ज़ूम वापस ले आती है।