A text field with what the canvas puts around it: an icon at the start, an action at the end (show the password, clear, copy) and add-ons on either side (R$, https://, .devaction.app). The frame carries the focus ring, the error and the disabled look, so the field inside stays a plain <input>.

The icon, the action and the add-ons are slots: the library knows no icon set. The error is whatever the caller says with invalid, and loading swaps the end for a spinner (and then loading_label is required). An add-on is boxed (a tinted block with a line) unless it says loose (plain muted text, as .devaction.app), and mono sets it in the monospace of an amount or a code.

The field carries no error message of its own: render it under the group with an id and point the field at it with aria-describedby, which goes to the <input> through rest:

<InputGroup.input_group id="slug" invalid aria-describedby="slug-error" />
<p id="slug-error">Already taken</p>

The look comes from the .input-group* classes of devaction_ui.css, which the app must import. The focus and error rings (8% of the ink in light, 10% in dark), the error fill and the disabled fill are the custom properties --ring-field, --ring-field-error, --fill-field-error and --fill-field-off, which an app can override on the group. A readonly field is drawn as the canvas draws a secret to copy: plain fill, monospace.