Skip to content

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

With the candor-ui CLI

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.