Concorde UI component — 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 gro Doc ID: core/components/ui/group/group. Keywords: Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, value. URL: https://concorde.supersoniks.org/core/components/ui/group.

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

Button group

Adjacent action buttons that stay independent controls.

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

Field with action

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

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

API reference