I'm making a recipe app.

When adding an ingredient, I need a field that can be used to specify the time that the ingredient must be added, OR the duration it must cook.

For example, I can add onions after 10 minutes since the start of the cook, OR I can caramelize the onions FOR 10 minutes

Currently, I can only enter the time that the ingredient must be added: addition time field

I need to add some sort of toggle so that the user can chose if this time is a duration or an addition time


An idea I've had is to display both the time field AND a duration field, separated with a toggle switch.When the toggle switch is pointed at the time field, the duration field is disabled, but it still dynamically displays the duration calculated from the addition time. What do you think?

Thank you.

2 Answers 2


Toggle switches are for on/off states, they're not really for Option A / Option B selection (though toggle buttons could be used for this).

In your example, one of the tasks is about the onions ("cook onions for 10 minutes") while the other is ideally about the task immediately before adding the onions (for example, "Wait 10 minutes, then add onions.") I'm not sure it's ideal for a recipe to be timed from the very beginning of the cooking process, since people move at different speeds and might not remember their start time by the time they get several tasks deep.

A common pattern in setting up flows like recipes is a "wait task". You could let the user deliberately create a task called "Wait 10 minutes" or "Cook for 10 minutes" in between other tasks.

  • It's a "recipe like" app. The time is actually from the beginning of a step. For example, if you're boiling vegetables for a total of 20 minutes, you might add carrots after 5 min, or want your potatoes boiled for 15 minutes.
    – Simon Tran
    Commented May 27, 2021 at 13:42
  • Thanks for the extra info. Would supporting subtasks be a viable model? For example, task "add carrots" could be a subtask of "boil vegetables" and the user could specifically start it 5 minutes into the parent task. There are some good pattern ideas in flow builders.
    – Izquierdo
    Commented May 27, 2021 at 15:32

If you don't want to mess up the design you have already made, a good option is to add reference icons, in this case time icons (available for free at fontawesome.com):

enter image description here

enter image description here

These particular icons offer sufficient visual contrast to make them easier to perceive.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.