# Group

## Radio group
<sonic-code>
  <template>
    <sonic-group formDataProvider="subscriptionData">
      <sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
      <sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
      <sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
    </sonic-group>
  </template>
</sonic-code>

## Button group
<sonic-code>
  <template>
    <sonic-group>
      <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
      <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
      <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
    </sonic-group>
  </template>
</sonic-code>

## Input actions prefix
<sonic-code>
  <template>
    <div class="grid grid-cols-3 gap-3">
      <sonic-group>
        <sonic-button type="info" shape="square">
          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
        </sonic-button>
        <sonic-input placeholder="placeholder" ></sonic-input>
      </sonic-group>
      <sonic-group label="Label">
        <sonic-button type="info" shape="square">
          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
        </sonic-button>
        <sonic-input  ></sonic-input>
      </sonic-group>
      <sonic-group description="Description">
        <sonic-button type="info" shape="square">
          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
        </sonic-button>
        <sonic-input ></sonic-input>
      </sonic-group>
    </div>
  </template>
</sonic-code>

## Input actions suffix
<sonic-code>
  <template>
    <div class="grid grid-cols-3 gap-3">
      <sonic-group>
        <sonic-input placeholder="placeholder" ></sonic-input>
        <sonic-button type="primary" shape="square">
          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
        </sonic-button>
      </sonic-group>
      <sonic-group label="Label">
        <sonic-input  ></sonic-input>
        <sonic-button type="primary" shape="square">
          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
        </sonic-button>
      </sonic-group>
      <sonic-group description="Description">
        <sonic-input ></sonic-input>
        <sonic-button type="primary" shape="square">
          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
        </sonic-button>
      </sonic-group>
    </div>
  </template>
</sonic-code>