Page History
...
| Do | Don’t | Article setting(s) |
|---|---|---|
Set step to match the smallest valid increment (e.g., 0.5). | Leave the default and force trial-and-error increments. | step |
Enforce domain limits with validation.min/validation.max and enable validated. | Allow any number and reject only at submit time. | validation.min, validation.max, validated |
Format large values using thousandSeparator. | Show long digit strings without separators. | thousandSeparator |
| Separate working value from reset value. | Use value expecting it to reset automatically. | value, defaultValue |
| Persist drafts in long flows. | Make users retype values after a reload. | saveInLocalStorage |
| Display computed results as read-only. | Show computed values as editable fields. | readonly, value |
| Hide fields that aren’t relevant. | Leave irrelevant inputs visible and empty. | hidden |
| Localize visible labels. | Hard-code English labels. | labelTranslations |
| Map data explicitly for submission. | Rely on implicit names or default request placement. | dataField, controlsRequestType |
| Clamp or react to edits on change. | Ignore ON_VALUE_CHANGE and let invalid states propagate. | events.ON_VALUE_CHANGE |
Accessibility
- Ensure an accessible name is present via
labelTranslations. - Convey non-editable state with
readonlyso assistive tech does not present it as interactive. - Provide deterministic automation hooks for accessibility tests using
dataTestId. - Avoid color-only meaning: rely on behavioral constraints using
validatedandvalidation.*to prevent and communicate invalid input, and onreadonlyto indicate calculated/locked values. - Choose
stepvalues that align with domain expectations to reduce repeated key presses and cursor repositioning for keyboard users.
