The label, the hint, the error and the counter around any input, wired to it for assistive technology. The input is whatever the caller puts in the slot: an InputGroup, a Textarea, a select, a plain <input>.

The slot is :let={field} and field carries what to hand to the input: field.id (the label points at it), field.invalid and field.required (booleans) and field.aria, a map of aria-describedby (the hint and the error, when there are any), aria-required and aria-invalid, to splat on a plain input:

<Field.field :let={field} id="slug" label="Slug" required error={@error}>
  <input id={field.id} name="slug" {field.aria} />
</Field.field>

A component that sets aria-invalid itself (InputGroup) takes invalid={field.invalid} and the other two by name: aria-describedby={field.aria[:"aria-describedby"]}.

The label shows a red * when required (hidden from assistive technology, which hears aria-required) and the optional text, in the language of the app, when the field is not. The hint is a quiet line under the input; the error replaces nothing and is announced (role="alert") with the icon of the error_icon slot in front. count and max draw the counter (182 / 200), amber from nine tenths of max and red past it. The library knows no language: every word is an attribute.