होम कंपोनेंटनंबर फ़ील्ड

नंबर फ़ील्ड

लोगों को संख्या को संख्या की तरह डालने देता है, अपने लोकेल के रूप में टाइप करके या किसी कुंजी या बटन से स्टेप-दर-स्टेप बदलकर, सीमाओं के भीतर, और इकाई को बग़ल में रखकर। यह फ़ॉर्म का एक पूरा फ़ील्ड है, जो एक फ़ील्ड और एक नंबर इनपुट से बना है।

अंतिम अपडेट: 23 अक्टूबर 2026

content_copy

Markdown में देखें

श्रेणी: टेक्स्ट इनपुट
टोकन: comp.field
स्तर: संयोजित
इनसे बना है: Field, Number input

अवलोकन

Web: tanrei-number-field; schedule
SwiftUI: TanreiNumberField; radio_button_unchecked
Jetpack Compose: TanreiNumberField; radio_button_unchecked
Flutter: TanreiNumberField; radio_button_unchecked
React Native: NumberField; radio_button_unchecked

वे वेरिएंट जो इनमें शामिल नहीं: tanrei: filled, outlined

इससे जनरेट किया गया: docs/status/status.json, specs/number-field.spec.json

इकाई और सीमाओं वाला एक नंबर फ़ील्ड, और एक जिसमें पैसों की रक़म है

नंबर फ़ील्ड उस संख्या के लिए इस्तेमाल करें जिसे प्रॉडक्ट संख्या की तरह पढ़ता है: कोई मात्रा, साइज़, प्रतिशत या रक़म। लोग उसे अपने लोकेल के रूप में टाइप करते हैं, या ऐरो कुंजियों से या फ़ील्ड के अंत में बने दो बटन से स्टेप-दर-स्टेप बदलते हैं। फ़ील्ड उसी वेरिएंट और साइज़ के टेक्स्ट फ़ील्ड की तरह बनता है और उसी की नाप का होता है।

किनसे बना है: एक फ़ील्ड और एक नंबर इनपुट से। फ़ील्ड फ़्रेम है: लेबल, ज़रूरी या वैकल्पिक का निशान, सहायता और त्रुटि। नंबर इनपुट कंट्रोल है: बॉक्स, संख्या, उसकी इकाई और दोनों स्टेपर। नंबर फ़ील्ड अपना कुछ नहीं बनाता और उसका कोई टोकन नहीं है: उसकी हर प्रॉपर्टी इन दोनों में से किसी एक की प्रॉपर्टी है, जो उसी को बिना बदले दे दी जाती है।

नंबर फ़ील्ड पहले से एक फ़ील्ड है: वह कभी फ़ील्ड के भीतर नहीं रखा जाता। जहाँ लेबल कहीं और है, जैसे स्लाइडर के बग़ल में या टेबल के किसी सेल में, वहाँ अकेला नंबर इनपुट इस्तेमाल करें।

यह एक ब्लॉक है, उतना ही चौड़ा जितनी वह जगह जिसमें इसे रखा गया है, और इसका बॉक्स उसे पूरा भरता है। इसकी अपनी कोई चौड़ाई नहीं है: फ़ील्ड कम चौड़ा चाहिए, तो उसे कम चौड़ी जगह दें।

वेब पर यह <tanrei-number-field> है। बाक़ी प्लैटफ़ॉर्म ने इसे अभी इम्प्लीमेंट नहीं किया है।

इस्तेमाल

value एक संख्या है, या null जब तक फ़ील्ड में कोई संख्या नहीं है। वह तब बदलता है जब व्यक्ति उसे कमिट करता है, यानी जब फ़ोकस फ़ील्ड से बाहर जाता है, वह Enter दबाता है, या स्टेप से मान बदलता है। वह हर कीस्ट्रोक पर नहीं बदलता। जब तक व्यक्ति टाइप कर रहा है, टेक्स्ट उसी का है: कुछ भी न ठुकराया जाता है, न दोबारा फ़ॉर्मैट किया जाता है, न सीमा में बाँधा जाता है, न राउंड किया जाता है। इस बीच input बताता है कि टेक्स्ट को कौन-सी संख्या पढ़ा जा रहा है।

<form>
  <tanrei-number-field name="quantity" label="मात्रा" value="1" min="1" max="99"
    required required-text="ज़रूरी" invalid-text="कोई संख्या डालें।" increment-label="बढ़ाएँ" decrement-label="घटाएँ"></tanrei-number-field>
</form>

<!-- एक इकाई, 0.25 का स्टेप, और कोई ऊपरी सीमा नहीं। -->
<tanrei-number-field id="radius" label="कॉर्नर रेडियस" value="8" min="0" step="0.25" suffix-text="px" increment-label="बढ़ाएँ" decrement-label="घटाएँ"></tanrei-number-field>

<!-- पैसे: पहले चिह्न, बाद में कोड, दशमलव के बाद हमेशा दो अंक। -->
<tanrei-number-field label="रक़म" value="120" prefix-text="₹" suffix-text="INR"
  min-fraction-digits="2" max-fraction-digits="2" increment-label="बढ़ाएँ" decrement-label="घटाएँ"></tanrei-number-field>

<script type="module">
  import '@tanrei/web/components/number-field';

  const radius = document.querySelector('#radius');
  // कमिट होने से मान बदला। value में पहले से नया मान है: एक संख्या, या null।
  radius.addEventListener('change', () => save(radius.value));
  // व्यक्ति टाइप कर रहा है या स्टेप से बदल रहा है: वह संख्या जो टेक्स्ट से पढ़ी गई, बिना सीमा में बाँधे और बिना राउंड किए, या null।
  radius.addEventListener('input', (e) => preview(e.detail.value));
  // ऐसा टेक्स्ट कमिट हुआ जो संख्या नहीं है। फ़ील्ड उसे रहने देता है और invalidText दिखाता है:
  // detail.text वही टेक्स्ट है, और जहाँ फ़ील्ड को कोई नहीं दिया गया वहाँ ख़ाली।
  radius.addEventListener('entryerror', (e) => console.log(e.detail.reason, e.detail.text));
</script>

import { NumberField } from '@tanrei/react';

<NumberField label="कॉर्नर रेडियस" value={radius} min={0} step={0.25} suffixText="px"
  incrementLabel="बढ़ाएँ" decrementLabel="घटाएँ"
  onChange={(event) => setRadius(event.currentTarget.value)} />

एक स्तर नीचे

वही फ़ील्ड, उसके दोनों सदस्यों से हाथ से लिखा जाए, तो वैसा ही दिखता है, और सहायक तकनीक के लिए वही स्पिन बटन होता है, उसी नाम, विवरण और स्टेट के साथ:

<tanrei-field label="मात्रा" required required-text="ज़रूरी"
  supporting-text="हर ऑर्डर में 99 तक।">
  <tanrei-number-input name="quantity" min="1" max="99" invalid-text="कोई संख्या डालें।"
    increment-label="बढ़ाएँ" decrement-label="घटाएँ"></tanrei-number-input>
</tanrei-field>

वही फ़ील्ड हाथ से लिखा हुआ: एक फ़ील्ड, जिसके भीतर एक नंबर इनपुट है

एक स्तर नीचे तब जाएँ जब आपको ऐसी व्यवस्था चाहिए जो नंबर फ़ील्ड नहीं देता:

आपको चाहिए	इस्तेमाल करें
लेबल, बॉक्स, सहायता और त्रुटि	नंबर फ़ील्ड
फ़्रेम के भीतर, बॉक्स के बग़ल में या उसके नीचे अपनी कोई चीज़	एक फ़ील्ड, जिसके भीतर एक नंबर इनपुट और आपका अपना एलिमेंट है
सिर्फ़ बॉक्स, ऐसे लेबल के नीचे जो कहीं और है: स्लाइडर के बग़ल में, टेबल का कोई सेल, टूलबार	अकेला नंबर इनपुट, जिसे नाम उसके अपने `label` से मिलता है

एक स्तर नीचे जो बदलता है, वह यह है कि कौन-सी बात कहाँ कही जाती है। name, value, सीमाएँ और इकाई नंबर इनपुट पर होती हैं, जो तब वह कंट्रोल है जो फ़ॉर्म को मिलता है, और उसके इवेंट उसी पर सुने जाते हैं। label, error, disabled और ज़रूरी या वैकल्पिक होना फ़ील्ड पर ही रहते हैं, जो उन्हें कंट्रोल तक पहुँचाता है: इनपुट के अपने सेट न करें। नंबर फ़ील्ड ऐसा कुछ नहीं करता जो हाथ से लिखे गए फ़ील्ड और नंबर इनपुट नहीं करते।

स्पेक

सीमा पर अक्षम हुआ स्टेपर, अंतिम किनारे पर अंक, बिना स्टेपर, एक त्रुटि, सिर्फ़ पढ़ने वाला नंबर फ़ील्ड और अक्षम नंबर फ़ील्ड

फ़ील्ड

भाग	यह क्या है
लेबल	फ़ील्ड का: कंटेनर के ऊपर (`stacked`)। `filled` और `outlined` में उसे नंबर इनपुट बनाता है, बॉक्स के भीतर फ़्लोट होता हुआ, और फ़ील्ड लेबल की कोई पंक्ति नहीं बनाता। यही एक्सेसिबल नाम है, चाहे वह दिखाया गया हो या `labelHidden` से छिपाया गया हो
ज़रूरी या वैकल्पिक का निशान	फ़ील्ड का, लेबल के बाद: `required` के लिए ज़रूरी का टैग, तारांकन या कुछ नहीं, और `optional` के लिए वैकल्पिक का टैग। फ़्लोट होते लेबल को तारांकन मिलता है
इनपुट	नंबर इनपुट का: टेक्स्ट के रूप में संख्या। संपादन के दौरान वह जो व्यक्ति ने टाइप किया; बाक़ी समय कमिट की गई संख्या, लोकेल के रूप में। एक पंक्ति, जो स्क्रॉल होती है
प्रीफ़िक्स, सफ़िक्स	नंबर इनपुट के: संख्या से पहले और बाद का स्थिर टेक्स्ट, जैसे मुद्रा का चिह्न या इकाई। ये बॉक्स का हिस्सा हैं, मान का कभी नहीं
स्टेपर	नंबर इनपुट के: अंत में दो बटन, पहला घटाता है, दूसरा बढ़ाता है। इन्हें हटाने के लिए `steppers` को false करें
सहायक टेक्स्ट	फ़ील्ड का: सहायता की एक पंक्ति। फ़ील्ड के त्रुटि में रहते त्रुटि टेक्स्ट उसकी जगह ले लेता है (जहाँ डिज़ाइन सिस्टम दोनों रखता है, वहाँ उसके नीचे): जब तक `error` true है तब तक `errorText`, और जब तक टेक्स्ट संख्या नहीं है तब तक `invalidText`। वह बॉक्स के टेक्स्ट की पैडिंग पर शुरू और ख़त्म होती है, स्टेपर हों या न हों

तीनों वेरिएंट और तीनों साइज़, small (32), medium (40) और large (56), टेक्स्ट फ़ील्ड के हैं। डिफ़ॉल्ट सिस्टम के साथ सिर्फ़ stacked आता है।

नंबर फ़ील्ड का अपना कोई टोकन नहीं है। उसका बॉक्स नंबर इनपुट के टोकन पढ़ता है, उसकी पंक्तियाँ फ़ील्ड के टोकन पढ़ती हैं, और उसके दोनों स्टेपर बटन के टोकन, वे जहाँ भी सेट हों। किसी एक इंस्टेंस को बदलने के लिए, उस पर सदस्य का टोकन सेट करें: style="--tanrei-comp-field-label-gap: 0.75rem"।

दोनों स्टेपर medium साइज़ के text बटन हैं, अगल-बग़ल रखे हुए। डिफ़ॉल्ट सिस्टम में वे फ़ील्ड की चौड़ाई में से 88 लेते हैं, और हर एक पूरा टच टार्गेट है। वे कभी छोटे नहीं बनाए जाते और कभी एक के ऊपर एक नहीं रखे जाते: जिस पंक्ति में उनके लिए जगह नहीं है, वहाँ उन्हें बंद कर दें। कुंजियाँ फिर भी मान बढ़ाती और घटाती हैं।

मान और टेक्स्ट

कब	क्या होता है
व्यक्ति टाइप करता है, पेस्ट करता है या बोलकर लिखवाता है	कुछ नहीं बदला जाता। `input` के साथ वह संख्या आती है जो टेक्स्ट से पढ़ी गई, या `null`
फ़ोकस बाहर जाता है, या Enter	टेक्स्ट कमिट होता है: `min` तक बढ़ाया जाता है, `max` तक घटाया जाता है, `maxFractionDigits` तक राउंड किया जाता है, मान बन जाता है, और लोकेल के रूप में वापस लिखा जाता है। मान अलग हो तो `change` फ़ायर होता है
टेक्स्ट ख़ाली है	मान `null` हो जाता है
टेक्स्ट संख्या नहीं है	टेक्स्ट बना रहता है। मान `null` हो जाता है, फ़ील्ड त्रुटि में आ जाता है और `invalidText` दिखाता है, या जहाँ वह नहीं है वहाँ अपना `errorText`, और `entryerror` फ़ायर होता है
प्रॉडक्ट `value` सेट करता है	वही संख्या दिखाई जाती है, चाहे जो भी टाइप किया गया हो। कोई इवेंट फ़ायर नहीं होता, और `min` और `max` उस संख्या को ठीक नहीं करते

कमिट की गई संख्या लोकेल के अंकों और दशमलव सेपरेटर के साथ लिखी जाती है, दशमलव के बाद minFractionDigits से maxFractionDigits तक अंकों के साथ, और बिना ग्रुपिंग सेपरेटर के। इसलिए जो दिखता है, उसे वैसा ही वापस टाइप किया जा सकता है।

एक ही मान, 1.5, जर्मन में और मिस्र की अरबी में

टेक्स्ट को उदारता से पढ़ा जाता है, फ़ील्ड के locale के हिसाब से, या जहाँ वह ख़ाली है, वहाँ पेज की भाषा के हिसाब से:

संख्या के आसपास और उसके भीतर के स्पेस अनदेखे किए जाते हैं।
अंकों से पहले का हाइफ़न-माइनस, माइनस का चिह्न या प्लस का चिह्न संख्या का चिह्न है।
ASCII अंक, लोकेल के अपने अंक और फ़ुल-विड्थ अंक, सभी अंक हैं।
अंकों के बीच लोकेल का ग्रुपिंग सेपरेटर अनदेखा किया जाता है: अंग्रेज़ी में 1,234.50 को 1234.5 पढ़ा जाता है।
टाइप या पेस्ट किए गए प्रीफ़िक्स और सफ़िक्स अनदेखे किए जाते हैं: 12 px को 12 पढ़ा जाता है।
अक्षर, एक्सपोनेंट, दो सेपरेटर या अकेला चिह्न संख्या नहीं हैं।

फ़ील्ड कभी दो लोकेल के बीच अंदाज़ा नहीं लगाता। जर्मन में, जहाँ कॉमा दशमलव सेपरेटर है, 1.500 को 1500 पढ़ा जाता है और 1.5 को 15।

दाएँ से बाएँ वाले लेआउट में: लैटिन अक्षरों वाली इकाई संख्या के बाद, बाएँ से दाएँ, और पेज की अपनी लिपि वाली इकाई संख्या के बाईं ओर

संख्या और उसकी इकाई लिखावट का एक ही टुकड़ा हैं। प्रीफ़िक्स संख्या से पहले लिखा जाता है और सफ़िक्स उसके बाद, इकाई की अपनी लिपि की दिशा में, पेज की दिशा चाहे जो हो। इसलिए “44 px”, “$ 120 USD” और “40 %” अरबी या हिब्रू पेज में वैसे ही पढ़े जाते हैं जैसे अंग्रेज़ी पेज में, और अरबी या हिब्रू अक्षरों में लिखी इकाई संख्या के बाईं ओर रहती है। स्टेपर और लेबल पेज के साथ चलते हैं। align="end" संख्या को उसकी इकाई से सटाकर रखता है: लैटिन अक्षरों या चिह्नों वाली इकाई के लिए दाईं ओर, दोनों दिशाओं में। संख्या के बाईं ओर लैटिन अक्षरों का मुद्रा कोड रखने के लिए, सफ़िक्स की शुरुआत दाएँ से बाएँ के दिशा चिह्न (right-to-left mark, U+200F) से करें।

स्टेप से बदलना

इनपुट	क्या होता है
Up Arrow, Down Arrow	मान को `step` जितना बढ़ाती या घटाती हैं
Page Up, Page Down	मान को `step` के दस गुने जितना बढ़ाती या घटाती हैं
स्टेपर को दबाना	एक स्टेप बदलता है। दबाए रखने पर यह दोहराया जाता है: आधे सेकंड बाद, फिर एक सेकंड में दस बार, फिर बीस बार
Home, End, Left Arrow, Right Arrow	टेक्स्ट में कैरेट को ले जाती हैं
माउस व्हील, ड्रैग	कुछ नहीं। पेज स्क्रॉल होता है

स्टेप मान को स्टेप के ग्रिड की अगली संख्या पर ले जाता है, जो min से गिना जाता है (और उसके बिना शून्य से): 5 के स्टेप के साथ 12 बढ़कर 15 होता है और घटकर 10। हिसाब दशमलव में होता है, इसलिए 0.2 को 0.1 से बढ़ाने पर 0.3 मिलता है। ख़ाली फ़ील्ड स्टेप से शून्य के सबसे पास की उस संख्या पर जाता है जिसकी इजाज़त सीमाएँ देती हैं।

step बताता है कि एक स्टेप कितनी दूर जाता है। वह यह सीमित नहीं करता कि क्या टाइप किया जा सकता है: 5 के स्टेप के साथ टाइप किया गया 12, 12 ही रहता है। सिर्फ़ कुछ संख्याएँ स्वीकार करने के लिए मान को वैलिडेट करें और error सेट करें।

स्लाइडर के साथ

स्लाइडर के बग़ल की संख्या, जब दोनों पंक्ति के एक ही शीर्षक के नीचे हों, सिर्फ़ बॉक्स है: एक नंबर इनपुट, जिसे नाम उसके अपने label से मिलता है। उदाहरण उसके पेज पर है।

संरचना

वेब पैकेज जिस तरह फ़िक्स्चर stacked-empty बनाता है, उसी के ऊपर बनाया गया।

भाग	विवरण
1 `field`	The Field: the label row with its glyph and its requirement mark, and the supporting row with the help and the error text. In a look whose input floats the label it draws no label row.
2 `number-input`	The number input, as the Field's one control: the box, the number in it, the prefix and the suffix, the two steppers, and the label that floats in the box in the looks that float one.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`variant`	`stacked` \| `filled` \| `outlined`	`"stacked"`	The text input's three looks, so that a number input is drawn as the text inputs beside it: 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. Use one style per form. A design system may leave some out (the Tanrei system ships stacked only) or add values. — Number input
`size`	`small` \| `medium` \| `large`	`"medium"`	Minimum height of the container: stacked 32 / 40 / 56, as tall as a Button of the same size, so that the box 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. These are the text input's three sizes, small for a bar, a toolbar or a dense row of controls. The hit area always meets the minimum target. A design system may add values. — Number input
`value`	`number`	`null`	The committed number, or null (the platform's absent value) while the field holds none. It changes when the person commits — focus leaves, the action key, a step — not on every keystroke; input carries what is being typed. — Number 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 number input. In a filled or outlined look the input draws it, floating in its box, and the Field draws no label row (FLD-25, NMI-8).
`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). Where no message is shown either, the bare number input, named by its own label, is that control without a frame.
`placeholder`	`string`	`""`	A hint shown while the input is empty and the label is not in the input line. Never a replacement for a name. — Number 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 number input in the input's own error condition (FLD-8, NMI-10); the steppers stay as they are.
`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 number input, and with it both steppers (FLD-14, NMI-32); the number field is then left out of its form (NUM-48).
`readOnly`	`boolean`	`false`	The number can be focused, selected and copied, but not changed: no key steps it and no stepper is drawn. — Number 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 number input as required (FLD-10, NMI-12).
`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
`min`	`number`	`null`	The lowest number a commit keeps; a lower one is raised to it. Null for no limit. It is also where the steps are counted from. — Number input
`max`	`number`	`null`	The highest number a commit keeps; a higher one is lowered to it. Null for no limit. — Number input
`step`	`number`	`1`	How far Up Arrow, Down Arrow and a stepper move the number; Page Up and Page Down move ten times as far. It does not limit what may be typed. — Number input
`steppers`	`boolean`	`true`	Draws the two stepper buttons at the end of the field. False for a field in a row too narrow for them, or beside a slider that does their work; the keys still step. — Number input
`incrementLabel`	`string`	`""`	The accessible name of the stepper that steps up, in the product's language ("Increase"). The product's: Tanrei has no word for it. Empty reads the product's words. Required while the steppers are shown. — Number input
`decrementLabel`	`string`	`""`	The accessible name of the stepper that steps down, in the product's language ("Decrease"). The product's: Tanrei has no word for it. Empty reads the product's words. Required while the steppers are shown. — Number input
`prefixText`	`string`	`""`	Fixed text before the number, not part of the value: a currency sign ("$", "¥"). — Number input
`suffixText`	`string`	`""`	Fixed text after the number, not part of the value: the unit ("px", "ms", "%", "kg"). Read to assistive technology with the number. — Number input
`valueText`	`string`	`""`	The value as words ("12 pixels", "3 stars"), given to assistive technology in place of the number with its prefix and suffix. The same text a Slider beside the field takes as its valueText. — Number input
`align`	`start` \| `end`	`"start"`	Where the number stands in the input: at the start, as the text of every other field, or at the end, for a number in a column of numbers whose digits should line up. — Number input
`minFractionDigits`	`number`	`0`	The fewest digits shown after the decimal separator; zeros fill them (2 for an amount of money: "12.00"). — Number input
`maxFractionDigits`	`number`	`3`	The most digits kept after the decimal separator: a commit rounds to it. 0 makes the field hold whole numbers and asks for a keyboard without a separator. — Number input
`locale`	`string`	`""`	A BCP 47 language tag ("en-US", "de-DE", "ar-EG") for how the number is shown and read: its digits and its decimal separator. Empty uses the platform's current locale. The value itself is a number in every locale. — Number input
`invalidText`	`string`	`""`	The words for an input committed with a text that is not a number ("Enter a number"): given to the Field that frames it, which shows them as its error text and, while they are empty, shows its own errorText (NMI-21, FLD-28). — Number input Shown by the Field, in its supporting row (FLD-28).

स्लॉट

स्लॉट	विवरण
`label-icon`	A glyph before the label. — Field

इवेंट

इवेंट	विवरण
`input`	The person changed the text, or a step changed the value; carries the number the text reads as — not clamped, not rounded — or the empty value while it reads as none. Emitted for every change, not when the product sets value. What a Slider beside the field follows. — Number input
`change`	A commit changed the value: focus left the field, the action key was pressed, a key or a stepper stepped it, or a held stepper was released; carries the value. — Number input
`action`	The person pressed the keyboard's action key (Enter, Return, Done). — Number input
`entryError`	The person committed a text that is not a number; carries the reason (invalid) and invalidText, the words the input has for it. The entry error itself is shown by the Field that frames the input (NMI-21). — Number input

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
`NUM-47`	THE number field SHALL be a Field that frames one number 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 number input, each unchanged; SHALL hold the label-icon slot for its Field; and SHALL emit its number input's events as its own, each once. THE number field SHALL be as wide as the place it stands in, and its number 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 (NMI-36). It SHALL draw no part of its own, hold no state of its own and have no token of its own: what it shows, how it behaves and what it exposes to assistive technology SHALL be exactly what that Field and that number input do when a product places the one in the other (FLD-1 to FLD-28; NMI-1 to NMI-46) — 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, NMI-7, NMI-8); the supporting row and the error (FLD-7 to FLD-9, FLD-26); the name, the description and the states (FLD-10, FLD-11, FLD-14, NMI-12, NMI-32); a text that is not a number shown as an error in the Field's row, in the input's words (FLD-28, NMI-21); and the two steppers, which are the number input's Buttons and stand inside its box (NMI-25).
`NUM-48`	WHERE the platform has forms (the web) THE number field SHALL be the one control the form sees: it SHALL take name, submit its number input's value as that input submits it — a decimal number with ASCII digits and a period, or an empty string WHILE it holds none (NMI-35) — reset to the value it was first given, restore it on navigation, report to the form's constraint validation exactly what its number input would report there (a missing value WHILE required is true and it holds none, NMI-12; a bad input WHILE an entry error lasts, NMI-21), and be left out WHILE disabled is true or a disabled group of the form holds it; its number input and its Field SHALL take no part in the form themselves. WHEN the action key asks for the form's submission (NMI-20) the form asked SHALL be the number field's own.
`NUM-49`	WHEN the number field is given focus — by the product, by a press on any part of it that FLD-12 or NMI-14 gives to the input, or by a form that reports its validity — THE number field SHALL pass the focus to its number input and SHALL add no stop to the focus order: it has one stop, its input, and the steppers are none (NMI-25). A press on a stepper SHALL step and move no focus, in the number field as in the bare input (NMI-26). WHILE focus is inside it THE number field SHALL count as focused for its Field (FLD-13).
`NUM-50`	IF the number field is placed in a Field THE number field SHALL in debug builds report that it is a field already and that the bare control is the number input, and both SHALL still render (FLD-15). WHILE it stands in a field group THE number field SHALL follow that group's disabled, through its own Field, and take nothing else from the group (FGR-14).
`NUM-51`	THE number field SHALL have no words of its own and SHALL read none: requiredText and optionalText are read by its Field (FLD-24), incrementLabel and decrementLabel by its number input (NMI-44), each from the instance's prop and then from the product's words.
`NUM-52`	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 number 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 number field is invalid — except those the number field owns (aria-label, aria-labelledby, aria-disabled), which it SHALL move and not expose: its name is label (NUM-47). 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 number field SHALL take it off that element. WHEN the product sets an aria- attribute the number field owns THE number field SHALL report it in debug builds.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-number-field`	`TanreiNumberField`	`TanreiNumberField`	`TanreiNumberField`	`NumberField`
`variant` · प्रॉपर्टी	`variant`	`variant`	`variant`	`variant`	`variant`
`size` · प्रॉपर्टी	`size`	`size`	`size`	`size`	`size`
`value` · प्रॉपर्टी	`value`	`value`	`value`	`value`	`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`
`min` · प्रॉपर्टी	`min`	`in`	`min`	`min`	`min`
`max` · प्रॉपर्टी	`max`	`in`	`max`	`max`	`max`
`step` · प्रॉपर्टी	`step`	`step`	`step`	`step`	`step`
`steppers` · प्रॉपर्टी	`noSteppers`	`steppers`	`steppers`	`steppers`	`steppers`
`incrementLabel` · प्रॉपर्टी	`incrementLabel`	`incrementLabel`	`incrementContentDescription`	`incrementSemanticLabel`	`incrementAccessibilityLabel`
`decrementLabel` · प्रॉपर्टी	`decrementLabel`	`decrementLabel`	`decrementContentDescription`	`decrementSemanticLabel`	`decrementAccessibilityLabel`
`prefixText` · प्रॉपर्टी	`prefixText`	`prefix`	`prefix`	`prefixText`	`prefix`
`suffixText` · प्रॉपर्टी	`suffixText`	`suffix`	`suffix`	`suffixText`	`suffix`
`valueText` · प्रॉपर्टी	`valueText`	`valueText`	`stateDescription`	`semanticValue`	`valueText`
`align` · प्रॉपर्टी	`align`	`align`	`align`	`align`	`align`
`minFractionDigits` · प्रॉपर्टी	`minFractionDigits`	`minFractionDigits`	`minFractionDigits`	`minFractionDigits`	`minFractionDigits`
`maxFractionDigits` · प्रॉपर्टी	`maxFractionDigits`	`maxFractionDigits`	`maxFractionDigits`	`maxFractionDigits`	`maxFractionDigits`
`locale` · प्रॉपर्टी	`locale`	`locale`	`locale`	`locale`	`locale`
`invalidText` · प्रॉपर्टी	`invalidText`	`invalidText`	`invalidText`	`invalidText`	`invalidText`
`input` · इवेंट	`input`	`onInput`	`onInput`	`onInput`	`onInput`
`change` · इवेंट	`change`	`value`	`onValueChange`	`onChanged`	`onValueChange`
`action` · इवेंट	`action`	`onSubmit`	`keyboardActions`	`onSubmitted`	`onSubmitEditing`
`entryError` · इवेंट	`entryerror`	`onEntryError`	`onEntryError`	`onEntryError`	`onEntryError`
टिप्पणियाँ	The tag is `tanrei-number-field`, the class `TanreiNumberField`, the React name `NumberField`. Members: `<tanrei-field>` holding one `<tanrei-number-input>` in its default slot; the product places none. The host is `display: block`, as the Field is, so a number field is as wide as its place and its input fills it (NUM-47, NMI-36). Value member: `tanrei-number-input`. The host is the form's element — `name`, the value and its state as the input gives them (the decimal string, or nothing while disabled), validity anchored on the input (`valueMissing`, `badInput`), reset to the `value` attribute, restore, `form`, a disabled fieldset — and the input inside has no `name`. The `value` property is `number \| null` and the attribute a decimal string, declared as the member declares them. 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 number input: `variant`, `size`, `value`, `placeholder`, `readOnly`, `min`, `max`, `step`, `noSteppers` (the inverse of `steppers`, attribute `no-steppers`), `incrementLabel`, `decrementLabel`, `prefixText`, `suffixText`, `valueText`, `align`, `minFractionDigits`, `maxFractionDigits`, `locale`, `invalidText`. Attributes are the members' own: kebab-case, except `readonly`, `min`, `max` and `step`. 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` and `entryerror` are the number input's own composed events and leave by themselves, with the host as their target and `value` already new at `change`; `action` stays cancelable. None is stopped and none is copied; a stepper's own `click` is the Button's and is not an event of the spec. Slots: `label-icon` is passed to the Field by a slot element of the same name, rendered only while the host has a child for it. The element has no other slot: the steppers are the input's own Buttons, not the product's children. Parts: the member hosts are `field` and `number-input`. Exported from the Field: `label`, `label-icon`, `requirement-label`, `supporting-text`. Exported from the number input: `container`, `outline`, `active-indicator`, `label`, `requirement-label`, `input`, `prefix`, `suffix`, `stepper`. Two names collide, `label` and `requirement-label`. Each is exported with its member's name before it, always (`field-label`, `number-input-label`, `field-requirement-label`, `number-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. `stepper` is a part of a member's small part: the number input exports the two Buttons' hosts under that name, and nothing of the Button's inside is exported. Focus: the shadow root does not delegate. `focus()` and `blur()` call the number input's; a press on the label row focuses the input by FLD-12, a press on the box by NMI-14, a press on a stepper steps and moves no focus (NMI-26), and a press on the help does nothing. The connection is the Field's with its control (FLD-25, FLD-26, FLD-28; NMI-45); the element takes no part in it. Parts and tokens of its own: none. The element writes no custom property: `--tanrei-comp-field-`, `--tanrei-comp-input-box-`, `--tanrei-comp-number-input-` and, for the steppers, `--tanrei-comp-button-` reach the members by inheritance, and one number field is set apart by setting any of them on the element. What its twin cannot do that it does: nothing. The twin: `<tanrei-field label="Quantity" supporting-text="Up to 99 per order." required><tanrei-number-input name="quantity" min="1" max="99" increment-label="Increase" decrement-label="Decrease"></tanrei-number-input></tanrei-field>`. Words: none of its own (NUM-51).	Not built on this platform yet: the number input as a view of its own, and this as the Field around it. Its name, its props and its idiom: `TanreiNumberField("Quantity", value: $quantity, in: 1...99, step: 1)`, shaped as the platform's own pair, `TextField(_:value:format:)` and `Stepper(value:in:step:)`: `value` is a `Binding<Double?>` (and an overload for `Binding<Int?>`, which sets `maxFractionDigits` to 0), written on every commit, which is the change event; `min` and `max` are one optional `ClosedRange` or partial range. Built on `TextField` with `.keyboardType(.decimalPad)` (`.numbersAndPunctuation` where a minus sign is needed) and a `FormatStyle` from `locale`. `labelHidden` follows `.labelsHidden()`, `disabled` follows `.disabled(_:)`, `action` is `onSubmit:`. The field carries `.accessibilityAdjustableAction` for increment and decrement and `.accessibilityValue` with the value text; the steppers are `TanreiButton`s with `.focusable(false)`. The drawing is Tanrei's on every Apple platform; `Stepper` itself is not used to draw. The product's words are read from the `\.tanreiWords` environment value.	Not built on this platform yet: the number input as a view of its own, and this as the Field around it. Its name, its props and its idiom: Compose idiom, as `TextField`: `TanreiNumberField(value: Double?, onValueChange: (Double?) -> Unit, label = "Quantity", min = 1.0, max = 99.0)`; the caller keeps `value` (state hoisting) and `onValueChange` is called on a commit, `onInput` while typing. `enabled` is the inverse flag and `isError`, `readOnly`, `prefix` and `suffix` keep Compose's names. Built on `BasicTextField` with `KeyboardOptions(keyboardType = KeyboardType.Decimal)` (`Number` while `maxFractionDigits` is 0) and `java.text.DecimalFormat` for `locale`. Semantics: `Role` has no spin button, so the field sets `stateDescription` (the value text), `ProgressBarRangeInfo` for the limits and `setProgress`, plus custom accessibility actions for increase and decrease; the steppers are `TanreiButton`s with `Modifier.focusProperties { canFocus = false }`. A held stepper repeats from `pointerInput` with the component's own timings. The product's words are read from `LocalTanreiWords`.	Not built on this platform yet: the number input as a view of its own, and this as the Field around it. Its name, its props and its idiom: Flutter idiom, as `TextField` and `InputDecoration`: `TanreiNumberField(value: 12, onChanged: (num? v) {…}, labelText: 'Quantity', min: 1, max: 99)`, with `hintText`, `helperText`, `errorText`, `prefixText`, `suffixText` and `enabled` keeping `InputDecoration`'s names, `enabled` the inverse flag. `TanreiNumberFormField` wraps it as a `FormField<num?>` (`validator`, `onSaved`, `autovalidateMode`). Built on `TextField` with `TextInputType.numberWithOptions(decimal:, signed:)` and no input formatter that refuses characters (NMI-16); formatting and parsing use `NumberFormat` from the `intl` package with `locale`. `Semantics(value:, increasedValue:, decreasedValue:, onIncrease:, onDecrease:)` makes it adjustable; the steppers are `TanreiButton`s with `canRequestFocus: false`. Tabular figures are `FontFeature.tabularFigures()`. 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: the number input as a view of its own, and this as the Field around it. Its name, its props and its idiom: React Native idiom, as `TextInput`: `<NumberField label="Quantity" value={quantity} onValueChange={setQuantity} min={1} max={99} />` with `value: number \| null`. Built on `TextInput` with `inputMode="decimal"` (`"numeric"` while `maxFractionDigits` is 0; `keyboardType="numbers-and-punctuation"` on iOS where a minus sign is needed, because its decimal pad has none). `accessibilityRole="adjustable"`, `accessibilityValue={{ min, max, now, text }}` and `accessibilityActions` increment and decrement with `onAccessibilityAction`; the steppers are `Button`s with `focusable={false}`. Formatting uses `Intl.NumberFormat` where the engine has it (Hermes does) and falls back to ASCII digits with the locale's separator. `fontVariant: ['tabular-nums']`. Follows the app's direction where an ancestor's is not known. The product's words are read from the `TanreiWordsProvider` context.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--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`	#4b4b4b
`--tanrei-comp-field-standard-disabled-counter-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-counter-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-label-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-required-asterisk-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-value-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-label-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-required-asterisk-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-value-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-error-text-color`	`sys.color.error`	#cd262f
`--tanrei-comp-field-standard-error-counter-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-error-label-icon-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-error-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-field-standard-error-required-asterisk-color`	`sys.color.primary`	#1b1b1b
`--tanrei-comp-field-standard-error-supporting-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-error-value-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-focused-counter-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-text-color`	—	#cd262f
`--tanrei-comp-field-standard-focused-error-counter-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-label-icon-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-label-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-error-required-asterisk-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-error-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-value-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-label-icon-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-label-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-required-asterisk-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-value-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-label-icon-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-field-standard-required-asterisk-color`	`sys.color.primary`	#1b1b1b
`--tanrei-comp-field-standard-supporting-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-value-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--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` (38)

stacked-empty

variant: stacked label: Quantity incrementLabel: Increase decrementLabel: Decrease

stacked-value

variant: stacked value: 12 label: Quantity incrementLabel: Increase decrementLabel: Decrease

stacked-placeholder

variant: stacked label: Quantity placeholder: 1 to 99 incrementLabel: Increase decrementLabel: Decrease

stacked-large

variant: stacked size: large value: 12 label: Quantity incrementLabel: Increase decrementLabel: Decrease

stacked-label-hidden

variant: stacked value: 12 label: Quantity labelHidden: true incrementLabel: Increase decrementLabel: Decrease

stacked-supporting

variant: stacked value: 12 label: Quantity supportingText: Up to 99 per order. incrementLabel: Increase decrementLabel: Decrease

stacked-error

variant: stacked value: 0 label: Quantity supportingText: Up to 99 per order. errorText: Order at least 1. error: true incrementLabel: Increase decrementLabel: Decrease

stacked-disabled

variant: stacked value: 12 label: Quantity disabled: true incrementLabel: Increase decrementLabel: Decrease

stacked-read-only

variant: stacked value: 12 label: Quantity readOnly: true

stacked-at-min

variant: stacked value: 1 label: Quantity min: 1 max: 99 incrementLabel: Increase decrementLabel: Decrease

stacked-at-max

variant: stacked value: 99 label: Quantity min: 1 max: 99 incrementLabel: Increase decrementLabel: Decrease

stacked-no-steppers

variant: stacked value: 12 label: Quantity steppers: false

stacked-unit

variant: stacked value: 8 label: Corner radius min: 0 step: 0.25 incrementLabel: Increase decrementLabel: Decrease suffixText: px

stacked-percent

variant: stacked value: 40 label: Opacity min: 0 max: 100 incrementLabel: Increase decrementLabel: Decrease suffixText: %

stacked-prefix

variant: stacked value: 120 label: Amount incrementLabel: Increase decrementLabel: Decrease prefixText: $ suffixText: USD minFractionDigits: 2 maxFractionDigits: 2

stacked-negative-decimal

variant: stacked value: -0.25 label: Letter spacing step: 0.01 incrementLabel: Increase decrementLabel: Decrease suffixText: px

stacked-align-end

variant: stacked value: 40 label: Tone min: 0 max: 100 incrementLabel: Increase decrementLabel: Decrease align: end

stacked-long-number

variant: stacked value: 8336817000 label: Population steppers: false

stacked-label-icon

variant: stacked value: 200 label: Duration incrementLabel: Increase decrementLabel: Decrease suffixText: ms slots: label-icon

stacked-required

variant: stacked label: Quantity required: true requiredText: Required incrementLabel: Increase decrementLabel: Decrease

stacked-optional

variant: stacked label: Quantity optional: true optionalText: Optional incrementLabel: Increase decrementLabel: Decrease

stacked-required-asterisk

variant: stacked label: Quantity required: true requiredMark: asterisk incrementLabel: Increase decrementLabel: Decrease

stacked-required-error

variant: stacked label: Quantity errorText: Enter how many you need. error: true required: true requiredText: Required incrementLabel: Increase decrementLabel: Decrease

stacked-required-disabled

variant: stacked value: 12 label: Quantity disabled: true required: true requiredText: Required incrementLabel: Increase decrementLabel: Decrease

stacked-required-label-icon

variant: stacked value: 200 label: Duration required: true requiredText: Required incrementLabel: Increase decrementLabel: Decrease suffixText: ms slots: label-icon

stacked-required-ja

variant: stacked value: 12 label: 数量 required: true requiredText: 必須 incrementLabel: 増やす decrementLabel: 減らす suffixText: 個

stacked-optional-ja

variant: stacked label: 数量 supportingText: 1 回の注文で 99 個まで。 optional: true optionalText: 任意 incrementLabel: 増やす decrementLabel: 減らす

stacked-locale-de

variant: stacked value: 1.5 label: Gewicht step: 0.1 incrementLabel: Erhöhen decrementLabel: Verringern suffixText: kg locale: de-DE

stacked-locale-ar

variant: stacked value: 12 label: الكمية incrementLabel: زيادة decrementLabel: إنقاص locale: ar-EG direction: rtl

stacked-required-rtl

variant: stacked value: 12 label: الكمية supportingText: حتى 99 لكل طلب. required: true requiredText: مطلوب incrementLabel: زيادة decrementLabel: إنقاص direction: rtl slots: label-icon

stacked-unit-rtl

variant: stacked value: -12.5 label: רוחב incrementLabel: הגדלה decrementLabel: הקטנה suffixText: px direction: rtl

stacked-error-rtl

variant: stacked value: 0 label: כמות errorText: יש להזמין לפחות 1. error: true optional: true optionalText: רשות incrementLabel: הגדלה decrementLabel: הקטנה direction: rtl

long-label

variant: stacked value: 2 label: How many copies of the printed annual re… supportingText: Each copy is 180 pages; orders of more t… required: true requiredText: Required incrementLabel: Increase decrementLabel: Decrease

beside-slider

variant: stacked value: 1.5 label: Scale labelHidden: true min: 0.25 max: 4 step: 0.05 steppers: false suffixText: × valueText: 1.5 times align: end

stacked-unit-own-script-rtl

variant: stacked value: 12 label: الوزن min: 0 step: 0.5 incrementLabel: زيادة decrementLabel: إنقاص suffixText: كغم direction: rtl

stacked-prefix-rtl

variant: stacked value: 120 label: المبلغ incrementLabel: زيادة decrementLabel: إنقاص prefixText: $ suffixText: USD minFractionDigits: 2 maxFractionDigits: 2 direction: rtl

stacked-percent-rtl

variant: stacked value: 40 label: العتامة min: 0 max: 100 incrementLabel: زيادة decrementLabel: إنقاص suffixText: % direction: rtl

stacked-align-end-unit-rtl

variant: stacked value: 44 label: גודל steppers: false suffixText: px align: end direction: rtl

`variant: filled` (6)

filled-empty

variant: filled label: Quantity incrementLabel: Increase decrementLabel: Decrease

filled-value

variant: filled value: 12 label: Quantity incrementLabel: Increase decrementLabel: Decrease

filled-large

variant: filled size: large value: 12 label: Quantity incrementLabel: Increase decrementLabel: Decrease

filled-error

variant: filled value: 0 label: Quantity errorText: Order at least 1. error: true incrementLabel: Increase decrementLabel: Decrease

filled-disabled

variant: filled value: 12 label: Quantity disabled: true incrementLabel: Increase decrementLabel: Decrease

filled-unit

variant: filled value: 8 label: Corner radius incrementLabel: Increase decrementLabel: Decrease suffixText: px

`variant: outlined` (6)

outlined-empty

variant: outlined label: Quantity incrementLabel: Increase decrementLabel: Decrease

outlined-value

variant: outlined value: 12 label: Quantity incrementLabel: Increase decrementLabel: Decrease

outlined-large

variant: outlined size: large value: 12 label: Quantity incrementLabel: Increase decrementLabel: Decrease

outlined-error

variant: outlined value: 0 label: Quantity errorText: Order at least 1. error: true incrementLabel: Increase decrementLabel: Decrease

outlined-disabled

variant: outlined value: 12 label: Quantity disabled: true incrementLabel: Increase decrementLabel: Decrease

outlined-required

variant: outlined label: Quantity required: true requiredText: Required incrementLabel: Increase decrementLabel: Decrease

इससे जनरेट किया गया: specs/number-field.spec.json, tokens/comp/field.tokens.json, design/tokens/

वेब क्या अलग ढंग से बनाता है

एलिमेंट के शैडो रूट में एक <tanrei-field> रहता है, जिसके भीतर एक <tanrei-number-input> है। नंबर फ़ील्ड को इंपोर्ट करने से दोनों डिफ़ाइन हो जाते हैं।
नंबर फ़ील्ड फ़ॉर्म से जुड़ा एलिमेंट है, और वही एक कंट्रोल है जो उसके फ़ॉर्म को मिलता है। वह name लेता है और अपना मान सादी दशमलव संख्या (12.5) के रूप में सबमिट करता है, लोकेल चाहे जो दिखाए। रीसेट होने पर वह value ऐट्रिब्यूट पर लौटता है। जब तक required है और उसमें कोई मान नहीं है, वह फ़ॉर्म को बताता है कि मान नहीं है, और जब तक उसका टेक्स्ट संख्या नहीं है, यह कि इनपुट ग़लत है।
यह एक ब्लॉक है, उतना ही चौड़ा जितनी उसकी जगह। जो जगह कोई चौड़ाई नहीं देती, वहाँ लंबा लेबल उसे उसके बॉक्स से चौड़ा कर देता है: वहाँ उसे चौड़ाई दें।
भाग सदस्यों के हैं, उनके अपने नामों से: फ़ील्ड से label, label-icon, requirement-label और supporting-text; नंबर इनपुट से container, outline, active-indicator, input, prefix, suffix और stepper। label और requirement-label दोनों में से उस तक पहुँचते हैं जो दिखाया गया है; field-label और number-input-label किसी एक तक। दोनों सदस्य ख़ुद field और number-input भाग हैं।
entryerror का detail.text इनपुट का invalidText है, और जहाँ कोई नहीं दिया गया वहाँ ख़ाली। detail के टाइप नंबर इनपुट के हैं: TanreiNumberInputInputDetail और TanreiNumberInputEntryErrorDetail।
steppers का ऐट्रिब्यूट उलटे अर्थ वाला no-steppers है, और readOnly का readonly।
input एक CustomEvent है, जिसके साथ detail.value आता है। change और action सादे इवेंट हैं: value एलिमेंट से पढ़ें। अगर action रद्द नहीं किया गया, तो उसके बाद फ़ॉर्म से सबमिट होने को कहा जाता है।
locale के बिना फ़ील्ड सबसे पास का lang ऐट्रिब्यूट पढ़ता है, फिर ब्राउज़र की भाषा।
लोकेल के सेपरेटर के अलावा, जहाँ भी लोकेल बिंदु से ग्रुपिंग नहीं करता, वहाँ बिंदु को दशमलव सेपरेटर पढ़ा जाता है।
Page कुंजी, स्लाइडर की तरह, स्टेप के अपने ग्रिड पर ही दस स्टेप चलती है: 2 के स्टेप के साथ 42 से Page Up 62 देती है, फिर 82।
iOS और iPadOS पर, जब तक ऋणात्मक संख्या टाइप की जा सकती है, फ़ील्ड पूरा कीबोर्ड माँगता है, क्योंकि वहाँ के दशमलव कीपैड में माइनस का चिह्न नहीं है।
एलिमेंट के डिफ़ाइन होने से पहले उसका कोई साइज़ नहीं होता। ऊँचाई के लिए जगह रखें।

दिशानिर्देश