Input group
An input with leading or trailing addons, text, icons or buttons, inside one border.
Text addons
https://
EUR
<div class="mn-stack" style="max-width:26rem">
<div class="mn-input-group"><span class="mn-addon">https://</span><input class="mn-input" aria-label="Website" placeholder="mian.ro"></div>
<div class="mn-input-group"><input class="mn-input" aria-label="Price in euro" placeholder="0.00" inputmode="decimal"><span class="mn-addon">EUR</span></div>
</div>Icon and button
<div class="mn-stack" style="max-width:26rem">
<div class="mn-input-group"><span class="mn-addon mn-addon-plain"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span><input class="mn-input" type="search" aria-label="Search" placeholder="Search components…"></div>
<div class="mn-input-group"><input class="mn-input" type="email" aria-label="Email" placeholder="[email protected]"><button class="mn-btn">Subscribe</button></div>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/input-group.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-input-group | The shared border. |
| mn-addon | A text or icon segment. |
| mn-addon-plain | An addon with no background, e.g. a search icon. |
| svg (direct child) | A bare icon inside mn-input-group is placed as a plain leading or trailing addon. |
Accessibility
- Addons are visual. If an addon carries meaning (a currency, a domain), repeat it in the label or aria-describedby.