Patterns / Dependent values
Values that depend on other values
Many forms work things out as the person types: a plan's total from the seats, a schedule's next runs from its rule, a run's cost and time from its inputs. Each number on the screen should be the one that follows from the inputs now, and a person using a screen reader should hear the result without hearing every step on the way.
Each changed number or word is a value moment keyed on its value: it changes in place, at once, and the motion only shows that it changed. A control that is swapped for another is a reveal. A list that is rebuilt (the next runs) is arrive for what is new and pop out for what went. Nothing moves for a value the person didn't change, such as a run that passes with time or the figures drawn with the page, and a burst of key presses moves things once, not per key.
Screen readers hear the result once, politely, after the person stops changing the input (Candor's items wait 600 ms), from a live region that was there before: useAnnouncer gives you one.
The components
- Plan pickerProEach plan's total for the seats changes in place when the person presses More or Fewer seats, with the direction of the change for a brand's drawings, and the chosen plan's total is announced once they stop (Pro).
- Schedule editorProThe next five runs are rebuilt from the rule: a run that joins arrives and one that leaves pops out, and the rule and next run are announced once the person stops (Pro).
- Run estimateProCost, time and API calls change in place when the app passes a new estimate, and the new figures are announced once it stops changing (Pro).
- useAnnouncerProOne polite live region that is already in the page, for announcing your own form's result once.
See it working
Install
Each component brings in what it depends on. The free ones install as they are; Pro and Premium ones need a licence key.
Good to know
- Work the values out where they are shown, from the inputs, every time: a value kept in state can lag behind its inputs and show a total that isn't so.
- A value the app can't work out yet says so in words ("No estimate yet"), rather than keeping the last number on the screen.