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

2 Answers 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

  • 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. Commented Mar 1, 2022 at 9:47

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.

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.