Search code examples
htmlformsuser-interfaceuser-experience

How to implement three mutually exclusive Forms


How would you handle having three forms in one page but only allowing the user to use one for input and therefore making the others inactive/disabled, in the most user friendly way.

Say for example having the user choose of one of the following forms:

  • URL
  • file
  • text

Solution

  • Try a set of tabs. Only reveal the relevant form when the corresponding tab is active.

    https://getbootstrap.com/docs/4.0/components/navs/#tabs

    Give each form it's own submit button, enforces only one option can be submitted.