8

I'm working on a website. In one of my forms I need to select the form type (depending on the form type the rest of the fields will change their behavior, e.g. the disabled status and their placeholders).

There are only two available types: "type A" and "type B".

I am wondering what the best practice/rule of thumb is in this case.

I can think of these options (although I'm sure there are additional options I haven't thought about):

1. Drop-down list (html <select> tag)

This is a good option since I could add additional types in the future; however, it doesn't look so nice.

A drop-down list with two items: "Type A" and "Type B"

2. Radio buttons (html <input type="radio"> tag)

This option also allows me to add additional types in the future, but it occupies more than one line (of my form) which I don't like (all the rest of the form fields occupies single lines).

Two radio buttons, labelled "Type A" and "Type B"

3. Toggle slider (html <input type="checkbox"> tag with some style to look like a slider)

This option is a checkbox (behind the scenes); therefore I can toggle between only two options. However UI-wise it looks great.

A toggle slider

P.S I'm using material design in my site so material components can be a valid solution (however, the question isn't directly related to it).

Improve this question
6
  • 1
    Is your page a console-type (which user visits often, but modifies rarely), or questionnaire-type (which user visits once and has to answer all questions)?
    – Alexander
    May 2, 2018 at 16:24
  • Also, if "Type A" is a popular default value, there is option 4. It's just one checkbox "Type B" which can be checked (to use Type B) or empty (to use the default Type A).
    – Alexander
    May 2, 2018 at 16:29
  • @Alexander, my website is more of a web-service, in the meaning the end user buy a set of products (servers and physical hardware). All of these are being controlled my web-service. In this Form the user will fill some info and some data appear next to it in a separated view. The view type is bonded to the form type (A or B). hope this answer your question.
    – Gil Epshtain
    May 2, 2018 at 19:44
  • do you expect user to flip between Type A and Type B often? This imho will affect the choice between option 1 and option 2.
    – Alexander
    May 2, 2018 at 19:52
  • Can't you use a pair of radio buttons aligned side-by-side?
    – Dan Henderson
    May 2, 2018 at 21:39

5 Answers 5

Reset to default
18

The drop down has a disadvantage compared with the radio-buttons and the slider-toggle. The user has to click on it to see the possible options. On mobile (if this is the case) drop downs are not easy to use.

I agree with Owen Hughes about the toggle.

In this case, I would go with the radio buttons. But there is an alternative: You could use a segmented control. But with only two options, segmented controls can be confusing, because it might not be clear which segment is selected. So be careful with the design. It also would be easy to add more items if necessary.

Since the segments in the segmented control feel like a button, the user can expect that an action is performed. This way the change of the forms is not unexpected like they would probably be when using a dropdown or radio buttons. enter image description here

Improve this answer
2
  • Thank you for your answer, it provides a new thinking (a new idea) which I much appreciate.
    – Gil Epshtain
    May 2, 2018 at 14:31
  • You could even make it a select (or maybe radio) internally and style it with CSS.
    – Solomon Ucko
    May 2, 2018 at 20:16
5

If you want the user to select 1 option of a range, I would be inclined to go with the radio button as this is the convention. This would be my go to.

However if there is a change in the form under it then a drop down wouldn't be a bad idea either as the interaction is showing the change as a result of the drop down item being changed.

As for the toggle, toggles for the most part indicate an on/off type interaction so I dont think this is the right thing for what you're describing as the form changes behaviour as apposed to something becoming active/inactive.

The radio button and drop down may not look pretty but its selecting the right form element to suit the interaction you want the user to do using elements that are the common standard in forms.

Improve this answer
0
3

Update while answering your question in the comments:

When you think about both the radio buttons and the select tag, they both to the exact same thing but in different ways. They both allow you to select one item from x options.

My personal rule of thumbs is: if I need more than 4 options, use a dropdown to keep my form clean, if I have less than 4, use radio buttons so that my user can see all the options at once and make his choice with a single click.

Improve this answer
2
  • Thank you for your answer, but as I mentioned I'm using "material design" which has a designed drop-down (see material.angular.io/components/select/examples) I used the non-styled image just for example. But why do you think this is a better option than the other??
    – Gil Epshtain
    May 2, 2018 at 14:00
  • @GilEpshtain I have updated my answer to keep it simple and explain how I usually do things.
    – Alin
    May 2, 2018 at 14:18
1

Of the 3 options you've offered, radio buttons make the most sense to me in the case you've described (with only 2 options). The advantage they have over a dropdown is that all the values are immediately visible, and, in your case, it doesn't look like they would need to occupy 2 lines - you could just arrange them horizontally.

The slider toggle option as described, IMO, is the least appropriate. This type of control is also referred to as a switch, which seems to me to be a more accurate name: as Owen Hughes mentioned, they commonly activate/deactivate something in the UI (i.e. on/off), rather than acting as a way of choosing between two arbitrary values. Think of a physical light switch: it turns a light on/off, rather than alternating the colour of the light between red and blue.

Improve this answer
0

For a long list of options go with Select box, else use Radio button. Toggle/Switch is not suitable for this. Like if you ask gender, keep it Radio button. But if you are asking City, then you have to go with Select box.

Improve this answer
3
  • Ask gender? ask City? what?
    – Gil Epshtain
    May 3, 2018 at 8:22
  • I am just giving an example. In the form if you are asking user's gender, it's better to keep it as radio button. Like Male, Female, Others. But when you are asking say City or Country, it's a long list, then you need to use Select box. So basically, when number of options is more than 3 or 4, switch to Select box, else Radio button is okay. Got my point ?
    – UXPAPA
    May 3, 2018 at 8:52
  • And in your case I would recommend you to keep Radio button as you got only two options to display.
    – UXPAPA
    May 3, 2018 at 8:53

Your Answer

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

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