Entrada numérica
La caja de un número (escrito en la forma de la configuración regional o cambiado por pasos con una tecla o un botón, mantenido dentro de unos límites y con su unidad al lado), sin fila de etiqueta, ayuda ni texto de error propios. Para un número cuya etiqueta está en otra parte, o dentro de un campo que el producto compone por su cuenta.
Avanzado
La mayoría de los productos usan Number field, del que este componente forma parte.
- Categoría
- Entradas de texto
- Tokens
comp.number-input- Nivel
- Base
- Se usa en
- Number field
- Web
tanrei-number-inputschedule - SwiftUI
TanreiNumberInputradio_button_unchecked - Jetpack Compose
TanreiNumberInputradio_button_unchecked - Flutter
TanreiNumberInputradio_button_unchecked - React Native
NumberInputradio_button_unchecked
- Variantes que no se incluyen en
- tanrei: filled, outlined
Generado a partir de docs/status/status.json, specs/number-input.spec.json
Sin nada más: un número junto a su control deslizante bajo un mismo título de fila, y una cantidad en una fila cuya etiqueta está a su lado
Escritorio de roble
Una entrada numérica es la caja de un campo numérico, sola: el contenedor, el número, su prefijo y su sufijo, y los dos botones de paso. No tiene fila de etiqueta encima, ni ayuda ni texto de error debajo.
Úsala sin nada más donde la etiqueta que lee la persona está en otro lugar:
| Dónde | La etiqueta que lee la persona | El label de la entrada |
|---|---|---|
| Junto a un control deslizante, bajo un mismo título de fila | El título de la fila | Las mismas palabras que el del control deslizante: «Escala» |
| Una celda de una tabla | El encabezado de la columna | La columna y la fila: «Cantidad, escritorio de roble» |
| Un tamaño en una barra de herramientas | El glifo o el texto que tiene al lado | Qué define: «Tamaño de fuente» |
Sin nada más, la entrada necesita un label propio. Es el nombre accesible. Una entrada stacked nunca lo dibuja; una filled o una outlined lo dibuja como la etiqueta que flota en la caja.
Es un componente avanzado: el control sin nada más, para un producto que compone el suyo. La mayoría de los formularios quieren el campo numérico, que es esta entrada dentro de un campo, listo para usarse.
Se usa en el campo numérico. Para enmarcarla tú, ponla dentro de un campo, que le da nombre, la describe, la marca como obligatoria y la pone en su estado de error.
Es un bloque tan ancho como el lugar en el que se pone, tanto sin nada más como enmarcada. No tiene ancho propio: para una caja más estrecha, dale un lugar más estrecho.
En la web es <tanrei-number-input>. Las demás plataformas todavía no la han implementado.
value es un número, o null mientras la entrada no contiene ninguno. Cambia cuando la persona confirma (el foco sale, pulsa Enter o da un paso), y no con cada tecla. Mientras tanto, input lleva lo que el texto dice en ese momento.
<!-- Junto a un control deslizante, bajo un título de fila que dibuja el producto. Cada uno recibe su nombre con palabras. -->
<div class="row">
<tanrei-slider id="scale" label="Escala" min="0.25" max="4" step="0.05" value="1.5"></tanrei-slider>
<tanrei-number-input id="scale-number" label="Escala" min="0.25" max="4" step="0.05" value="1.5"
suffix-text="×" value-text="1,5 veces" align="end" no-steppers></tanrei-number-input>
</div>
<!-- Una celda de una tabla: el encabezado de la columna es la etiqueta visible. -->
<td><tanrei-number-input name="quantity-oak-desk" label="Cantidad, escritorio de roble" value="2" min="1" max="99"
increment-label="Aumentar" decrement-label="Reducir"></tanrei-number-input></td>
<script type="module">
import '@tanrei/web/components/number-input';
import '@tanrei/web/components/slider';
const slider = document.querySelector('#scale');
const number = document.querySelector('#scale-number');
// Un valor en dos controles: el input de cada uno se escribe en el value del otro.
slider.addEventListener('input', () => (number.value = slider.value));
number.addEventListener('input', (event) => {
if (event.detail.value !== null) slider.value = event.detail.value;
});
// Una confirmación cambió el valor. Ya es el nuevo: un número, o null.
number.addEventListener('change', () => save(number.value));
</script>// Un componente avanzado —una pieza de la que se construyen otros— se importa desde la entrada advanced.
import { NumberInput } from '@tanrei/react/advanced';
<NumberInput label="Escala" value={scale} min={0.25} max={4} step={0.05} suffixText="×"
align="end" noSteppers onChange={(event) => setScale(event.currentTarget.value)} />Un control deslizante es para un valor que se elige a ojo, y una entrada numérica para uno que se conoce. Ponlos en una fila bajo un título tuyo, dales a los dos el mismo nombre, los mismos límites y el mismo paso, y escribe el input de cada uno en el value del otro, como hace el ejemplo de arriba. Da valueText donde el sufijo se leería mal: «1,5 veces» para ×. no-steppers omite los dos botones que el control deslizante hace innecesarios; las teclas de flecha siguen dando los pasos.
Un campo alrededor de una entrada numérica es un campo numérico escrito por extenso. Deja vacío el label de la entrada: el campo le da nombre. label, error, disabled y la obligatoriedad se indican en el campo; name, value, los límites y la unidad, en la entrada.
<tanrei-field label="Cantidad" required required-text="Obligatorio"
supporting-text="Hasta 99 por pedido.">
<tanrei-number-input name="quantity" min="1" max="99" invalid-text="Introduce un número."
increment-label="Aumentar" decrement-label="Reducir"></tanrei-number-input>
</tanrei-field>Un campo con una entrada numérica dentro: la misma imagen que un campo numérico
La entrada le dice a su campo lo que solo ella sabe. La ayuda del campo está alineada con el texto de la caja: empieza y termina en el margen interior del texto de la caja, se dibujen o no los botones de paso. Una entrada filled u outlined dibuja ella misma la etiqueta del campo, flotando en la caja, de modo que el campo no dibuja ninguna fila de etiqueta. Un texto que no es un número pone el campo en error con el invalidText de la entrada, o con el errorText del propio campo donde la entrada no tiene ninguno.
No hay nada que debas mantener sincronizado a mano: una entrada numérica no tiene recuento de caracteres.
Entradas sin nada más: un botón de paso deshabilitado en el límite, dígitos en el borde de fin, sin botones de paso, en error, de solo lectura y deshabilitada
Filled y outlined, sin nada más: la etiqueta de la propia entrada flota en la caja
m3-likeEn un diseño de derecha a izquierda: una unidad en letras latinas después del número, de izquierda a derecha, y una unidad en la escritura de la propia página a la izquierda del número
Un número y su unidad son una sola pieza de escritura. El prefijo se escribe antes del número y el sufijo después, en la dirección de la escritura de la propia unidad, sea cual sea la dirección de la página. Así, «44 px», «$ 120 USD» y «40 %» se leen en una página en árabe o en hebreo igual que en una en inglés, y una unidad escrita en letras árabes o hebreas queda a la izquierda del número. Los botones de paso y la etiqueta siguen a la página. align="end" pone el número junto a su unidad: a la derecha para una unidad en letras o signos latinos, en las dos direcciones. Para un código de moneda latino a la izquierda del número, empieza el sufijo con una marca de derecha a izquierda (U+200F).
| Aspecto | La entrada numérica | El campo que la rodea |
|---|---|---|
| Dibuja | La caja, el número, el marcador de posición, el prefijo y el sufijo, los dos botones de paso y la etiqueta que flota en una caja filled u outlined | La fila de etiqueta sobre una entrada stacked, la marca de obligatorio o de opcional, la ayuda, el texto de error |
| Contiene | El valor, los límites y el paso, su lugar en un formulario, los eventos | Nada |
| Dice a la tecnología de apoyo | Un botón de número (spin button): su valor, sus límites, el texto de su valor | El nombre, la ayuda o el texto de error, obligatorio, no válido, deshabilitado |
Las tres variantes y los tres tamaños, small (32), medium (40) y large (56), son los de la entrada de texto, y la caja se dibuja y se mide como la entrada de texto de la misma variante y el mismo tamaño. El sistema predeterminado solo incluye stacked.
Los dos botones de paso son Buttons de texto de tamaño mediano, uno junto al otro. En el sistema predeterminado ocupan 88 del ancho de la caja, y cada uno es un objetivo táctil completo. Nunca se dibujan más pequeños ni se apilan: donde una fila no puede permitírselos, desactívalos. Las teclas siguen dando los pasos. Se dibujan con los propios tokens del Button, y nunca están en error.
Lo que ocurre en la caja (el valor y el texto, cómo se lee un texto en una configuración regional, y los pasos) es lo mismo sin nada más, enmarcada y en un campo numérico, y se describe una sola vez, en la página del campo numérico.
- El nombre es
label.labelHiddenimpide que una entrada filled u outlined lo dibuje. - Un error es
error, que defines tú: la caja se dibuja en su estado de error y se expone como no válida. La entrada no tiene texto de error. Di con palabras qué está mal junto a ella, o enmárcala. - Un texto que no es un número se conserva, vacía el valor, dibuja la caja en error y emite
entryErrorconinvalidText.invalidTextse añade a la descripción de la entrada; nada lo dibuja. - La obligatoriedad la dice un campo. Una entrada sin nada más no tiene ningún ajuste de obligatoriedad: donde el formulario necesite una respuesta, valídala tú.
Anatomía
| Parte | Descripción |
|---|---|
1 container | The input's box: it holds the prefix, the input, the suffix and the steppers on one line. It measures and is drawn as the text input's container of the same variant and size, carries the hover state layer and shows focus by its edge. |
2 outline · opcional | The border of an outlined number input, which opens a gap where the floated label crosses it; in a stacked one, the line drawn inside the container's edge while it is focused or in error, which takes no layout space. |
3 active-indicator · opcional | The line along the bottom of a filled number input; its focused state is thicker and colored. |
4 label · opcional | In a filled or outlined input, its name drawn inside the box: it rests in the input line while the input is empty and not focused, and floats otherwise. A stacked input draws none: the label above it is the row of the Field that frames it. |
5 required-asterisk · opcional | After the floating label's text, an asterisk, where the Field that frames the input says the control is required and marks it (NMI-7). Kept from assistive technology. |
6 input | The number as text, in the platform's native text element: what the person typed while they edit, the committed number in the locale's form otherwise. One line, drawn with tabular figures. |
7 placeholder · opcional | A hint shown while the input is empty; never a label and never a value. |
8 prefix · opcional | Fixed text before the number that is part of the field and not of the value: a currency sign. |
9 suffix · opcional | Fixed text after the number that is part of the field and not of the value: the unit (px, %, kg). It is read with the value. |
10 stepper · opcional | One of two buttons at the end of the container that step the number down and up by step: icon-only Buttons of the text variant showing remove and add, drawn from Button's tokens. Not focus stops; the arrow keys do their work. |
11 caret | The text cursor, colored by the caret part of the variant. |
Propiedades
| Propiedad | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
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. |
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. |
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. |
label | string | "" | Names the input for assistive technology where no Field frames it — a number under a column's head, in a toolbar, beside a slider under one row title; a filled or outlined input also draws it, as the label that floats in its box. Inside a Field leave it empty: the Field's label names the input, and is what floats. |
labelHidden | boolean | false | Does not draw the floating label of a filled or outlined input, which stays the accessible name. Inside a Field, hide the label on the Field. A stacked input draws no label, so this changes nothing there. |
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. |
error | boolean | false | Draws the input in its error condition and exposes it as invalid. A Field sets it from its own error; set it here only where no Field frames the input. What a value means is the product's to validate; the input never sets this itself. A number input also enters an error of its own while the text it was left with is not a number (NMI-21). |
disabled | boolean | false | Prevents focus, editing, stepping and form submission. Inside a Field, disable the Field, so that its label follows. |
readOnly | boolean | false | The number can be focused, selected and copied, but not changed: no key steps it and no stepper is drawn. |
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. |
max | number | null | The highest number a commit keeps; a higher one is lowered to it. Null for no limit. |
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. |
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. |
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. |
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. |
prefixText | string | "" | Fixed text before the number, not part of the value: a currency sign ("$", "¥"). |
suffixText | string | "" | Fixed text after the number, not part of the value: the unit ("px", "ms", "%", "kg"). Read to assistive technology with the number. |
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. |
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. |
minFractionDigits | number | 0 | The fewest digits shown after the decimal separator; zeros fill them (2 for an amount of money: "12.00"). |
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. |
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. |
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). |
Eventos
| Evento | Descripción |
|---|---|
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. |
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. |
action | The person pressed the keyboard's action key (Enter, Return, Done). |
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). |
Estados
Comportamiento
Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.
| ID | Requisito |
|---|---|
NMI-1 | THE number input SHALL draw its container at least comp.input-box.stacked.container.height.medium tall WHILE variant is stacked (or a variant a design system adds, which is drawn as a stacked box) and at least comp.input-box.container.height.medium tall WHILE variant is filled or outlined, for size medium (and so on for each size), with a stacked or outlined number input's four corners and a filled one's top corners rounded by comp.input-box.container.shape, a filled one's bottom corners by comp.input-box.container.shape-bottom, all eased by sys.shape.corner-smoothing, and SHALL lay out in it one row, centred vertically: the input line — the prefix where there is one, the input taking the remaining width and the suffix where there is one (NMI-28), in the order and the direction NMI-39 gives — and at the container's end the two steppers WHILE they are shown (NMI-25), comp.input-box.container.gap.medium after the input line (and so on). Text SHALL be comp.input-box.container.padding-inline.medium from the container's edge and the input line SHALL have at least comp.input-box.stacked.container.padding-block.medium above and below it in a stacked box and comp.input-box.container.padding-block.medium in a filled or an outlined one (and so on for each size). |
NMI-2 | THE number input SHALL measure as the text input of the same variant and size measures (TXI-16): the same container height, paddings and corners, and the same text style and start edge for its input text, so that a number input and a text input side by side share every horizontal line of their boxes and a number input below a text input shares its start edges. THE number input SHALL be drawn, in every state, plain and in error, with the colors the text input of the same variant has for the parts of the same name. The two are drawn from one set of tokens (NMI-47): what a layer changes of the box, it changes for both. The rows around the two boxes — the label, the help, the error — are alike for another reason: they are the one Field's (FLD-1), whichever control it frames. |
NMI-7 | WHERE variant is filled or outlined, WHILE the floating label is drawn (NMI-8) and the Field that frames the input gives it an asterisk as its required mark (FLD-25) THE number input SHALL draw the character "*" after the label's text, comp.input-box.requirement.asterisk-gap from it, in the label's text style and at the label's place, resting and floated with it, colored by its required-asterisk part (comp.input-box.outlined.required-asterisk.color for an outlined input; its error. part WHILE the input is in error), and SHALL keep it from assistive technology, because the required state already says it (NMI-12). It SHALL draw no tag and no optional label, as the text input of that variant draws none (TXI-50): which mark a required control gets is the Field's to say (FLD-6), and a tag named there reaches a floating label as the asterisk. WHILE no Field frames it, or the Field gives no mark, or the label is not drawn, THE number input SHALL draw no mark. |
NMI-8 | WHERE variant is filled or outlined and the label is drawn THE number input SHALL rest the label in the input line, in comp.input-box.label.typescale.medium for size medium (and so on), WHILE the input is empty and not focused, and otherwise float it as the text input of that variant floats its label (TXI-13): to the top of a filled container, above the input line, or onto an outlined container's top edge with a gap of comp.input-box.outline.notch-padding in the outline on each side of it, in comp.input-box.label.floated-typescale.medium for size medium (and so on); a filled number input that draws its label SHALL be at least twice comp.input-box.container.padding-block-with-label.medium plus one line of each of those two text styles tall (and so on for each size), so that it does not change height when the label floats. WHEN the label floats or rests THE number input SHALL move and resize it over comp.input-box.motion.label-duration with comp.input-box.motion.label-easing, and at once where motion is reduced. The label SHALL wrap rather than be cut and SHALL never be drawn over the input text. WHILE the input is empty THE number input SHALL show placeholder, in the placeholder color of its variant (comp.input-box.stacked.placeholder.color), only while the label is not in the input line — a stacked input, whose label is the row of its Field; floated; or not drawn — so that the two never overlap. The label it floats SHALL be its accessible name (NMI-12): the label of the Field that frames it, or its own label where none does. WHILE labelHidden is true — its own, or that Field's (FLD-25) — or it has no name THE number input SHALL draw no label. WHERE variant is stacked, or a variant laid out as stacked (NMI-43), THE number input SHALL draw no label at all: the label above it is the Field's row (FLD-2). |
NMI-10 | WHILE error is true — set by the product, or by the Field that frames it (FLD-8) — or the entry error of NMI-21 lasts THE number input SHALL draw every part of its container, in every state, from the error parts of its variant (comp.input-box.stacked.error.outline.color and the other error. parts), so that the box itself is marked and not only a text below it: a stacked number input draws, at rest, a line of comp.input-box.outline.width in comp.input-box.stacked.error.outline.color inside its container's edge, following its corners and taking no layout space; and it SHALL expose itself as invalid to assistive technology. The steppers SHALL stay as they are drawn: they are not in error. THE number input SHALL never set error itself — what a value means is the product's to validate — and SHALL show no error text of its own: the words that say what is wrong are the errorText of the Field that frames it, which that Field draws and gives the input as its description (FLD-7, FLD-11). |
NMI-12 | THE number input SHALL take its name, its description and its required state from the Field that frames it, as every control a Field frames does (FLD-10, FLD-11): the Field's label is its accessible name, whether or not any label is drawn, and the Field's supporting text with, in error, the error text after it its description. WHILE label is not empty THE number input SHALL use it as the accessible name instead, for an input no Field frames or one whose visible label is elsewhere — the head of a table's column, a toolbar, the title of a row that also holds a slider. It SHALL never use placeholder as the name, WHILE it has either name THE number input SHALL expose that one alone, over a name the product gives it on the element (aria-label or aria-labelledby); and WHILE it has neither name and the product gives it a name of its own on the element — aria-label, or aria-labelledby naming an element — THE number input SHALL expose that name as its accessible name; IF it has none of the three it SHALL still render and work, and in debug builds SHALL report that it has no accessible name. WHILE its Field says it is required THE number input SHALL expose the required state to assistive technology (and, on the web, a missing value to the form's constraint validation, NMI-35), whichever mark is drawn and where none is; it has no requirement setting of its own and SHALL NOT validate because of one. |
NMI-14 | WHEN the user presses a floating label, the prefix, the suffix or the container's padding THE number input SHALL move focus to its input and do nothing else: it SHALL NOT change the number or select it, and SHALL draw no press answer, because a press on a field is not an action. A press on the label row of the Field that frames it focuses the input too, and a press on that Field's supporting row does nothing: both are the Field's (FLD-12). WHERE the container is shorter than the minimum target THE number input SHALL extend its hit area vertically to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size; a platform that cannot tell the input type SHALL use sys.target.touch. THE number input SHALL add one stop to the focus order, its input, and no other: the steppers are not focus stops (NMI-25). |
NMI-15 | WHILE hovered or focused THE number input SHALL render its container, active indicator, outline, floating label and its asterisk, input, placeholder, prefix and suffix, caret and opacity, and the widths of its outline and active indicator, from the component tokens of the highest-precedence active state, with precedence focused over hovered (their error parts WHILE error is true); unlike a button, focus gained by pointer or touch SHALL select the focused state, because a field shows where typing will go however it was focused. THE number input SHALL show focus by its focused tokens and SHALL NOT draw the focus ring: the focused active indicator or outline is its focus indicator, and a stacked number input draws it as a line of its focused outline width, in the focused outline color of its variant, inside the container's edge, following its corners and taking no layout space, so that nothing in the container moves as the line appears, thickens or goes; WHERE sys.behavior.focus-style is glow it SHALL also draw the glow around the container while focused. A hovered stacked number input SHALL show the state layer on its container and draw no edge. Selected text in the input SHALL be highlighted in comp.input-box.selection.color and drawn in comp.input-box.selection.content.color in every variant and state. WHEN its state, error or disabled changes THE number input SHALL change its colors and widths over the state duration of its size (comp.input-box.motion.state-duration.small, .medium or .large) with comp.input-box.motion.state-easing, and at once WHERE motion is reduced. |
NMI-16 | THE number input SHALL hold as its value a number or nothing: value is a number, or empty (null, or the platform's own absent value) WHILE the field holds none. It SHALL edit that number as text in the platform's native text element, on one line, and WHILE the person is editing the text is theirs: THE number input SHALL NOT rewrite, reformat, clamp, round or refuse what is typed, pasted or dictated, SHALL NOT move the caret, and SHALL follow the text input's rule for an input method (TXI-4): it leaves a composition to the native element and reads the text only when the composition ends. It SHALL give the input a numeric keyboard: with a decimal separator WHILE maxFractionDigits is greater than 0, and with a minus sign WHILE min is empty or below 0, where the platform's keyboards can say so; without autocapitalization, autocorrection or suggestions. |
NMI-17 | WHEN a value is committed (NMI-20) or the product sets value (NMI-31) THE number input SHALL write the number into its input in the form of locale — a BCP 47 language tag, or WHILE locale is empty the platform's current locale: that locale's digits and decimal separator, a minus sign before a negative number, at least minFractionDigits and at most maxFractionDigits digits after the separator with no other trailing zeros, no exponent and no grouping separators, so that what is shown is what can be typed back. An empty value SHALL be an empty input, which shows placeholder as NMI-8 says. THE number input SHALL draw the number on one line in comp.input-box.input.typescale.medium for size medium (and so on) and the input color of its variant (comp.input-box.stacked.input.color), scrolling it sideways inside the input when it is longer than the input, and SHALL NOT cut it with an ellipsis. |
NMI-18 | THE number input SHALL read a text as a number leniently, by the locale's form: ignoring spaces around it and inside it; taking a hyphen-minus or a minus sign before the digits, or a plus sign, as its sign; taking ASCII digits, the locale's own digits and full-width digits as digits; taking the locale's decimal separator, once, as the separator; ignoring the locale's grouping separator wherever it stands between two digits; and ignoring prefixText before the number and suffixText after it WHERE they were typed or pasted with it ("12 px", "$5"). An empty text, or one of spaces only, SHALL read as no value. Any other text — letters, an exponent, two separators, a sign alone — SHALL read as not a number. THE number input SHALL NOT guess between two locales' forms: a character that is another locale's decimal separator and this locale's grouping separator is this locale's. |
NMI-19 | WHEN the person changes the text — by typing, deleting, pasting, cutting, dictating, autofill or an input method committing text — THE number input SHALL emit input once per change with the number the text now reads as (NMI-18), not clamped and not rounded, or with the empty value WHILE the text reads as no value or as not a number; WHEN a step changes the value (NMI-22) it SHALL emit input once with the new value. WHEN the product sets value THE number input SHALL NOT emit input or change. THE number input SHALL NOT change value itself while the person types: value is the committed number until the next commit. |
NMI-20 | WHEN the input loses focus, or the person presses the keyboard's action key (Enter, Return, Done), THE number input SHALL commit its text: WHILE the text reads as a number it SHALL take that number, raise it to min WHILE min is not empty and the number is below it, lower it to max WHILE max is not empty and the number is above it, round it to maxFractionDigits digits after the separator (a half away from zero), make it the value, and write it back into the input as NMI-17 says; WHILE the text reads as no value it SHALL make the value empty; WHILE the text reads as not a number it SHALL enter the entry error of NMI-21. It SHALL then emit change once with the value WHILE the value differs from the one last committed (the value when the input gained focus, or at the last change). THE number input SHALL clamp and round only when it commits, never while the person types, so that "25" can be typed on the way to "2.5" and "1" on the way to "100" above a minimum of 50; and it SHALL NOT move a committed number to a multiple of step: step says how far a stepper moves, not which numbers may be typed. WHEN the person presses the action key THE number input SHALL emit action after any change it causes, and on the web, inside a form, SHALL then request the form's submission as a native input does unless action was cancelled. The submission SHALL be requested through the form's default button (BTN-30): WHILE the form has a submit button — the platform's own or a Button of type submit — the first of them in document order SHALL be pressed, so that its click is emitted and its name and value are sent, and WHILE that button is disabled nothing SHALL be submitted; only a form with no submit button is asked directly. |
NMI-21 | WHEN the number input commits a text that reads as not a number (NMI-18, NMI-20) THE number input SHALL keep the text as the person left it, make the value empty, enter an entry error, and emit entryError once with the reason invalid and with invalidText, the words it has for the refusal. WHILE an entry error lasts THE number input SHALL be in the error condition as error puts it there (NMI-10) and SHALL report the refusal to the Field that frames it, with invalidText as its words, which that Field shows in its supporting row and announces (FLD-28: its errorText WHILE invalidText is empty; its help stays above either); WHILE no Field frames it invalidText SHALL be the input's description. THE number input SHALL end the entry error, without an event of its own, WHEN the person edits the text into a number or empties it, WHEN a step gives the field a value (NMI-22), or WHEN the product sets value, and SHALL then withdraw its report; the product's own error, and the error and the errorText of its Field, are untouched by it. THE number input SHALL NOT refuse characters as they are typed and SHALL NOT discard what it could not read, because a text that was put right is quicker than a text typed again. |
NMI-22 | WHEN the number input steps up or down by a count of steps — one for an arrow key and a stepper, ten for a page key (NMI-23, NMI-26) — THE number input SHALL start from the number its text reads as, or from the value WHILE the text reads as not a number, and move along the step's grid, the numbers that are min plus a whole multiple of step (zero plus a whole multiple WHILE min is empty): to the next number of the grid in that direction, so that a number between two of them goes to the nearer one in the direction of the step and not past it, and then one more number of the grid for each further step of the count; it SHALL then hold the result within min and max, compute it in decimal so that 0.1 stepped by 0.2 is 0.3, make it the value, write it into the input (NMI-17) with the caret at its end and all of it kept in view, and emit input and then change. WHILE the field holds no value a step in either direction SHALL give it the number nearest to zero that min and max allow and nothing more. A step that would not change the value — up at max, down at min — SHALL do nothing and emit nothing. WHILE step is 0 or less, or not a number, THE number input SHALL step by 1 and in debug builds report the step. |
NMI-23 | WHILE the input has focus, readOnly is false and no input method is composing, WHEN the person presses Up Arrow THE number input SHALL step up by step and WHEN the person presses Down Arrow step down by step (NMI-22); WHEN the person presses Page Up it SHALL step up ten steps and WHEN the person presses Page Down down ten steps: ten times step, on the grid of step and not on one of its own (NMI-22), so that with step 2 the value 42 goes to 62 and 82, as a slider's page keys (SLD-3) and the platform's own stepping of a number by ten go — a number input that stands beside a slider reaches the same numbers by the same keys. A key the platform repeats while it is held SHALL step once for each repeat. THE number input SHALL leave Home, End, Left Arrow and Right Arrow, and every arrow or page key pressed with a modifier key, to the text: they move the caret and select, as in any text input, and SHALL NOT change the value. THE number input SHALL have no key of its own for min and max. |
NMI-24 | THE number input SHALL NOT change its value WHEN the person turns a mouse wheel, scrolls a trackpad or swipes over it, whether or not it has focus — the page or the nearest scrolling ancestor scrolls instead — and SHALL NOT change its value by a drag along the field, its label or its unit. Only typing, the keys of NMI-23 and the steppers change the number. |
NMI-25 | WHILE steppers is true and readOnly is false THE number input SHALL draw two steppers at the end of its container, after the input line: first, in reading order, the one that steps down, showing the glyph remove of the system's icon set, then the one that steps up, showing the glyph add; each an icon-only Tanrei Button of the text variant and default width, at Button's small size WHILE size is small — a small box is as tall as a small Button, and a medium one would make it taller — and at Button's medium size otherwise, drawn from Button's own tokens, the two comp.number-input.stepper.gap apart, measured so that each keeps at least sys.target.touch along the row (two buttons narrower than that stand apart by what is missing), and the one nearest the end comp.number-input.stepper.inset from the container's end edge, both centred vertically in the container. Each SHALL be a Button in its press, its target and its states (BTN-5, BTN-8, BTN-9, BTN-10), with two differences: it SHALL NOT be a focus stop, because Up Arrow and Down Arrow do its work from the input and two more stops in every number of a form would cost more than they give; and it SHALL be exposed to assistive technology as a button named by decrementLabel or incrementLabel, so that a person who explores by touch can find and press it. THE number input SHALL disable the stepper that steps down WHILE the value is at or below min and the one that steps up WHILE it is at or above max, and both WHILE disabled is true. WHILE steppers is false or readOnly is true it SHALL draw neither and keep no room for them. THE number input SHALL NOT draw smaller steppers to save room, and SHALL NOT stack them: a product whose row cannot hold them sets steppers to false. WHILE incrementLabel or decrementLabel is empty THE number input SHALL still draw the stepper and in debug builds report that it has no accessible name. |
NMI-26 | WHEN the person presses a stepper by pointer or touch, or activates it through assistive technology, THE number input SHALL step once by step in that stepper's direction (NMI-22) when the press begins, and SHALL NOT move focus: a field that was not focused stays unfocused, so that a touch on a stepper does not raise the on-screen keyboard, and a focused input keeps its focus and its caret. A step from a stepper SHALL commit as every step does: it emits input and then change, and it ends an entry error. |
NMI-27 | WHILE a stepper is held down by pointer or touch THE number input SHALL repeat its step: after comp.number-input.motion.repeat-delay it SHALL step again, then again once every comp.number-input.motion.repeat-interval, and after its tenth repeated step once every comp.number-input.motion.repeat-interval-fast, until the press ends, the pointer leaves the stepper, or the value reaches min or max. A hold SHALL change how often the field steps and never how far: every step is one step. THE number input SHALL emit input for each step of a hold and change once, when the hold ends. These are waiting times, not motion: they SHALL be kept WHERE motion is reduced. |
NMI-28 | WHILE prefixText is not empty THE number input SHALL draw it before the number, comp.input-box.affix.gap from the input, and WHILE suffixText is not empty after the number, comp.input-box.affix.gap from the input — before and after along the direction of the number's run (NMI-39), not along the layout's — both on the input's line and in its text style, in the affix color of its variant (comp.input-box.stacked.affix.color; comp.input-box.stacked.error.affix.color WHILE error is true), exactly while the label is not in the input line (NMI-8). The prefix and the suffix are part of the field and never of the value: they cannot be edited or selected, a press on them focuses the input (NMI-14), and they SHALL NOT be cut — the input gives up its width first. THE number input SHALL read them to assistive technology with the number, as NMI-34 says, so that a unit or a currency is heard with the figure. THE number input SHALL have no control for choosing a unit: a unit the person can change is a select beside the field. |
NMI-29 | THE number input SHALL align the number in its input WHILE align is start to the field's start edge, as the text of every other field is — the right edge in a right-to-left layout, whatever the direction of the number's run (NMI-39) — and WHILE align is end to the end of the number's run, which is the edge of the input at which the suffix stands or would stand: for a number that stands against its unit and for a number in a column of numbers, because a number is written left to right and the digits of one place stand under each other only where the numbers end at one edge. The end of a left-to-right run is the right edge of the input in every layout direction, and the end of a right-to-left run the left edge: WHERE the run runs with the layout that is the field's end edge, and WHERE it runs against the layout — a number alone, or a number with a unit in Latin letters or signs, in a right-to-left layout — it is the field's start edge, so that there start and end are one edge. It SHALL draw the number, the placeholder, the prefix and the suffix with tabular figures where the typeface has them, so that the digits of two fields stand under each other and a number that is stepped does not move from side to side. |
NMI-30 | IF the product gives a min that is above max THE number input SHALL treat max as empty and in debug builds report it. IF the product sets a value below min or above max, or with more digits after the separator than maxFractionDigits, THE number input SHALL show that value as it is and SHALL NOT correct it: limits apply to what the person commits (NMI-20), and the product's own value is the product's to keep right. IF minFractionDigits is above maxFractionDigits THE number input SHALL use maxFractionDigits for both and in debug builds report it. |
NMI-31 | WHEN the product sets value THE number input SHALL write it into its input as NMI-17 says, replacing the text whatever the person had typed, end any entry error (NMI-21), and SHALL NOT emit input, change or entryError; a value set during an input method's composition SHALL be applied when the composition ends (TXI-4). WHEN the product changes min, max, step, minFractionDigits, maxFractionDigits or locale THE number input SHALL show its value again in the new form, enable and disable its steppers by the new limits (NMI-25), and SHALL NOT change the value or emit anything. |
NMI-32 | WHILE disabled is true — set by the product, or by the Field that frames it (FLD-14) — THE number input SHALL NOT be focusable or editable, SHALL NOT step by any input, SHALL NOT emit input, change, action or entryError, SHALL expose the disabled state to assistive technology, SHALL be left out of form submission on the web, SHALL disable both steppers, and SHALL render every part from the disabled component tokens of its variant (of its error parts WHILE error is true). |
NMI-33 | WHILE readOnly is true and disabled is false THE number input SHALL stay focusable, selectable and copyable, SHALL NOT let the person change the number by typing or by any key of NMI-23, SHALL draw no steppers (NMI-25), SHALL NOT emit input or change, SHALL expose the read-only state to assistive technology, SHALL be submitted with its form on the web, and SHALL render as an enabled field, including its hovered and focused states. |
NMI-34 | THE number input SHALL expose its input as a spin button (the web's spinbutton role; the platform's adjustable or stepper trait elsewhere) named as NMI-12 says: its value the committed number, its minimum min and its maximum max WHILE each is not empty, and its value text valueText WHILE that is not empty and otherwise the number as shown with prefixText before it and suffixText after it, each parted from it by a space ("$ 120 USD", "12 px", "40 %"); WHILE the field holds no value it SHALL expose no value and no value text. WHERE the platform's assistive technology can increase and decrease an adjustable element (a swipe up or down, an increment and a decrement action) those actions SHALL step by step as NMI-23 does. THE number input SHALL expose its steppers as buttons named by decrementLabel and incrementLabel with their disabled state (NMI-25), and SHALL keep the prefix and the suffix from being read a second time as texts of their own. |
NMI-35 | WHERE the platform has forms (the web) THE number input SHALL take part in them as a native input does: it takes name, submits its value as a decimal number with ASCII digits and a period, whatever the locale shows, or an empty string WHILE it holds no value, restores it on navigation, resets to the value it was first given, and reports to the form's constraint validation a missing value WHILE its Field says it is required (NMI-12) and the input holds none, and a bad input WHILE an entry error lasts (NMI-21). |
NMI-36 | THE number input SHALL be block-level, framed and bare alike: exactly as wide as the place it stands in — the width its layout gives it, which inside a Field is the Field's whole width (FLD-1), so that the box fills its Field — with no width of its own and never the platform's default width for a text element, as the text input is (TXI-63). It SHALL never be narrower than its paddings, its prefix and suffix and room for three digits together need, nor than its paddings and its steppers WHILE they are shown. WHILE the place it is given is narrower than the input's line — the paddings, the prefix, three digits and the suffix — and the steppers need beside each other, THE number input SHALL put the steppers on a row of their own below the input's line, inside the container: at its end, the one that steps down first as on one row, stepper.inset from the end edge and from the bottom edge, the input's line then taking the whole first row and ending at the text padding; and it SHALL put them back beside the line WHEN the two fit again. It SHALL never hide the steppers to fit, because a person without arrow keys, on touch, steps by them alone. A product that wants a narrower box gives it a narrower place. |
NMI-37 | WHILE the text size is enlarged THE number input SHALL grow with its texts: a floating label wraps and never clips, and the container grows with the input's line, keeping the height of its size as a minimum; the number stays on one line and scrolls inside its input, the prefix and the suffix grow with it and are never cut, and the steppers keep Button's sizes. At 200% no text SHALL be lost, lie over another part or need scrolling in two directions: where the input's line and the steppers no longer fit on one row, the steppers go to the row below it (NMI-36). The rows of the Field that frames it grow as FLD-16 says. |
NMI-38 | WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE number input SHALL draw its number, its placeholder, its prefix and its suffix, and its floating label with its asterisk, in the platform's text color, SHALL draw an edge comp.input-box.outline.width wide in the platform's control text color around its container in every variant, and that edge in the platform's highlight color at the focused width while focused, and SHALL rely on no color of its own to mark an error: the error is carried by the invalid state (NMI-10) and by the words its Field shows (FLD-17). The steppers are Buttons and are drawn as Buttons are there; a disabled field and a disabled stepper take the platform's disabled text color. |
NMI-39 | THE number input SHALL treat its prefix, its number and its suffix as one run of writing — the prefix written before the number and the suffix after it (NMI-28) — and SHALL lay the three out in that order along the run's own direction, in every layout direction: an affix is part of what is written and not a control, so THE number input SHALL NOT place it by the layout direction as it places a stepper. The run's direction SHALL be the direction of the first strong character of prefixText and, WHERE prefixText has none, of suffixText — a letter, or a direction mark the product wrote there — and left-to-right WHERE neither has one (no affix, or signs alone: "$", "%", "×", "°"), because a number is written left to right; it is the direction the bidirectional algorithm gives the one text of prefix, number and suffix as a paragraph of its own. So a unit or a currency written in Latin letters or in signs stands in a right-to-left layout exactly as in a left-to-right one — "44 px", "$ 120 USD", "40 %", "1.5 ×", the number before its unit from left to right — and a unit written in a right-to-left script stands at the number's left, with a prefix of that script at its right, in a left-to-right layout too. THE number input SHALL decide the run's direction from prefixText and suffixText alone — never from the text being typed, from value or from locale — so that nothing changes sides while the person types. WHERE the layout direction is right-to-left THE number input SHALL mirror everything that is not the run: a floating label standing from the right edge with its asterisk to its left, and the steppers, which are controls, at the container's left end with the one that steps down to the right of the one that steps up, so that down is still the first of the two in reading order; all paddings applied by logical start and end, and the input line standing between the container's start padding and the steppers whatever its run's direction. THE number input SHALL NOT mirror the number: its digits, its sign and its separator SHALL be laid out left to right, and the number SHALL be aligned in its input as NMI-29 says. |
NMI-40 | THE number input SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the number input is shown THE number input SHALL draw itself for the new direction at once, without a motion of its own, keeping its value, its text, its caret and its focus. |
NMI-41 | WHERE the layout direction is right-to-left THE number input SHALL draw the glyphs of its steppers, remove and add, unmirrored: neither is marked as mirrored in the system's icon set, and the order NMI-39 gives the two steppers is the whole of their mirroring. THE number input SHALL NOT mirror a glyph itself, has no slot and draws no other glyph: the glyph before a label is the Field's, and the Field mirrors it (FLD-20). |
NMI-42 | THE number input SHALL lay out its floating label, its placeholder, its prefix and its suffix as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a unit and a currency code keep their own order in a right-to-left layout and reorder nothing beside them; THE number input SHALL still place its floating label and its placeholder, and align their lines, by the layout direction, not by the text's own; the prefix and the suffix it places by the direction of the number's run (NMI-39), which the same characters decide. The texts of the rows around it are laid out so by the Field that frames it (FLD-21). |
NMI-43 | WHEN variant or size names a value that the active design system does not have THE number input SHALL render with the default value's tokens, and in debug builds report the unknown value; WHEN variant names a value the active system has but the number input does not know by name (one a layer added) it SHALL draw no label of its own and draw its edge as a stacked number input does (NMI-15), with that value's own tokens; WHEN align names a value the number input does not know it SHALL behave as start and in debug builds report it. WHEN locale is not a language tag the platform knows THE number input SHALL use the platform's current locale and in debug builds report it. |
NMI-44 | THE number input SHALL have no words of its own: it SHALL take incrementLabel and decrementLabel from the instance's prop and, WHILE that is empty, from the product's words of the same name — the words a product sets once for all its components — and from nowhere else. IF neither gives incrementLabel or decrementLabel WHILE the steppers are drawn THE number input SHALL still draw both steppers and keep them working for a pointer, SHALL keep the one without a name from assistive technology — the spin button's own increase and decrease actions (NMI-34) do its work there, and a button without a name is worse than none — and in debug builds SHALL report the missing words once. The digits, the separator and the minus sign it shows are the platform's locale data and not the number input's words (NMI-17); invalidText is the instance's alone; and the words of a requirement are the Field's (FLD-24). |
NMI-45 | THE number input SHALL say to the Field that frames it what only the input knows, and SHALL say it again WHEN it changes: that it draws the label itself WHILE its variant floats one (NMI-8), so that the Field draws no label row (FLD-25); how far the line of its number stands from its own start edge and from its end edge — its inline padding at each (NMI-1), where the input line starts with whichever affix stands there (NMI-39), and, at the end, also WHILE the steppers are drawn, because a line of help is aligned with the text above it and not with a button — so that the Field's supporting row starts and ends there (FLD-26); and an entry error with its words (NMI-21, FLD-28). It keeps no count, so a number field fills its Field's count text with nothing (FLD-27). It SHALL take from that Field its name, its description and its required, invalid and disabled states (NMI-10, NMI-12, NMI-32), whether the label is hidden (NMI-8) and whether an asterisk follows it (NMI-7), so that a Field and a number input placed by hand are drawn, named, described and marked exactly as a number field is. |
NMI-46 | THE number input SHALL draw no label row above itself, no requirement tag, no help and no error text: those are the rows of the Field that frames it (FLD-2 to FLD-7). WHILE no Field frames it THE number input SHALL be complete as a bare control — its box, the label that floats in it where its variant floats one, the number, its unit and its steppers, its states and its events — and exactly as tall as its container, for a number whose visible label is elsewhere: the head of a table's column, a toolbar, the title of a row with a slider beside the input. |
NMI-47 | THE number input SHALL draw its box from the one set of tokens every input box is drawn from, the group comp.input-box (comp.input-box.container.shape, comp.input-box.container.height.medium, and so on): its container, its corners, its edges and their widths, the label that floats in it and the asterisk after it, the figure and the placeholder, the prefix and the suffix, the caret and the highlight of selected text, the paddings, the gaps and the least height of its size (a stacked box's from comp.input-box.stacked.container.height.medium and comp.input-box.stacked.container.padding-block.medium for size medium, as tall as a Button of the same size, and a filled or an outlined box's from comp.input-box.container.height.medium and comp.input-box.container.padding-block.medium, and so on), and the colors of each of these in its look, at rest, hovered, focused and disabled, plain and in error. It SHALL have no token of its own for any of them: the tokens of its own group say only where its steppers stand and how a held stepper repeats (NMI-25). WHEN a design system or a product sets a token of the box THE number input SHALL follow it, as the text input, the select, the combobox and the color input do, which read the same tokens; no token is held equal to another for this. WHERE one number input is to differ from the other boxes of a product, the token is set for that instance — on its element or on a subtree that holds it, in each platform's way of setting a token for a subtree — and THE number input SHALL draw itself from the value it finds there. |
NMI-48 | 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 input 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 input is invalid — except those the number input owns (aria-disabled), which it SHALL move and not expose. 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 input SHALL take it off that element. WHEN the product sets an aria- attribute the number input owns THE number input SHALL report it in debug builds. |
Correspondencia de nombres por plataforma
Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.
| Especificación | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| Componente | tanrei-number-input | TanreiNumberInput | TanreiNumberInput | TanreiNumberInput | NumberInput |
variant · Propiedad | variant | variant | variant | variant | variant |
size · Propiedad | size | size | size | size | size |
value · Propiedad | value | value | value | value | value |
label · Propiedad | label | label | label | labelText | label |
labelHidden · Propiedad | labelHidden | labelsHidden | labelHidden | labelHidden | labelHidden |
placeholder · Propiedad | placeholder | prompt | placeholder | hintText | placeholder |
error · Propiedad | error | error | isError | isError | error |
disabled · Propiedad | disabled | disabled | enabled | enabled | disabled |
readOnly · Propiedad | readOnly | readOnly | readOnly | readOnly | readOnly |
min · Propiedad | min | in | min | min | min |
max · Propiedad | max | in | max | max | max |
step · Propiedad | step | step | step | step | step |
steppers · Propiedad | noSteppers | steppers | steppers | steppers | steppers |
incrementLabel · Propiedad | incrementLabel | incrementLabel | incrementContentDescription | incrementSemanticLabel | incrementAccessibilityLabel |
decrementLabel · Propiedad | decrementLabel | decrementLabel | decrementContentDescription | decrementSemanticLabel | decrementAccessibilityLabel |
prefixText · Propiedad | prefixText | prefix | prefix | prefixText | prefix |
suffixText · Propiedad | suffixText | suffix | suffix | suffixText | suffix |
valueText · Propiedad | valueText | valueText | stateDescription | semanticValue | valueText |
align · Propiedad | align | align | align | align | align |
minFractionDigits · Propiedad | minFractionDigits | minFractionDigits | minFractionDigits | minFractionDigits | minFractionDigits |
maxFractionDigits · Propiedad | maxFractionDigits | maxFractionDigits | maxFractionDigits | maxFractionDigits | maxFractionDigits |
locale · Propiedad | locale | locale | locale | locale | locale |
invalidText · Propiedad | invalidText | invalidText | invalidText | invalidText | invalidText |
input · Evento | input | onInput | onInput | onInput | onInput |
change · Evento | change | value | onValueChange | onChanged | onValueChange |
action · Evento | action | onSubmit | keyboardActions | onSubmitted | onSubmitEditing |
entryError · Evento | entryerror | onEntryError | onEntryError | onEntryError | onEntryError |
| Notas | The number field's control without the frame: the class TanreiNumberInput, React NumberInput. A form-associated custom element (static formAssociated = true) with a shadow root that does not delegate focus: it takes name, submits the value as a plain decimal string ("12.5", never the locale's "12,5"), restores it on navigation, resets to the value it was first given, follows <fieldset disabled> and reports valueMissing while its Field says it is required and badInput while an entry error lasts (NMI-35). The host is block-level (display: flex): it is as wide as its place, which inside a Field is the Field's whole width (FLD-1), and has no width of its own: the inner input's default width is never the host's (NMI-36). Everything the number field's note says of its inner element holds here, --tanrei-comp-input-box-* for the box (NMI-47) and --tanrei-comp-number-input-* for the steppers' place and the timing of a hold: <input type="text" inputmode="decimal"> (numeric while maxFractionDigits is 0; text on platforms whose decimal keypad has no minus sign while negative numbers are allowed) with role="spinbutton", aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext, aria-invalid, aria-required and aria-readonly set on that element — not through ElementInternals, which axe cannot see — and autocomplete="off", autocorrect="off", spellcheck="false"; not <input type="number"> (the accessibility notes); Intl.NumberFormat with useGrouping: false, and without locale the nearest lang attribute, then navigator.language; font-variant-numeric: tabular-nums; no wheel listener. The steppers are two <tanrei-button variant="text"> kept out of the focus order, named by label; they listen to pointerdown, not click, so that a hold repeats and focus does not move. Parts: container, outline, active-indicator, label (the floating label), requirement-label (its asterisk), input, prefix, suffix, stepper. The connection with a Field is tanrei-field-connect (src/primitives/field.ts), in both directions (NMI-45): the input says drawsLabel while its look floats a label, inset: { start, end } — its inline padding at both edges, with and without steppers — and refusal: { text } while an entry error lasts. It keeps no count. It takes the name, the description, invalid, required and disabled, and labelHidden and requiredMark (asterisk or none), and writes the name, the description and the states on the inner element, its own label winning. The value property is number | null; the value attribute is the decimal string. Attributes are kebab-case (label-hidden, increment-label, decrement-label, prefix-text, suffix-text, value-text, min-fraction-digits, max-fraction-digits, invalid-text) except readonly, min, max and step, which keep HTML's names; a boolean attribute cannot default to true, so the web names the inverse: no-steppers (the noSteppers property). input is a composed, bubbling CustomEvent whose detail.value is the number the text reads as, or null; the native input's own input event is stopped at the shadow root. change and action are composed, bubbling events (the host's value is set before change fires; action is cancelable) and entryerror a CustomEvent whose detail holds reason and text, the input's invalidText. Before the element is defined it has no size and shows nothing. Under forced-colors: active the container has a ButtonText border and the texts are CanvasText. Words: increment-label and decrement-label left empty read the product's words, set once with setWords() from @tanrei/web; the element draws again when they change. The input line (.body) takes the direction of the number's run (NMI-39) as its own dir — computed from prefixText and suffixText by their first strong character (a letter of a right-to-left script, U+200F or U+061C: right-to-left; any other letter or U+200E, or no strong character: left-to-right) — so the three stand in written order along it and their gaps stay logical; the container, the steppers and the floating label keep the host's direction. The native input keeps dir="ltr" and its text-align is physical, from align, the layout's direction and the run's (NMI-29). | Not built on this platform yet: the number field's control as a view of its own, with the names the number field's spec gives these props. What that spec's note says of the text element, the keyboard, the formatter, the adjustable semantics and the steppers is this view's. The Field around it gives the name, the description and the states through the platform's own channel, and the input says what it draws back up (NMI-45). The prefix, the number and the suffix are one run whose direction is that of the affixes' first strong character, and left-to-right where they have none (NMI-39), so the row that holds the three takes that direction and not the layout's; align end is the end of that run (NMI-29); the steppers and the label follow the layout. | Not built on this platform yet: the number field's control as a view of its own, with the names the number field's spec gives these props. What that spec's note says of the text element, the keyboard, the formatter, the adjustable semantics and the steppers is this view's. The Field around it gives the name, the description and the states through the platform's own channel, and the input says what it draws back up (NMI-45). The prefix, the number and the suffix are one run whose direction is that of the affixes' first strong character, and left-to-right where they have none (NMI-39), so the row that holds the three takes that direction and not the layout's; align end is the end of that run (NMI-29); the steppers and the label follow the layout. | Not built on this platform yet: the number field's control as a view of its own, with the names the number field's spec gives these props. What that spec's note says of the text element, the keyboard, the formatter, the adjustable semantics and the steppers is this view's. The Field around it gives the name, the description and the states through the platform's own channel, and the input says what it draws back up (NMI-45). The prefix, the number and the suffix are one run whose direction is that of the affixes' first strong character, and left-to-right where they have none (NMI-39), so the row that holds the three takes that direction and not the layout's; align end is the end of that run (NMI-29); the steppers and the label follow the layout. | Not built on this platform yet: the number field's control as a view of its own, with the names the number field's spec gives these props. What that spec's note says of the text element, the keyboard, the formatter, the adjustable semantics and the steppers is this view's. The Field around it gives the name, the description and the states through the platform's own channel, and the input says what it draws back up (NMI-45). The prefix, the number and the suffix are one run whose direction is that of the affixes' first strong character, and left-to-right where they have none (NMI-39), so the row that holds the three takes that direction and not the layout's; align end is the end of that run (NMI-29); the steppers and the label follow the layout. |
Tokens
| Token | Alias de | Valor resuelto (claro) |
|---|---|---|
--tanrei-comp-number-input-motion-repeat-delay | sys.motion.duration.long2 | 500ms |
--tanrei-comp-number-input-motion-repeat-interval | sys.motion.duration.short2 | 100ms |
--tanrei-comp-number-input-motion-repeat-interval-fast | sys.motion.duration.short1 | 50ms |
--tanrei-comp-number-input-stepper-gap | sys.space.space0 | 0px |
--tanrei-comp-number-input-stepper-inset | sys.space.space50 | 4px |
--tanrei-comp-input-box-active-indicator-width | sys.border.hairline | 1px |
--tanrei-comp-input-box-affix-gap | sys.space.space25 | 2px |
--tanrei-comp-input-box-container-gap-large | sys.space.space200 | 16px |
--tanrei-comp-input-box-container-gap-medium | sys.space.space200 | 16px |
--tanrei-comp-input-box-container-gap-small | sys.space.space100 | 8px |
--tanrei-comp-input-box-container-height-large | — | 56px |
--tanrei-comp-input-box-container-height-medium | — | 48px |
--tanrei-comp-input-box-container-height-small | — | 40px |
--tanrei-comp-input-box-container-padding-block-with-label-large | — | 4px |
--tanrei-comp-input-box-container-padding-block-with-label-medium | — | 4px |
--tanrei-comp-input-box-container-padding-block-with-label-small | — | 2px |
--tanrei-comp-input-box-container-padding-block-large | — | 14px |
--tanrei-comp-input-box-container-padding-block-medium | — | 10px |
--tanrei-comp-input-box-container-padding-block-small | — | 8px |
--tanrei-comp-input-box-container-padding-inline-with-icon-large | sys.space.space150 | 12px |
--tanrei-comp-input-box-container-padding-inline-with-icon-medium | sys.space.space150 | 12px |
--tanrei-comp-input-box-container-padding-inline-with-icon-small | sys.space.space100 | 8px |
--tanrei-comp-input-box-container-padding-inline-large | sys.space.space200 | 16px |
--tanrei-comp-input-box-container-padding-inline-medium | sys.space.space200 | 16px |
--tanrei-comp-input-box-container-padding-inline-small | sys.space.space150 | 12px |
--tanrei-comp-input-box-container-shape | sys.shape.corner.small | 6px |
--tanrei-comp-input-box-container-shape-bottom | sys.shape.corner.none | 0px |
--tanrei-comp-input-box-disabled-active-indicator-width | — | 1px |
--tanrei-comp-input-box-disabled-opacity | — | 1 |
--tanrei-comp-input-box-disabled-outline-width | — | 1px |
--tanrei-comp-input-box-filled-active-indicator-color | sys.color.outline | |
--tanrei-comp-input-box-filled-affix-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-filled-caret-color | sys.color.primary | |
--tanrei-comp-input-box-filled-container-color | sys.color.surface-container-highest | |
--tanrei-comp-input-box-filled-disabled-active-indicator-color | — | |
--tanrei-comp-input-box-filled-disabled-affix-color | — | |
--tanrei-comp-input-box-filled-disabled-caret-color | — | |
--tanrei-comp-input-box-filled-disabled-container-color | — | |
--tanrei-comp-input-box-filled-disabled-error-active-indicator-color | — | |
--tanrei-comp-input-box-filled-disabled-error-affix-color | — | |
--tanrei-comp-input-box-filled-disabled-error-caret-color | — | |
--tanrei-comp-input-box-filled-disabled-error-container-color | — | |
--tanrei-comp-input-box-filled-disabled-error-input-color | — | |
--tanrei-comp-input-box-filled-disabled-error-label-color | — | |
--tanrei-comp-input-box-filled-disabled-error-leading-icon-color | — | |
--tanrei-comp-input-box-filled-disabled-error-outline-color | — | |
--tanrei-comp-input-box-filled-disabled-error-placeholder-color | — | |
--tanrei-comp-input-box-filled-disabled-error-required-asterisk-color | — | |
--tanrei-comp-input-box-filled-disabled-error-state-layer-color | — | |
--tanrei-comp-input-box-filled-disabled-error-trailing-icon-color | — | |
--tanrei-comp-input-box-filled-disabled-input-color | — | |
--tanrei-comp-input-box-filled-disabled-label-color | — | |
--tanrei-comp-input-box-filled-disabled-leading-icon-color | — | |
--tanrei-comp-input-box-filled-disabled-outline-color | — | |
--tanrei-comp-input-box-filled-disabled-placeholder-color | — | |
--tanrei-comp-input-box-filled-disabled-required-asterisk-color | — | |
--tanrei-comp-input-box-filled-disabled-state-layer-color | — | |
--tanrei-comp-input-box-filled-disabled-trailing-icon-color | — | |
--tanrei-comp-input-box-filled-error-active-indicator-color | sys.color.error | |
--tanrei-comp-input-box-filled-error-affix-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-filled-error-caret-color | sys.color.error | |
--tanrei-comp-input-box-filled-error-container-color | sys.color.surface-container-highest | |
--tanrei-comp-input-box-filled-error-input-color | sys.color.on-surface | |
--tanrei-comp-input-box-filled-error-label-color | sys.color.error | |
--tanrei-comp-input-box-filled-error-leading-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-filled-error-outline-color | — | |
--tanrei-comp-input-box-filled-error-placeholder-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-filled-error-required-asterisk-color | sys.color.primary | |
--tanrei-comp-input-box-filled-error-state-layer-color | comp.input-box.filled.error.input.color | |
--tanrei-comp-input-box-filled-error-trailing-icon-color | sys.color.error | |
--tanrei-comp-input-box-filled-focused-active-indicator-color | — | |
--tanrei-comp-input-box-filled-focused-affix-color | — | |
--tanrei-comp-input-box-filled-focused-caret-color | — | |
--tanrei-comp-input-box-filled-focused-container-color | — | |
--tanrei-comp-input-box-filled-focused-error-active-indicator-color | — | |
--tanrei-comp-input-box-filled-focused-error-affix-color | — | |
--tanrei-comp-input-box-filled-focused-error-caret-color | — | |
--tanrei-comp-input-box-filled-focused-error-container-color | — | |
--tanrei-comp-input-box-filled-focused-error-input-color | — | |
--tanrei-comp-input-box-filled-focused-error-label-color | — | |
--tanrei-comp-input-box-filled-focused-error-leading-icon-color | — | |
--tanrei-comp-input-box-filled-focused-error-outline-color | — | |
--tanrei-comp-input-box-filled-focused-error-placeholder-color | — | |
--tanrei-comp-input-box-filled-focused-error-required-asterisk-color | — | |
--tanrei-comp-input-box-filled-focused-error-state-layer-color | — | |
--tanrei-comp-input-box-filled-focused-error-trailing-icon-color | — | |
--tanrei-comp-input-box-filled-focused-input-color | — | |
--tanrei-comp-input-box-filled-focused-label-color | — | |
--tanrei-comp-input-box-filled-focused-leading-icon-color | — | |
--tanrei-comp-input-box-filled-focused-outline-color | — | |
--tanrei-comp-input-box-filled-focused-placeholder-color | — | |
--tanrei-comp-input-box-filled-focused-required-asterisk-color | — | |
--tanrei-comp-input-box-filled-focused-state-layer-color | — | |
--tanrei-comp-input-box-filled-focused-trailing-icon-color | — | |
--tanrei-comp-input-box-filled-hovered-active-indicator-color | — | |
--tanrei-comp-input-box-filled-hovered-affix-color | — | |
--tanrei-comp-input-box-filled-hovered-caret-color | — | |
--tanrei-comp-input-box-filled-hovered-container-color | — | |
--tanrei-comp-input-box-filled-hovered-error-active-indicator-color | — | |
--tanrei-comp-input-box-filled-hovered-error-affix-color | — | |
--tanrei-comp-input-box-filled-hovered-error-caret-color | — | |
--tanrei-comp-input-box-filled-hovered-error-container-color | — | |
--tanrei-comp-input-box-filled-hovered-error-input-color | — | |
--tanrei-comp-input-box-filled-hovered-error-label-color | — | |
--tanrei-comp-input-box-filled-hovered-error-leading-icon-color | — | |
--tanrei-comp-input-box-filled-hovered-error-outline-color | — | |
--tanrei-comp-input-box-filled-hovered-error-placeholder-color | — | |
--tanrei-comp-input-box-filled-hovered-error-required-asterisk-color | — | |
--tanrei-comp-input-box-filled-hovered-error-state-layer-color | — | |
--tanrei-comp-input-box-filled-hovered-error-trailing-icon-color | — | |
--tanrei-comp-input-box-filled-hovered-input-color | — | |
--tanrei-comp-input-box-filled-hovered-label-color | — | |
--tanrei-comp-input-box-filled-hovered-leading-icon-color | — | |
--tanrei-comp-input-box-filled-hovered-outline-color | — | |
--tanrei-comp-input-box-filled-hovered-placeholder-color | — | |
--tanrei-comp-input-box-filled-hovered-required-asterisk-color | — | |
--tanrei-comp-input-box-filled-hovered-state-layer-color | — | |
--tanrei-comp-input-box-filled-hovered-trailing-icon-color | — | |
--tanrei-comp-input-box-filled-input-color | sys.color.on-surface | |
--tanrei-comp-input-box-filled-label-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-filled-leading-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-filled-outline-color | — | |
--tanrei-comp-input-box-filled-placeholder-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-filled-required-asterisk-color | sys.color.primary | |
--tanrei-comp-input-box-filled-state-layer-color | comp.input-box.filled.input.color | |
--tanrei-comp-input-box-filled-trailing-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-focused-active-indicator-width | — | 2px |
--tanrei-comp-input-box-focused-opacity | — | 1 |
--tanrei-comp-input-box-focused-outline-width | — | 2px |
--tanrei-comp-input-box-hovered-active-indicator-width | — | 1px |
--tanrei-comp-input-box-hovered-opacity | — | 1 |
--tanrei-comp-input-box-hovered-outline-width | — | 1px |
--tanrei-comp-input-box-icon-size-large | sys.icon.medium | 24px |
--tanrei-comp-input-box-icon-size-medium | sys.icon.medium | 24px |
--tanrei-comp-input-box-icon-size-small | sys.icon.small | 20px |
--tanrei-comp-input-box-motion-label-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-input-box-motion-label-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-input-box-motion-state-duration-large | sys.motion.role.state.default | 250ms |
--tanrei-comp-input-box-motion-state-duration-medium | sys.motion.role.state.default | 250ms |
--tanrei-comp-input-box-motion-state-duration-small | sys.motion.role.state.compact | 200ms |
--tanrei-comp-input-box-motion-state-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-input-box-outline-notch-padding | sys.space.space50 | 4px |
--tanrei-comp-input-box-outline-width | sys.border.hairline | 1px |
--tanrei-comp-input-box-outlined-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-affix-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-outlined-caret-color | sys.color.primary | |
--tanrei-comp-input-box-outlined-container-color | — | |
--tanrei-comp-input-box-outlined-disabled-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-disabled-affix-color | — | |
--tanrei-comp-input-box-outlined-disabled-caret-color | — | |
--tanrei-comp-input-box-outlined-disabled-container-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-affix-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-caret-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-container-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-input-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-label-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-leading-icon-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-outline-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-placeholder-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-required-asterisk-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-state-layer-color | — | |
--tanrei-comp-input-box-outlined-disabled-error-trailing-icon-color | — | |
--tanrei-comp-input-box-outlined-disabled-input-color | — | |
--tanrei-comp-input-box-outlined-disabled-label-color | — | |
--tanrei-comp-input-box-outlined-disabled-leading-icon-color | — | |
--tanrei-comp-input-box-outlined-disabled-outline-color | — | |
--tanrei-comp-input-box-outlined-disabled-placeholder-color | — | |
--tanrei-comp-input-box-outlined-disabled-required-asterisk-color | — | |
--tanrei-comp-input-box-outlined-disabled-state-layer-color | — | |
--tanrei-comp-input-box-outlined-disabled-trailing-icon-color | — | |
--tanrei-comp-input-box-outlined-error-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-error-affix-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-outlined-error-caret-color | sys.color.error | |
--tanrei-comp-input-box-outlined-error-container-color | — | |
--tanrei-comp-input-box-outlined-error-input-color | sys.color.on-surface | |
--tanrei-comp-input-box-outlined-error-label-color | sys.color.error | |
--tanrei-comp-input-box-outlined-error-leading-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-outlined-error-outline-color | sys.color.error | |
--tanrei-comp-input-box-outlined-error-placeholder-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-outlined-error-required-asterisk-color | sys.color.primary | |
--tanrei-comp-input-box-outlined-error-state-layer-color | comp.input-box.outlined.error.input.color | |
--tanrei-comp-input-box-outlined-error-trailing-icon-color | sys.color.error | |
--tanrei-comp-input-box-outlined-focused-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-focused-affix-color | — | |
--tanrei-comp-input-box-outlined-focused-caret-color | — | |
--tanrei-comp-input-box-outlined-focused-container-color | — | |
--tanrei-comp-input-box-outlined-focused-error-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-focused-error-affix-color | — | |
--tanrei-comp-input-box-outlined-focused-error-caret-color | — | |
--tanrei-comp-input-box-outlined-focused-error-container-color | — | |
--tanrei-comp-input-box-outlined-focused-error-input-color | — | |
--tanrei-comp-input-box-outlined-focused-error-label-color | — | |
--tanrei-comp-input-box-outlined-focused-error-leading-icon-color | — | |
--tanrei-comp-input-box-outlined-focused-error-outline-color | — | |
--tanrei-comp-input-box-outlined-focused-error-placeholder-color | — | |
--tanrei-comp-input-box-outlined-focused-error-required-asterisk-color | — | |
--tanrei-comp-input-box-outlined-focused-error-state-layer-color | — | |
--tanrei-comp-input-box-outlined-focused-error-trailing-icon-color | — | |
--tanrei-comp-input-box-outlined-focused-input-color | — | |
--tanrei-comp-input-box-outlined-focused-label-color | — | |
--tanrei-comp-input-box-outlined-focused-leading-icon-color | — | |
--tanrei-comp-input-box-outlined-focused-outline-color | — | |
--tanrei-comp-input-box-outlined-focused-placeholder-color | — | |
--tanrei-comp-input-box-outlined-focused-required-asterisk-color | — | |
--tanrei-comp-input-box-outlined-focused-state-layer-color | — | |
--tanrei-comp-input-box-outlined-focused-trailing-icon-color | — | |
--tanrei-comp-input-box-outlined-hovered-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-hovered-affix-color | — | |
--tanrei-comp-input-box-outlined-hovered-caret-color | — | |
--tanrei-comp-input-box-outlined-hovered-container-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-active-indicator-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-affix-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-caret-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-container-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-input-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-label-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-leading-icon-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-outline-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-placeholder-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-required-asterisk-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-state-layer-color | — | |
--tanrei-comp-input-box-outlined-hovered-error-trailing-icon-color | — | |
--tanrei-comp-input-box-outlined-hovered-input-color | — | |
--tanrei-comp-input-box-outlined-hovered-label-color | — | |
--tanrei-comp-input-box-outlined-hovered-leading-icon-color | — | |
--tanrei-comp-input-box-outlined-hovered-outline-color | — | |
--tanrei-comp-input-box-outlined-hovered-placeholder-color | — | |
--tanrei-comp-input-box-outlined-hovered-required-asterisk-color | — | |
--tanrei-comp-input-box-outlined-hovered-state-layer-color | — | |
--tanrei-comp-input-box-outlined-hovered-trailing-icon-color | — | |
--tanrei-comp-input-box-outlined-input-color | sys.color.on-surface | |
--tanrei-comp-input-box-outlined-label-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-outlined-leading-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-outlined-outline-color | sys.color.outline | |
--tanrei-comp-input-box-outlined-placeholder-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-outlined-required-asterisk-color | sys.color.primary | |
--tanrei-comp-input-box-outlined-state-layer-color | comp.input-box.outlined.input.color | |
--tanrei-comp-input-box-outlined-trailing-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-requirement-asterisk-gap | sys.space.space25 | 2px |
--tanrei-comp-input-box-selection-color | sys.color.primary | |
--tanrei-comp-input-box-selection-content-color | sys.color.on-primary | |
--tanrei-comp-input-box-stacked-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-affix-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-stacked-caret-color | sys.color.primary | |
--tanrei-comp-input-box-stacked-container-color | sys.color.surface-container-highest | |
--tanrei-comp-input-box-stacked-container-height-large | comp.button.container.height.large | 56px |
--tanrei-comp-input-box-stacked-container-height-medium | comp.button.container.height.medium | 40px |
--tanrei-comp-input-box-stacked-container-height-small | comp.button.container.height.small | 32px |
--tanrei-comp-input-box-stacked-container-padding-block-large | — | 14px |
--tanrei-comp-input-box-stacked-container-padding-block-medium | — | 6px |
--tanrei-comp-input-box-stacked-container-padding-block-small | — | 4px |
--tanrei-comp-input-box-stacked-disabled-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-disabled-affix-color | — | |
--tanrei-comp-input-box-stacked-disabled-caret-color | — | |
--tanrei-comp-input-box-stacked-disabled-container-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-affix-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-caret-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-container-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-input-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-label-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-leading-icon-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-outline-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-placeholder-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-required-asterisk-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-state-layer-color | — | |
--tanrei-comp-input-box-stacked-disabled-error-trailing-icon-color | — | |
--tanrei-comp-input-box-stacked-disabled-input-color | — | |
--tanrei-comp-input-box-stacked-disabled-label-color | — | |
--tanrei-comp-input-box-stacked-disabled-leading-icon-color | — | |
--tanrei-comp-input-box-stacked-disabled-outline-color | — | |
--tanrei-comp-input-box-stacked-disabled-placeholder-color | — | |
--tanrei-comp-input-box-stacked-disabled-required-asterisk-color | — | |
--tanrei-comp-input-box-stacked-disabled-state-layer-color | — | |
--tanrei-comp-input-box-stacked-disabled-trailing-icon-color | — | |
--tanrei-comp-input-box-stacked-error-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-error-affix-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-stacked-error-caret-color | sys.color.error | |
--tanrei-comp-input-box-stacked-error-container-color | sys.color.surface-container-highest | |
--tanrei-comp-input-box-stacked-error-input-color | sys.color.on-surface | |
--tanrei-comp-input-box-stacked-error-label-color | sys.color.on-surface | |
--tanrei-comp-input-box-stacked-error-leading-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-stacked-error-outline-color | sys.color.error | |
--tanrei-comp-input-box-stacked-error-placeholder-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-stacked-error-required-asterisk-color | sys.color.primary | |
--tanrei-comp-input-box-stacked-error-state-layer-color | comp.input-box.stacked.error.input.color | |
--tanrei-comp-input-box-stacked-error-trailing-icon-color | sys.color.error | |
--tanrei-comp-input-box-stacked-focused-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-focused-affix-color | — | |
--tanrei-comp-input-box-stacked-focused-caret-color | — | |
--tanrei-comp-input-box-stacked-focused-container-color | — | |
--tanrei-comp-input-box-stacked-focused-error-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-focused-error-affix-color | — | |
--tanrei-comp-input-box-stacked-focused-error-caret-color | — | |
--tanrei-comp-input-box-stacked-focused-error-container-color | — | |
--tanrei-comp-input-box-stacked-focused-error-input-color | — | |
--tanrei-comp-input-box-stacked-focused-error-label-color | — | |
--tanrei-comp-input-box-stacked-focused-error-leading-icon-color | — | |
--tanrei-comp-input-box-stacked-focused-error-outline-color | — | |
--tanrei-comp-input-box-stacked-focused-error-placeholder-color | — | |
--tanrei-comp-input-box-stacked-focused-error-required-asterisk-color | — | |
--tanrei-comp-input-box-stacked-focused-error-state-layer-color | — | |
--tanrei-comp-input-box-stacked-focused-error-trailing-icon-color | — | |
--tanrei-comp-input-box-stacked-focused-input-color | — | |
--tanrei-comp-input-box-stacked-focused-label-color | — | |
--tanrei-comp-input-box-stacked-focused-leading-icon-color | — | |
--tanrei-comp-input-box-stacked-focused-outline-color | — | |
--tanrei-comp-input-box-stacked-focused-placeholder-color | — | |
--tanrei-comp-input-box-stacked-focused-required-asterisk-color | — | |
--tanrei-comp-input-box-stacked-focused-state-layer-color | — | |
--tanrei-comp-input-box-stacked-focused-trailing-icon-color | — | |
--tanrei-comp-input-box-stacked-hovered-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-hovered-affix-color | — | |
--tanrei-comp-input-box-stacked-hovered-caret-color | — | |
--tanrei-comp-input-box-stacked-hovered-container-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-active-indicator-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-affix-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-caret-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-container-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-input-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-label-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-leading-icon-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-outline-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-placeholder-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-required-asterisk-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-state-layer-color | — | |
--tanrei-comp-input-box-stacked-hovered-error-trailing-icon-color | — | |
--tanrei-comp-input-box-stacked-hovered-input-color | — | |
--tanrei-comp-input-box-stacked-hovered-label-color | — | |
--tanrei-comp-input-box-stacked-hovered-leading-icon-color | — | |
--tanrei-comp-input-box-stacked-hovered-outline-color | — | |
--tanrei-comp-input-box-stacked-hovered-placeholder-color | — | |
--tanrei-comp-input-box-stacked-hovered-required-asterisk-color | — | |
--tanrei-comp-input-box-stacked-hovered-state-layer-color | — | |
--tanrei-comp-input-box-stacked-hovered-trailing-icon-color | — | |
--tanrei-comp-input-box-stacked-input-color | sys.color.on-surface | |
--tanrei-comp-input-box-stacked-label-color | sys.color.on-surface | |
--tanrei-comp-input-box-stacked-leading-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-stacked-outline-color | — | |
--tanrei-comp-input-box-stacked-placeholder-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-stacked-required-asterisk-color | sys.color.primary | |
--tanrei-comp-input-box-stacked-state-layer-color | comp.input-box.stacked.input.color | |
--tanrei-comp-input-box-stacked-trailing-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-input-box-input-typescale-large | sys.typescale.body-large | 400 16px/1.625 |
--tanrei-comp-input-box-input-typescale-medium | sys.typescale.body-large | 400 16px/1.625 |
--tanrei-comp-input-box-input-typescale-small | sys.typescale.body | 400 14px/1.5714 |
--tanrei-comp-input-box-label-floated-typescale-large | sys.typescale.label-small | 500 12px/1.3333 |
--tanrei-comp-input-box-label-floated-typescale-medium | sys.typescale.label-small | 500 12px/1.3333 |
--tanrei-comp-input-box-label-floated-typescale-small | sys.typescale.label-small | 500 12px/1.3333 |
--tanrei-comp-input-box-label-typescale-large | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-input-box-label-typescale-medium | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-input-box-label-typescale-small | sys.typescale.label | 500 14px/1.4286 |
Fixtures
Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.
variant: stacked (31)
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-small
variant: stacked size: small value: 12 label: Quantity incrementLabel: Increase decrementLabel: Decrease stacked-error
variant: stacked value: 0 label: Quantity 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-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-unit-rtl
variant: stacked value: -12.5 label: רוחב incrementLabel: הגדלה decrementLabel: הקטנה suffixText: px direction: rtl stacked-error-rtl
variant: stacked value: 0 label: כמות error: true incrementLabel: הגדלה decrementLabel: הקטנה direction: rtl beside-slider
variant: stacked value: 1.5 label: Scale 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 stacked-affixes-own-script-rtl
variant: stacked value: 20 label: الوزن الأقصى incrementLabel: زيادة decrementLabel: إنقاص prefixText: حتى suffixText: كغم direction: rtl stacked-align-end-own-script-rtl
variant: stacked value: 12 label: משקל incrementLabel: הגדלה decrementLabel: הקטנה suffixText: ק״ג align: end direction: rtl stacked-locale-ar-percent
variant: stacked value: 40 label: الخصم min: 0 max: 100 incrementLabel: زيادة decrementLabel: إنقاص suffixText: ٪ locale: ar-EG direction: rtl stacked-suffix-direction-mark-rtl
variant: stacked value: 120 label: المبلغ incrementLabel: زيادة decrementLabel: إنقاص suffixText: USD minFractionDigits: 2 maxFractionDigits: 2 direction: rtl stacked-unit-right-to-left-script
variant: stacked value: 12 label: Weight incrementLabel: Increase decrementLabel: Decrease suffixText: ק״ג 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 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 (5)
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 error: true incrementLabel: Increase decrementLabel: Decrease outlined-disabled
variant: outlined value: 12 label: Quantity disabled: true incrementLabel: Increase decrementLabel: Decrease Generado a partir de specs/number-input.spec.json, tokens/comp/number-input.tokens.json, tokens/comp/input-box.tokens.json, design/tokens/
- El elemento está asociado a formularios. Con un
nameenvía su valor como un número decimal sencillo (12.5), muestre lo que muestre la configuración regional; se restablece al valor de su atributovalue, se restaura al navegar, sigue a un<fieldset>deshabilitado, y notifica que falta un valor mientras su campo dice que es obligatorio y que la entrada es incorrecta mientras su texto no es un número. - El número se edita en un
<input type="text">nativo dentro del shadow root, que lleva el rol y los valores del botón de número. No es el campo de entrada numérico del navegador. - El elemento es un bloque.
focus()va al elemento nativo, y una pulsación en cualquier punto de la caja fuera de un botón de paso le da el foco. stepperses el atributo inversono-steppers, yreadOnlyesreadonly.inputes un CustomEvent condetail.value.changeyactionson eventos sencillos: leevaluedel elemento. A menos que se canceleaction, se pide entonces al formulario que se envíe.entryerrores un CustomEvent cuyodetailcontiene{ reason, text }:textes elinvalidTextde la entrada, vacío donde no se dio ninguno. Los tipos sonTanreiNumberInputInputDetailyTanreiNumberInputEntryErrorDetail.- Partes:
container,outline,active-indicator,label,requirement-label,input,prefix,suffix,stepper. No tiene ningún slot. - Sin
locale, la entrada lee el atributolangmás cercano y, después, el idioma del navegador. - Además del separador de la configuración regional, un punto se lee como separador decimal siempre que la configuración regional no agrupe con puntos.
- Una tecla de página da diez pasos sobre la cuadrícula del propio paso, como la de un deslizador: con un paso de 2, Re Pág desde 42 da 62, y luego 82.
- En iOS y iPadOS, la entrada pide el teclado completo mientras se pueda escribir un número negativo, porque el teclado decimal de esas plataformas no tiene signo menos.
increment-labelydecrement-label, si se dejan vacíos, se leen de los textos del producto (setWords()).- Antes de que el elemento esté definido no tiene tamaño. Reserva la altura de la caja.
| Necesitas | Usa |
|---|---|
| Una etiqueta, la caja, ayuda y un error | Un campo numérico |
| La caja sin nada más, bajo una etiqueta que está en otro lugar: junto a un control deslizante, la celda de una tabla, una barra de herramientas | Una entrada numérica, con su propio label como nombre |
| Algo tuyo dentro del marco, junto a la caja o debajo de ella | Un campo con una entrada numérica y tu propio elemento dentro |
| Dígitos que no son una cantidad: un código postal, un número de tarjeta | Un campo de texto |
| Un valor que se elige a ojo dentro de un intervalo | Un control deslizante |
- Da a una entrada sin nada más un
labelcon las palabras de la etiqueta visible, o con palabras que digan lo que la etiqueta visible y su lugar dicen juntos: «Cantidad, escritorio de roble». - Da a una entrada sin nada más su ancho con el lugar que ocupa: una columna de una cuadrícula, una celda, un elemento de una barra de herramientas que tiene un ancho.
- Pon la unidad en
suffixText, y davalueTextdonde el sufijo se leería mal. - Da
incrementLabelydecrementLabel, en la entrada o una sola vez para todo el producto consetWords(). - Usa el campo numérico siempre que lo que necesites sea una etiqueta sobre la caja, ayuda y un error.
- No uses una entrada sin nada más en un formulario para ahorrarte el sitio de una etiqueta. Una entrada sin etiqueta visible en ninguna parte es una adivinanza para todo el que la ve.
- No uses el marcador de posición como etiqueta. Desaparece en cuanto alguien escribe, y nunca es el nombre.
- No definas
label,errornidisableden una entrada que está dentro de un campo. Indícalos en el campo, para que la etiqueta y la ayuda los sigan. - No pongas un campo numérico dentro de un campo. Ya es un campo; el control que un campo enmarca es la entrada numérica.
- No guardes en
input. Se emite con cada tecla;changelleva el valor confirmado.
- Rol
spinbutton- Etiquetado
- The accessible name is the label of the Field that frames the input, or its own label where no Field does; a filled or outlined input draws that name floating, and labelHidden only stops the drawing. The placeholder is never the name. The description is what the Field gives: its supporting text with, in error, the error text after it and its optional text; an unframed input in an entry error is described by invalidText. The input is exposed as invalid while error is true, its Field is in error or an entry error lasts; as required while its Field says so, whichever mark is drawn; and as read-only while readOnly is true. It is a spin button whose value is the committed number, whose limits are min and max, and whose value text is valueText or the number with its prefix and suffix. The steppers are buttons named by decrementLabel and incrementLabel; they are not in the focus order.
- Objetivo mínimo
- El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px
Teclado
| Teclas | Acción |
|---|---|
| Tab / Shift+Tab | Moves focus to the input, which is the field's one stop, and on from it. The steppers are not stops. |
| Typing, Backspace, Delete, Left Arrow, Right Arrow, Home, End, selection and clipboard shortcuts | Edit the text as the platform's own text element does. Nothing typed is refused, clamped or rounded until the field is committed. |
| Up Arrow / Down Arrow | Step the number up or down by step, to the next number on the step's grid, within min and max (NMI-22, NMI-23). |
| Page Up / Page Down | Step by ten times step. |
| Enter | Commits the text — clamps, rounds, or reports a text that is not a number — emits action, and submits the enclosing form on the web. |
Notas
- A number input is for a number the product reads as a number: a quantity, a size, a percentage, an amount. Digits that are not a quantity — a postal code, a card number, a telephone number, a one-time code — are text: use a text input with the matching type, which never steps, clamps or reformats them.
- Text entry happens in the platform's native text element: on the web an <input type="text"> with an inputmode in the shadow root, carrying the spinbutton role and its value attributes — not the browser's number input, whose spinner cannot be drawn from tokens, whose value is emptied by a text it cannot read, whose parsing ignores the product's locale, and which in some browsers changes its value when the wheel turns over it.
- The steppers are out of the focus order on purpose (NMI-25): the arrow keys step from the input, as in every spin button, and a form of twenty numbers stays twenty stops long. They stay in the accessibility tree, named, because a person exploring a touch screen with a screen reader has no arrow keys.
- Two steppers side by side take 88 of the field's width under the default system, each a full target. That is the honest size: a pair stacked inside a 48 field would be two 24-high targets that cannot grow over each other. Where a row cannot afford 88, set steppers to false; the keys, the assistive-technology actions and a Slider beside the field still step.
- The wheel never changes the number (NMI-24). A number that changes because the page was scrolled past it is a wrong number nobody typed.
- Limits are applied when the field commits, never while a person types (NMI-20): a text on its way to a valid number must be allowed to pass through invalid ones.
- Errors are words (WCAG 3.3.1, 1.4.1): a text that is not a number is kept, marked, and described by invalidText; nothing is silently thrown away or silently replaced by the last good number.
- The unit is read with the value (NMI-34). Where a suffix would be read badly ("×", "px"), give valueText in words.
- Web: a touch browser zooms the page into an input whose text is smaller than 16 px. Both sizes use 16 px text (comp.input-box.input.typescale.medium); a layer that sets a smaller style brings the zoom back.
- Heights are minimums: at 200% text size the input grows, a floating label wraps rather than clips, and the number keeps its line.
- The input has no label row and no message of its own: a Field frames it and draws them (FLD-2 to FLD-11, FLD-25, FLD-26, FLD-28), or the product names it with label where its visible label is elsewhere. Unframed and unnamed, it is reported (NMI-12). Beside a slider under one row title, the slider and the number input are each named in words, given the same limits and step, and each one's input is written to the other's value.
- How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
- A number and its affixes are spoken in the order they are written — prefix, number, suffix (NMI-34) — whatever side each is drawn on: the run's direction (NMI-39) changes where the unit stands, never what is said or what a typed or pasted text is read as (NMI-18).
Generado a partir de specs/number-input.spec.json, tokens/sys/measure.tokens.json
- Es un botón de número (spin button). Su nombre es su propio
label, o la etiqueta del campo que la rodea donde no tiene ninguno. El marcador de posición nunca es el nombre. - Su valor es el número confirmado, sus límites son
minymax, y el texto de su valor esvalueTexto el número con su prefijo y su sufijo. - Su descripción es lo que da su campo: la ayuda o el texto de error. Sin nada más y con un error de entrada, es
invalidText. - Se expone como no válida mientras está en error o mientras su texto no es un número, como obligatoria mientras su campo lo dice, y como de solo lectura y deshabilitada.
- Los botones de paso son botones que reciben su nombre de
decrementLabely deincrementLabel; uno al que nadie dio nombre queda oculto para la tecnología de apoyo. Están fuera del orden del foco, porque las teclas de flecha dan los pasos desde la entrada; quien explora la pantalla con el tacto los encuentra igualmente. - Una pulsación en un botón de paso no mueve el foco, así que no hace aparecer el teclado en pantalla.
- Mientras un método de entrada está componiendo, la entrada no lee nada y no gestiona ninguna tecla. La rueda del ratón nunca cambia el número.
- El foco lo muestra el propio borde de la caja, tanto desde el teclado como desde un puntero. El área de pulsación cumple el objetivo mínimo, y cada botón de paso es un objetivo completo.
- El asterisco que sigue a una etiqueta flotante queda oculto para la tecnología de apoyo: el estado de obligatorio ya lo dice.
- Con el texto al 200%, una etiqueta flotante salta de línea, y el número se queda en una sola línea y se desplaza. Con colores forzados, la caja gana un borde. En un diseño de derecha a izquierda, los botones de paso y la etiqueta se reflejan: los botones de paso quedan en el extremo izquierdo. El número y su unidad se escriben como los escribe la escritura de la propia unidad: una unidad en letras o signos latinos después del número, de izquierda a derecha, y una unidad en la escritura de la página a la izquierda del número. Lo que se lee en voz alta no cambia.
- Donde la fila no puede contener el número y los botones de paso uno al lado del otro —con el texto al 200% en una ventana estrecha, con un prefijo y un sufijo largo—, los botones de paso pasan a una fila propia debajo del número, al final de la caja. Nunca se ocultan, porque en una pantalla táctil son la única forma de dar pasos.
- Las compilaciones de depuración notifican que falta un nombre.
Carencias conocidas en la web:
- Chromium lee el número sin su unidad: obtiene el texto del valor a partir del texto que hay en el campo de entrada, y pasa por alto el que indica la entrada. Nombra la unidad en la etiqueta donde importe.
- Da nombre a toda entrada sin nada más con
label. Un texto visible a su lado no le da nombre. - Donde una entrada sin nada más pueda estar mal, di qué está mal con palabras que lleguen a la tecnología de apoyo: un mensaje tuyo vinculado a la página, o un campo alrededor de la entrada.
- Escribe
invalidTextaunque ningún campo lo muestre: se lee con la entrada. - Da el mismo nombre a un control deslizante y a la entrada numérica que tiene al lado.