Concorde UI component — Group. Group: 😎 Standard ⭐ Premium 💎 Diamond Doc ID: core/components/ui/group/group. Keywords: Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html.

Group

Radio group

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

Button group

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

Input actions prefix

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

Input actions suffix

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