# 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.

Web page: https://candor.themethodic.com/patterns/dependent-values

## Components

- **Plan picker** (`plan-picker`, Pro; https://candor.themethodic.com/docs/plan-picker.md): Each 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 editor** (`schedule-editor`, Pro; https://candor.themethodic.com/docs/schedule-editor.md): The 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 estimate** (`run-estimate`, Pro; https://candor.themethodic.com/docs/run-estimate.md): Cost, 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).
- **useAnnouncer** (`use-announcer`, Pro; https://candor.themethodic.com/docs/use-announcer.md): One polite live region that is already in the page, for announcing your own form's result once.

## Install

```bash
npx candor-ui add plan-picker schedule-editor run-estimate
```

## Notes

- 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.