# Input group · MIAN

An input with leading or trailing addons, text, icons or buttons, inside one border.

- Id: `input-group` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/input-group
- Use for: input with prefix, url field, currency input, search with button.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Text addons

```html
<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

```html
<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="you@company.com"><button class="mn-btn">Subscribe</button></div>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/input-group/source