1

I have a form in which a user can add items with 3 inputs to each item. I need a label for each input and a label for the whole item group. I have a problem with aligning things up. As a general rule and all forms have the seem to look of the input label being on the left of the input.

How do I handle it with the best usability?

I got 2 options now:

  1. label aligned with input labels
  2. label is aligned with inputs

Is there another solution I can't see? enter image description here

Improve this question

2 Answers 2

Reset to default
2

I can see different approaches but all have something in common: the 3 inputs are received as a group.

Align the main label with detail labels and do not repeat the detail labels (looks like a table with labeled collumns) enter image description here

you could use something like cards (depending on the design of the rest of the form but a card would group the inputs to a unit. enter image description here

or depending on the length of the inputs you could use the same but stacked vertically instead of horizontally. this way you do not brake the rule to place the labe on the left of the input. enter image description here

Improve this answer
1
  • Thanks! I think i will go with the first option. vertical will take too much screen space. I cant use different input with labels inside because of design system rules. so it seems like this is the most reasonable solution.
    – user2550900
    Mar 1, 2022 at 9:47
0

Label aligned with input labels will be useful if you have multiple groups in the same page, so each group label will indicate that this is the beginning of a new group.

Improve this answer

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.