Concorde UI component — Radio. >Already checked radio Doc ID: core/components/ui/form/radio/radio. Keywords: Concorde, supersoniks, core/components/ui/form/radio/radio, radio, Radio, UI component, form, sonic-radio, web component, blacklistFlags. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html.

Radio

Size

<div class="grid gap-2" formDataProvider="radioSizeExemple">
      <sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
      <sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
      <sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
      <sonic-radio name="size" value="default" >default radio</sonic-radio>
      <sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
      <sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
      <sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
    </div>

Checked

<sonic-radio checked
    >Already checked radio
  </sonic-radio>

Disabled

<sonic-radio disabled
    >Disabled radio
  </sonic-radio>

Disabled and checked

<sonic-radio disabled checked
    >Disabled but already checked radio
  </sonic-radio>

radio with link

<sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>

Example of use — blacklist + queue

Same mock filter as Checkbox (blacklistFlags query param). Radio sends one flag at a time.