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.
Five components, twenty-six variants
Field - Orientation × Data Invalid × Description Placement × Show Link: Vertical · Responsive × False · True × None · Under Input · Under Label × No · Yes - Responsive has no Under Label and no link
Field Group - Orientation: Vertical · Horizontal - 320 × 304 for three, 640 × 88 for two
Field / Buttons - Orientation: Vertical · Horizontal - stacked adds a footnote, side by side does not
Field / Legend - Variant × Show Description: Legend · Label × Yes · No - 16/500 against 14/500
Field / Separator - Show Text: Yes · No - a 1px rule, 382 × 20
Using the Field
Why does Responsive have four variants and Vertical twelve?
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.
Where does the description go in the Responsive layout?
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.
Does Show Link make the field taller?
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.
What does Data Invalid actually change?
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.
Why are there two example frames?
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.