# Group

**`sonic-group`** lays out `sonic-button` · `sonic-input` and `sonic-select` controls in one row with a **shared corner radius**: only the outer corners of the first and last items stay rounded. Use it for button groups, radio rows or a field with an attached action. Optional `label` and `description` follow form field styling.

## Radio group

Give each `sonic-button` the `radio` attribute and a shared `name`. The selected `value` is written to the `formDataProvider` set on the group (inherited by the buttons).

<sonic-code>
  <template>
    <sonic-group formDataProvider="groupPlanDemo">
      <sonic-button radio name="plan" value="free" type="default">Free</sonic-button>
      <sonic-button radio checked name="plan" value="pro" type="default">Pro</sonic-button>
      <sonic-button radio name="plan" value="team" type="default">Team</sonic-button>
    </sonic-group>
  </template>
</sonic-code>

## Button group

Adjacent action buttons that stay independent controls.

<sonic-code>
  <template>
    <sonic-group>
      <sonic-button type="default">
        <sonic-icon library="iconoir" name="align-left"></sonic-icon>
      </sonic-button>
      <sonic-button type="default">
        <sonic-icon library="iconoir" name="align-center"></sonic-icon>
      </sonic-button>
      <sonic-button type="default">
        <sonic-icon library="iconoir" name="align-right"></sonic-icon>
      </sonic-button>
    </sonic-group>
  </template>
</sonic-code>

## Field with action

Put the action before or after the field. `label` and `description` annotate the whole row.

<sonic-code>
  <template>
    <div class="grid gap-4 max-w-md">
      <sonic-group label="Search" description="Type a flight number, then confirm.">
        <sonic-input placeholder="CN 001"></sonic-input>
        <sonic-button type="primary" shape="square">
          <sonic-icon library="iconoir" name="search"></sonic-icon>
        </sonic-button>
      </sonic-group>
      <sonic-group label="Extra baggage">
        <sonic-button type="default" shape="square">
          <sonic-icon library="iconoir" name="minus"></sonic-icon>
        </sonic-button>
        <sonic-input type="number" value="1"></sonic-input>
        <sonic-button type="default" shape="square">
          <sonic-icon library="iconoir" name="plus"></sonic-icon>
        </sonic-button>
      </sonic-group>
    </div>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `label` | string (HTML) | Label above the row; content of `slot="label"` is appended |
| `description` | string (HTML) | Help text below the row; content of `slot="description"` replaces it |
| `alignItems` | CSS `align-items` value (default `center`) | Cross-axis alignment of the row |

| Slot | Description |
|------|-------------|
| *(default)* | `sonic-button` · `sonic-input` · `sonic-select` in visual order |
| `label` | Custom label markup |
| `description` | Custom description markup |