Concorde UI component — Checkbox. >Already checked checkbox Doc ID: core/components/ui/form/checkbox/checkbox. Keywords: Concorde, supersoniks, core/components/ui/form/checkbox/checkbox, checkbox, Checkbox, UI component, form, sonic-checkbox, web component, blacklistFlags, ?blacklistFlags=racist,sexist,…, flags, filterDocsJokes, src/docs/mock-api/fixtures.ts. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/checkbox/checkbox.html.

Checkbox

Size

<div class="grid gap-2">
    <sonic-checkbox size="2xs">2xs checkbox</sonic-checkbox>
    <sonic-checkbox size="xs">xs checkbox</sonic-checkbox>
    <sonic-checkbox size="sm">sm checkbox</sonic-checkbox>
    <sonic-checkbox>default checkbox</sonic-checkbox>
    <sonic-checkbox size="lg">lg checkbox</sonic-checkbox>
    <sonic-checkbox size="xl">xl checkbox</sonic-checkbox>
    <sonic-checkbox size="2xl">2xl checkbox</sonic-checkbox>
  </div>

Checked

<sonic-checkbox checked
    >Already checked checkbox
  </sonic-checkbox>

Disabled

<sonic-checkbox disabled
    >Disabled checkbox
  </sonic-checkbox>

Disabled and checked

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

Checkbox with link

<sonic-checkbox>Checkbox with <sonic-link href="#" class="underline text-info">link</sonic-link>

Check all checkbox

<div formDataProvider="checkbox-check-all-demo" dataProvider="checkbox-check-all-demo">
      <sonic-checkbox  name='someSharedName' value="all" checksAll>All</sonic-checkbox>
      <sonic-divider></sonic-divider>
      <div class="grid gap-2">
      <sonic-checkbox name="someSharedName" value="foo">Foo</sonic-checkbox>
      <sonic-checkbox name="someSharedName" value="bar">Bar</sonic-checkbox>
      </div>
      <sonic-divider></sonic-divider>
      <div>
        <span>Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.</span>
        <div id="prunable-checkbox" class="flex gap-2 items-center">
        <sonic-checkbox name="someSharedName" value="baz">Baz</sonic-checkbox>
        <sonic-button variant="ghost" shape="circle" unique name="toggleCheckboxExistance" onclick="document.getElementById('prunable-checkbox').remove();" value="true"><sonic-icon library="fontAwesome" prefix="solid" name="trash"></sonic-icon></sonic-button>
        </div>
    </div>

Example of use — blacklist + queue

Checked blacklistFlags values are sent to the mock API (?blacklistFlags=racist,sexist,…), which excludes jokes whose flags match (see filterDocsJokes in src/docs/mock-api/fixtures.ts).