1

I have a webpage with a form arranged in a "Z" pattern, consisting of input fields. Additionally, I need to incorporate three radio button choices into the layout. Given that I've organized the form using two columns, I'm curious if there are recommended guidelines for positioning these three radio buttons. It's worth noting that these radio buttons are not contingent on any specific factors. To provide a visual representation of my current setup, please refer to the image below.

enter image description here

4
  • 1
    If the options are actually "Yes/No", why don't you use a checkbox instead? But other than that, I don't see any downside in your proposed solution. Perhaps, if the labels have different length you might incur in some misalignment, so in that case it would be worth considering the use of a grid or columns to make the form more scannable.
    – Adriano
    Commented Oct 10, 2023 at 0:01
  • @Adriano , for mutually exclusive values, he can't use checkboxes; he should use radio inputs instead. Checkboxes should only be used when multiple values are allowed.
    – Devin
    Commented Oct 10, 2023 at 16:18
  • I mean to use 1 checkbox. Given the example he provided we could make it Option 1 [], Option 2 [], Option 3 [], and the unchecked checkbox means NO, whereas the checked checkbox means YES.
    – Adriano
    Commented Oct 10, 2023 at 21:46
  • or a toggle instead of checkbox
    – exp
    Commented Oct 19, 2023 at 6:46

1 Answer 1

1

The way you have it is the correct way. Whether the input text fields are in the same group or not, the arrangement will still be the same, barring some spacing or a separator line if the text fields were part of a fieldset.

Anyway, as long as the options are easily perceived as part of the same group, this is OK.

There's just one caveat: if these options are dependent on each other (for example, let's say you have to choose a lodge and the options are specific to that lodge and you need all options to be chosen), it's recommended to visually group them in some way. Usually, a border is enough.

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.