Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
Kit parts
Money field
An amount of money in the field’s well, with its currency printed on the floor at the left (the symbol and the code, or a native select when several are offered).
Seats open in 11 days. Want one email that morning?
Anatomy
The field’s well, with the input group’s way of printing a prefix: the currency sits on the floor, parted from the figures by the same engraved line. The figures are a native input set right in tabular numerals, so a column of amounts lines up. Grouping, the caret and the paste rules are small pure functions over strings and BigInt, with Intl supplying only the separators and the decimals. Nothing animates, so reduced motion changes nothing.
Variants
- Default
- With help text
- Filled
- Required
- Error from the server · error attribute
- Below the least
- Disabled
- Read only
- Several currencies · a native select
- Fixed currency · data-fixed
- Refund
- Yen · no decimals
- Dinar · three decimals
- Euro · German separators
States
- Default
- With help
- Filled
- Focused
- Error
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| value | attribute · property | The amount as an integer. The property is “” when the field is blank. Setting it rewrites the field. |
| currencies | attribute | Offers a native select in the legend. data-fixed keeps the current currency as plain text. |
| currency-name | attribute | Also posts the currency code under this name. Absent by default, so a single-currency form posts one field. |
| data-fixed | attribute | Keeps the currency as plain printed text even when currencies lists several, so there is no select. |
| label | attribute | The amount input’s accessible name when the field draws its own well. Default “Amount”. |
| negative | attribute | Otherwise a minus is ignored. |
| min · max | attribute | The least and most, in minor units of the chosen currency. Outside them the field is invalid and says so. |
| required · disabled · readonly · placeholder | attribute | Disabled also follows a disabled fieldset. The placeholder defaults to zero in the currency’s decimals. |
| error | attribute | Marks the field invalid with the server’s own words and shows them at once. |
| currencyDigits() · currencySymbol() · moneySeparators() | function | The decimals, the symbol and the decimal and group characters Intl gives for a currency and a locale. |
| parseAmount() · normalisePaste() · groupAsYouType() | function | Typed text to minor units as a BigInt with no floating point; a paste into the figures it means; and the grouped text with the caret put back. |
| formatMinor() · formatMoney() · moneySays() · moneyIssue() | function |
Usage notes
Leave the field and the decimals are filled in. In the refund, type a minus first. Press Book berth: the form prints what it posts, in minor units.
Accessibility
- The currency code is part of its description, so it is read after the name; with several currencies the select is its own control named “Currency”. The symbol is drawn for the eye and hidden from a screen reader.
- Grouping happens as you type, but nothing is announced on each key. When the amount is committed (the field is left, Enter is pressed or the currency changes) a polite status line says it once.
- An error appears only after the field has been left or the form has been checked, never while you are still typing. The same four reasons reach the browser’s own validity: required, not a number, below min, above max.
- The caret stays on the digit you were on while commas are inserted, and Backspace or Delete beside a separator takes the digit next to it instead of seeming to do nothing. A “.” or “,” typed from a numeric keypad is the decimal in any locale.
- Focus rings the whole well. With the script off it is a plain text field showing the amount.
Related parts
Input group
One recess that holds a field and everything that belongs to it. Words that are part of the value but are not typed, such as https:// or a currency, are printed on the floor of the well behind an engraved line; a glyph sits at the start; small keys sit at the end to clear the text, copy it, or show a password.
Stepper
A small integer with − and + keys either side, in one well.
Password field
The field’s well with a louvred shutter drawn across its characters and a peek key at the end. Press the key and the shutter slides off to the right, the characters stand open, and the key stays down; press it again and the shutter closes. The key says Show or Hide, and the caret never leaves where it was.