What is the best way to show conditional fields?

We are creating a desktop app where (business) users can enter contracts. The issue is that the contract form contains a very large number of fields, with some of them being conditional. An example would be:

  • Contract can be "Open" or "Fixed"

  • If a Contract is "Fixed", users need to additionally enter the duration (number of years). They are not using calendars they just enter numbers.

Issue is that we want to make the form as simple as possible for the users. There are many fields, so the more the app can do in the background, the better... But such conditional fields add to the complexity.

What I came up with is:

  1. Typical show/hide the additional field as presented on screens 1&2. The choice is quite obvious, but the form jumps up/down. It also works well if there are a few radio buttons (2-3). But if there are more radiobuttons - it will fall apart. enter image description here enter image description here

  2. Convert the two radio buttons into a checkbox + edit (screen 3). The form looks cleaner, but it is not so obvious that "unchecked" means "Open" and "checked" means "Fixed Term". It also may not always be possible.

enter image description here

What do you think would be the best presentation of such conditional fields? There are numerous such cases on this form and I would like to come up with a good generic solution. Or maybe you have some other ideas? I have searched the net for examples but failed to find any...

Tags: