Field
Twenty-six variants across five components, and the only page in the kit with two example frames: six forms in one, the pieces on their own in the other.
Four axes would give 2 × 2 × 3 × 2 = 24. Responsive drops to four: it has no Under Label and no link, because a label sharing a row with an input has nowhere to put either. The twelve Vertical variants carry the full matrix.
Show Link does not add a row. The link is an absolutely placed child pinned to the right of the label line, so the field stays 60 or 88 tall whether it is there or not, and the label keeps the full width underneath it.
It repaints the label and the input border to base.destructive and leaves the description muted. A description is not an error message; if you want the red sentence under the input, that is the text you edit, not a variant you switch to.
The parts a form needs around the field
Field Group stacks or rows them, Field / Buttons is the action strip, Field / Legend is the heading for a fieldset, and Field / Separator is the rule that splits one group from the next. Ten variants between them.
Six forms and a fieldset, built out of the five parts
Field is the only component on the page with two example frames. Form examples is 1400 by 1682 and holds six cards, all 374 wide, from two plain fields up to a seven-field booking form. The second frame, 1000 by 1886, shows the pieces on their own: a shipping fieldset, the responsive layout, the invalid state, and Field wrapping a checkbox group, a radio group and a split group. Two of the six cards are rebuilt below.
A column that only needs its text realigned
Label over input over hint is a stack, and a stack does not reverse - top stays top in every direction. All dir has to do here is move the text to the other edge, which is why this is the cheapest component in the kit to make bidirectional. The rows inside a field are where it gets interesting.
That last row is the one to watch. A vertical field needs nothing but text-start; a horizontal one is a flex row and dir reverses it, sending the control to the other end. Both shapes live in this component, so a bidirectional form has to get both right - and neither needs a mirrored variant.
Five components, twenty-six variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Field
Because two of the axes stop meaning anything once the label and the input share a row. There is nowhere to put a link beside a label that is already beside an input, and Under Label and Under Input collapse into the same place: the left column. So Responsive keeps Data Invalid and a description toggle, and that is four.
Under the label, in the left column, whichever placement you pick. The property is still called Under Input because the axis is shared with the Vertical variants, but the layout puts it with the label because that is the only column with room. Worth knowing before you go looking for it under the input.
No. The link is an absolutely placed child pinned to the right of the label row, so the field stays 60 or 88 tall either way and the label keeps its full width underneath. That is also why it does not push the label around when the text gets longer.
The label and the input border, both to base.destructive. The description stays muted, because a description is not an error message. If you want the red sentence under the input, edit that text rather than looking for a variant.
Because the two things worth showing do not fit in one. Form examples is six finished cards, all 374 wide, from two fields up to a seven-field booking form. The second frame takes the pieces apart: a shipping fieldset, the responsive layout on its own, the invalid state, and Field wrapping a checkbox group, a radio group and a split group.