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

Switch

Size

<div class="grid gap-2" formDataProvider="switchSizeExemple">
      <sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
      <sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
      <sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
      <sonic-switch name="size" value="default" >default switch</sonic-switch>
      <sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
      <sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
      <sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
    </div>

Checked

<sonic-switch checked
    >Already checked switch
  </sonic-switch>

Disabled

<sonic-switch disabled
    >Disabled switch
  </sonic-switch>

Disabled and checked

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

switch with link

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

Example of use — blacklist + queue

Same mock filter as Checkbox; switches can enable several flags (comma-separated in the query).