数字字段

概览

link

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

一个带单位和范围的数字字段，以及一个保存金额的数字字段

当产品要把一个数字当作数字来读取时，使用数字字段：数量、尺寸、百分比、金额。用户按所在区域设置的写法键入它，或者用方向键、字段末尾的两个按钮来步进。这个字段的绘制方式和尺寸，与相同变体、相同尺寸的文本字段一致。

组成部分是一个字段和一个数字输入框。字段是框架：标签、必填或选填标记、帮助文本和错误。数字输入框是控件：方框、数字、它的单位和两个步进按钮。数字字段自己什么都不绘制，也没有令牌：它的每个属性都是这两者之一的属性，原样交给它们。

数字字段已经是一个字段：它绝不放进字段里。标签在别处的地方——滑块旁边、表格的单元格里——单独使用数字输入框。

它是一个块，放在哪里就和那里一样宽，它的方框会把它填满。它没有自己的宽度：想要窄一些的字段，就把它放进窄一些的地方。

在 Web 上它是 <tanrei-number-field>。其他平台尚未实现。

用法

link

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="USD"
  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)} />

下一层

link

用它的两个成员手写出来的同一个字段，画面是一样的，对辅助技术来说也是同一个微调按钮（spin button），名称、描述和状态都相同：

<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 和必填与否仍然写在字段上，由字段传给控件：不要设置输入框自己的那几个。数字字段做的事，没有一件是手写的字段和数字输入框做不到的。

规格

link

到达上限而被禁用的步进按钮、靠末尾边对齐的数字、没有步进按钮、错误、只读的和禁用的数字字段

字段

link

部件	它是什么
标签	属于字段：位于容器上方（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，每一个都是完整的触摸目标。它们绝不会画得更小，也绝不上下叠放：一行里容不下它们时，就把它们关掉。按键仍然可以步进。

值和文本

link

何时	发生什么
用户键入、粘贴或听写	什么都不改。input 带出文本读作的数字，或者 null
焦点离开，或者按下 Enter	文本被确认：低于 min 时提高到 min，高于 max 时降低到 max，按 maxFractionDigits 取整，成为值，并按区域设置的写法写回。值有变化时触发 change
文本为空	值变为 null
文本不是数字	文本保留。值变为 null，字段进入错误状态并显示 invalidText——没有 invalidText 时显示它的 errorText——同时触发 entryerror
产品设置 value	无论之前键入了什么，都显示这个数字。不触发任何事件，这个数字也不会按 min 和 max 修正

已确认的数字用区域设置的数字和小数分隔符书写，小数位数在 minFractionDigits 和 maxFractionDigits 之间，不带分组分隔符——这样显示出来的内容可以原样再键入一遍。

同一个值 1.5，分别以德语和埃及阿拉伯语显示

文本按字段的 locale 宽松地解读；locale 为空时，按页面的语言解读：

• 数字两侧和数字内部的空格会被忽略。
• 数字之前的连字符减号、减号或加号是正负号。
• ASCII 数字、区域设置自己的数字和全角数字都算数字。
• 数字之间的区域设置分组分隔符会被忽略：在英语中，1,234.50 读作 1234.5。
• 键入或粘贴进来的前缀和后缀会被忽略：12 px 读作 12。
• 字母、指数、两个分隔符，或者单独一个正负号，都不是数字。

字段绝不在两种区域设置之间猜测。在以逗号为小数分隔符的德语中，1.500 读作 1500，1.5 读作 15。

在从右到左的布局中：用拉丁字母写的单位位于数字之后，从左到右书写；用页面自身的文字写的单位位于数字的左侧

数字和它的单位是连成一体书写的。前缀写在数字之前，后缀写在数字之后，方向按单位自身所用文字的书写方向，与页面的方向无关。所以“44 px”“$ 120 USD”和“40 %”在阿拉伯语或希伯来语的页面里，读起来与在英语页面里一样；用阿拉伯字母或希伯来字母写的单位，则位于数字的左侧。步进按钮和标签跟随页面。align="end" 让数字紧靠它的单位：单位用拉丁字母或符号书写时，在两种方向下都靠右。要让拉丁字母的货币代码位于数字的左侧，就让后缀以一个从右到左标记（U+200F）开头。

步进

link

输入	发生什么
上方向键、下方向键	按 step 步进
Page Up、Page Down	按 step 的十倍步进
按下步进按钮	步进一次。按住不放时会重复：半秒之后开始，先是每秒十次，然后每秒二十次
Home、End、左方向键、右方向键	在文本中移动插入点
滚轮、拖动	什么都不发生。页面照常滚动

一次步进会走到步长网格上的下一个数字，网格从 min 算起（没有 min 时从零算起）：步长为 5 时，12 向上步进到 15，向下步进到 10。它按十进制计算，所以 0.2 步进 0.1 得到 0.3。空的字段会步进到范围允许的、离零最近的数字。

step 说明一步走多远。它不限制可以键入什么：步长为 5 时，键入的 12 仍然是 12。只接受某些数字时，请校验值并设置 error。

与滑块搭配

link

放在滑块旁边、与滑块共用一个行标题的数字，只要方框就够了：用数字输入框，由它自己的 label 命名。示例在它的页面上。

构成

构成

绘制在 Web 包所绘的测试样例 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 TanreiButtons 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 TanreiButtons 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 TanreiButtons 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 Buttons 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/

Web 上绘制方式的不同之处

link

• 这个元素的 shadow root 里有一个 <tanrei-field>，其中放着一个 <tanrei-number-input>。导入数字字段，两者也随之完成定义。
• 数字字段是与表单关联的元素，也是它的表单遇到的唯一控件。它接受 name，无论区域设置显示成什么样，都以普通的十进制数字（12.5）提交它的值。重置时回到 value 属性（attribute）的值；在 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 对应含义相反的属性（attribute）no-steppers，readOnly 对应 readonly。
• input 是带有 detail.value 的 CustomEvent。change 和 action 是普通事件：从元素上读取 value。除非 action 被取消，否则随后会请求表单提交。
• 没有 locale 时，字段读取最近的 lang 属性（attribute），其次是浏览器的语言。
• 除了区域设置的分隔符之外，只要该区域设置不用句点分组，句点也读作小数分隔符。
• 翻页键与滑块一样，在步长自己的网格上走十步：步长为 2 时，在 42 上按 Page Up 得到 62，再按一次得到 82。
• 在 iOS 和 iPadOS 上，可以键入负数时，字段会请求完整键盘，因为那里的小数键盘没有减号。
• 在元素定义之前，它没有尺寸。请预留高度。

指南

link

数字字段、文本字段还是滑块

link

方面	数字字段	文本字段	滑块
里面是什么	一个数字	任意文本	某个范围内的一个数字
选择方式	键入或步进	键入	拖动
适合	已经知道的值	不是数量的数字串	凭感觉选出的值

邮政编码、卡号、电话号码和一次性验证码都由数字组成，但不是数量：没有人会给邮政编码加一。它们请使用文本字段。

推荐

link

• 写一个标签，说明计数的是什么，并让它在表单中保持可见。
• 把单位放进 suffixText，把货币符号放进 prefixText。
• 后缀读出来不合适时，提供 valueText：× 用“1.5 倍”。
• 编写 invalidText 时要说明该键入什么：“请输入数字。”
• 整数把 maxFractionDigits 设为 0。这样键盘上就没有分隔符。
• 给出 incrementLabel 和 decrementLabel：写在字段上，或者用 setWords() 为整个产品只给一次。Tanrei 不自带任何文字：没有名称的步进按钮仍然会绘制，用指针按下时仍然步进，但不提供给辅助技术，因为在那里微调按钮自己就能步进。

避免

link

• 不要把数字字段用于不是数量的数字串。
• 不要在 input 时保存。每按一次键它都会触发；change 才带有已确认的值。
• 不要指望 min 和 max 修正你自己设置的值。它们作用于用户确认的内容。
• 不要把选择单位的控件放进字段里面。在旁边放一个下拉选择框。
• 不要把数字字段放进字段。它已经是一个字段；字段框住的控件是数字输入框。
• 不要为了把方框放在你自己的标签下面而隐藏数字字段的标签。请使用数字输入框。

无障碍

link

角色

spinbutton

标注

The number field adds nothing to what its members expose and coordinates nothing: the Field gives the number input its name, its description and its required, invalid and disabled states (FLD-8, FLD-10, FLD-11, FLD-14), and the number input carries them on its own element with its value, its limits and its value text (NMI-12, NMI-34). Assistive technology meets one spin button named by label and two buttons that are no focus stops, exactly as it meets a Field around a number input written by hand.

最小目标

即使外观尺寸更小，点击区域也满足最小目标尺寸。 minimum 32px · pointer 44px · spacing 8px · touch 48px

键盘操作

按键	动作
Every key	The number input's (its accessibility block; NMI-20, NMI-23). The number field handles no key and adds no focus stop (NUM-49).

备注

• One level down is the same thing: a Field with a number input in it. Every fixture has that pair as its twin, and the accessibility tree of the two is the same (NUM-47).
• On the web the two members stand in the number field's own shadow root, so the form meets the number field and not the input (NUM-48); focus passes through to the input (NUM-49).
• Two levels down, for a number whose label is elsewhere and that shows no message, is the number input alone, named by its own label: beside a slider under one row title, in a table, in a toolbar.

生成自 specs/number-field.spec.json, tokens/sys/measure.tokens.json

组件负责的部分

link

• 输入框是一个微调按钮（spin button）。它的名称是 label，无论是画出来的还是隐藏的，绝不是占位符。
• 它的值是已确认的数字，它的范围是 min 和 max。
• 显示出来的辅助文本或错误文本是它的描述；字段为选填时，还会加上 optionalText。
• error 为 true 或文本不是数字时，它暴露为无效；设置了 required 时，暴露为必填；只读时，暴露为只读。
• 字段获得焦点期间出现的错误，会以礼貌（polite）的方式朗读一次——文本不是数字时也一样。
• 步进按钮是由 decrementLabel 和 incrementLabel 命名的按钮；没有人命名的那一个对辅助技术隐藏。它们不在焦点顺序中，因为方向键在输入框里就能步进；通过触摸浏览的用户仍然能找到它们。
• 按下步进按钮不会移动焦点，所以不会唤起屏幕键盘。
• 输入法正在组合输入时，字段不解读任何内容，也不处理任何按键。
• 滚轮绝不会改变数字。
• 字段的点击区域满足最小目标，每个步进按钮都是完整的目标。
• 文本放大到 200% 时，标签和帮助文本会换行。数字保持在一行里，并且可以滚动。
• 当一行放不下并排的数字和步进按钮时（例如在窄窗口中把文本放大到 200%，并带有前缀和较长后缀），步进按钮会移到数字下方单独的一行，位于方框的末端。它们绝不会被隐藏，因为在触摸屏上它们是步进的唯一方式。
• 在强制颜色模式下，字段会多出一道边线，错误靠文字和无效状态来表达。
• 在从右到左的布局中，步进按钮和标签会镜像：步进按钮位于左端。数字和它的单位按单位自身所用文字的写法书写：用拉丁字母或符号写的单位位于数字之后，从左到右书写；用页面的文字写的单位位于数字的左侧。朗读的内容不变。

Web 上的已知差距：

• Chromium 读出数字时不带单位：它从输入框里的文本取得值文本，而略过字段指定的那一个。单位重要时，请在标签里写明。
• 在元素定义之前，什么都不绘制。

需要你做的事

link

• 为每个数字字段提供 label。
• 在字段上编写 invalidText。requiredText、optionalText、incrementLabel 和 decrementLabel 可以写在字段上，也可以用 setWords() 为整个产品只给一次。Tanrei 不自带任何文字；缺少的文字会在开发时报告。参见产品的文字。
• 自己校验值，设置 error，并编写说明如何改正这个数字的 errorText。
• 给滑块和它旁边的数字输入框相同的名称。