# Group

Source: https://iriscss.com/documentation/form/group/

`.group` joins inputs, selects and buttons into one row.

The children share borders and corners. The focused child moves on top, so its focus ring shows over its neighbors. Add `role="group"` and a label when the row is one control, so screen readers announce it as one.

```html
<div class="group" role="group">
  <input type="email" name="email" placeholder="Email" aria-label="Email">
  <button class="primary">Subscribe</button>
</div>
```

## Buttons

```html
<div class="group" role="group" aria-label="Text alignment">
  <button aria-current="true">Left</button>
  <button>Center</button>
  <button>Right</button>
</div>
```

## With a select

```html
<div class="group" role="group">
  <select aria-label="Currency"><option>USD</option><option>EUR</option></select>
  <input type="number" placeholder="Amount" aria-label="Amount">
</div>
```

## Search

A group on or inside `search` or `role="search"` gets pill ends. When `search` holds a form, put the class on the form.

```html
<search>
  <form class="group">
    <input type="search" name="q" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</search>
```

## Sizes

A size class on the group sizes every control inside.

```html
<div class="group small" role="group">
  <input type="text" placeholder="Small" aria-label="Small">
  <button>Go</button>
</div>
<div class="group large" role="group">
  <input type="text" placeholder="Large" aria-label="Large">
  <button>Go</button>
</div>
```

## Rounded and square

```html
<div class="group rounded" role="group">
  <input type="text" placeholder="Rounded" aria-label="Rounded">
  <button class="primary">Go</button>
</div>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-group-button-padding-inline` | `2rem` |
| `--i-group-search-border-radius` | `var(--i-border-radius-pill)` |