i have a form which is to be displayed on selection of a radio button. Will placing this form in between the radio buttons confuse the user? If yes, what would be a good practice to follow?


It depends on a size of the form and how much you expect is the second (third...) option important.

The safest is to display all radio options first and then the form. You can even style it visually in a way that choosing radio is a "first step" of completion the form.

If you have a really small form (1-4 items, ideally on one or two lines), you can place it between the radios, but you should check with random people, that the second option is still visible enough and understood as alternative option to the first one. This will be affected by default state as well - if you won't have any radio preselected, options might be easier to notice, but switching between them still can be unfriendly in some cases.

If you know that first option will be used a lot and second is rather an exceptional task, you can for example remove the first radio and make its wording a title, display form and above or next to it display sth like "Do you want to rather do XYZ?" and make the other form a different page/workflow.


So, if I understand it correctly, what you're describing is the following mechanic:


download bmml source – Wireframes created with Balsamiq Mockups

Assuming this there are a couple of things that are important to consider:

  • Indent the sub form to make clear that it is part of the Radio button in question
  • Make clear the subform is one thing by graphically styling it clearly in a box, optionally including a titled fieldset.
  • Show the sub form with a slide down animation to make clear the form fits "in between"
  • Do not save the subform on it's own, but just consider it an optional part of the larger form. If mentally it can't be considered a part of the larger form a multi step flow would be the better more correct approach.

In principal I don't think displaying a form using a radio button is a good idea, here are few reasons why:

Progressive disclosure: for progressive disclosure to work there need to be some initial amount of information available to start with. This information will need to provide an overview or a succinct description of what will be disclosed upon user input. This helps users anticipate the type and scope of content being disclosed and be more reactive to the user controls.

Depending on the number of fields required for each form and it's overall complexity, the use of a radio button to display the firm could generate usability problems such as users not being able to predict what the next form will require from them.

Overall, if you are dealing with some kind of selection process, it's better to inform your users upfront and guide them through the process in an efficient and streamlined manner.

Also ensure that this process stays as linear as possible and provide information about each step and what it entails for your users. This transparency will allow them to make better and more informed decisions about any selection they make. Hope that helps


I have a few reservations about your query. My answer might vary based on the context in which you are using this metaphor and also the kind of user base you have.

Still considering the most generic environment, I would not recommend a form layout between radio buttons. Radio buttons by default denote a group of things which are contextually linked and you can select one option out of the available ones. The user generally expects it to be close together to make the most sense of it.

Since I do not know your exact use case, lets consider you have two vertical radio buttons like,

enter image description here

and when someone makes some selection

enter image description here

This arrangement defeats the purpose of radio buttons. What you want is a delayed form element creation based on user inputs and radio buttons are not ideally suited for such an operation.

Progressive disclosure

Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of being overwhelmed for the user. - Wiki

Considering this definition I guess what you are suggesting does not fall under this one. It is more of a deferred creation mode.

If you provide a little more information about the use case, we might be able to give recommendations.


I may suggest to use such "segmented control" pattern, it can be appropriate in some cases, especially if you use custom design (web or mobile application, not desktop app with native GUI). It unites radiobutton functionality with tab behaviour:


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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