Layout and text container for a single form control. Owns the vertical rhythm of label / control / hint / error. These examples slot real QDS controls — qds-text-input, qds-select, qds-numeric-input, qds-date-picker — since that is what field is actually paired with in practice.
Label sits above the control; hint text sits below. qds-text-input declares static qdsFieldConsumer = true, so label and hint here come from the field, not from attributes on the input.
Label sits in a left column of --qds-field-label-width (180px by default).
When invalid is set and error-text is provided, the error replaces the hint. The field pushes both down to the control, which renders them in its own shadow root.
The disabled attribute dims the label and hint, and is pushed down to disable the control itself.
Label type size and control height adapt to the size attribute: sm, md (default), lg.
The required marker is aria-hidden="true" — required state reaches assistive tech through the control's own aria-required, pushed down from the field. reserve-message reserves a line so validation does not shift the layout.
The same field wraps a qds-select just as easily — qds-select is also a field consumer.
Numeric, currency, and percentage controls are field consumers too.
Date pickers push the same label/hint/error contract down to their own text field.
This is the minimal shape a third-party or in-progress control needs to participate: declare static qdsFieldConsumer = true and observe label, hint, error-text, invalid, disabled, required, size. The field pushes only the attributes it actually has, and never clears one the field does not define.
The same component in dark theme. Toggle the theme switch in the toolbar to compare.