TRA SummitDesign System

Radio Group

A set of mutually exclusive options where exactly one can be selected.

Basic

<RadioGroup defaultValue="card">
  <RadioGroupItem value="card" label="Credit or debit card" />
  <RadioGroupItem value="ach" label="Bank account (ACH)" />
  <RadioGroupItem value="check" label="Mail a check" />
</RadioGroup>

With descriptions

Drafted on the 1st of each month.

Pay a full year up front and save 5%.

Dues plus trip credits in one payment.

<RadioGroup defaultValue="monthly">
  <RadioGroupItem
    value="monthly"
    label="Monthly dues"
    description="Drafted on the 1st of each month."
  />
  <RadioGroupItem
    value="annual"
    label="Annual prepay"
    description="Pay a full year up front and save 5%."
  />
  <RadioGroupItem
    value="adventurepass"
    label="AdventurePass bundle"
    description="Dues plus trip credits in one payment."
  />
</RadioGroup>

Disabled

Unavailable for accounts under review.

<RadioGroup defaultValue="ach">
  <RadioGroupItem value="ach" label="Bank account (ACH)" />
  <RadioGroupItem
    value="wire"
    label="Wire transfer"
    description="Unavailable for accounts under review."
    disabled
  />
</RadioGroup>