i

Forms

6 components · 7 systems

The structure around fields: the form itself, the field, its label and hint, and what it says when something is wrong. Each block below is one system’s whole set of these components, drawn by its own package. To compare one control across every system drawn, open it from the rail.

Design systems shown

3 of 7 shown. Government, infrastructure and platform by default; add any other house to compare.

Carbon

4 of 6 drawn
Form Form
Form field FormItem
Error message
absentCarbon does not ship error message. Nothing is drawn in its place.
Fieldset Form group
Form label FormLabel
Helper text
absentCarbon does not ship helper text. Nothing is drawn in its place.

GOV.UK

5 of 6 drawn
Form
absentGOV.UK does not ship form. Nothing is drawn in its place.
Form field Form group (CSS object, undocumented)
Error message Error message
Fieldset Fieldset
Form label Label
Helper text Hint

Material Web

1 of 6 drawn
Form
absentMaterial Web does not ship form. Nothing is drawn in its place.
Form field Filled field / Outlined field (<md-filled-field>, <md-outlined-field>)
Error message
absentMaterial Web does not ship error message. Nothing is drawn in its place.
Fieldset
absentMaterial Web does not ship fieldset. Nothing is drawn in its place.
Form label
absentMaterial Web does not ship form label. Nothing is drawn in its place.
Helper text
absentMaterial Web does not ship helper text. Nothing is drawn in its place.