Input Group
Input Group is a native web component that wraps an input control (a plain <input> or a <pura-input>) together with optional addons in the prefix and suffix slots, all inside a single rounded container with a shared focus ring (:focus-within). Use it when you need to attach icons, text, unit symbols, or buttons directly to the field, as in currency values, URLs, or searches. The disabled and invalid states mirror the visual behavior of pura-input.
Preview
<pura-input-group>
<span slot="prefix">$</span>
<input type="text" inputmode="decimal" placeholder="0.00" aria-label="Amount" />
<span slot="suffix">USD</span>
</pura-input-group>
<pura-input-group>
<span slot="prefix">https://</span>
<input type="text" placeholder="my-site" aria-label="Website address" />
<span slot="suffix">.com</span>
</pura-input-group>
<pura-input-group invalid>
<input type="email" placeholder="you@email.com" aria-label="Email" value="invalid-email" />
<span slot="suffix">!</span>
</pura-input-group>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables the group, lowering opacity and blocking interaction with the slotted content. |
invalid | boolean | false | Applies the error style (border and ring in the danger color) to the container. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/input-group.js"></script>import "./pura/lib/input-group.js";