checkbox — the native selector, redrawn

<Checkbox
  label="subscribe"
  bind:checked
  indeterminate={false}
  labelSide="right"
/>

<script lang="ts">
import Checkbox from '@ui/checkbox';
import CardGrid from '@ui/card-grid';
</script>

<CardGrid min="200px">
  <div class="demo-cell" data-no-subgrid>
    <Checkbox label="unchecked" name="demo_cb" />
  </div>
  <div class="demo-cell" data-no-subgrid>
    <Checkbox label="checked" name="demo_cb" checked />
  </div>
  <div class="demo-cell" data-no-subgrid>
    <Checkbox label="indeterminate" name="demo_cb" indeterminate />
  </div>
  <div class="demo-cell" data-no-subgrid>
    <Checkbox label="label left" name="demo_cb" labelSide="left" />
  </div>
  <div class="demo-cell" data-no-subgrid>
    <Checkbox label="disabled" name="demo_cb" disabled />
  </div>
  <div class="demo-cell" data-no-subgrid>
    <Checkbox label="error" name="demo_cb" error="consent is required" />
  </div>
</CardGrid>

<script lang="ts">
  import Checkbox from '@ui/checkbox.svelte';
  import PressButton from '@ui/press-button.svelte';
  import { rt } from '@lib/surface/routes.stylex';

  // the page-local join (the separator serialize law) — the same idiom
  // the docs stage runs; atoms over utility classes
  const cx = (
    ...styles: ({ readonly [key: string]: string | object } | undefined | string)[]
  ): string =>
    styles
      .filter(Boolean)
      .map((style) =>
        typeof style === 'string'
          ? style
          : Object.entries(style ?? {}).flatMap(([key, value]) =>
              key !== '$$css' && typeof value === 'string' ? [value] : [],
            ).join(' '),
      )
      .join(' ');

  // uncontrolled fields, FormData read once at submit — the checked box
  // contributes its name/value pair, an unchecked one contributes nothing
  let result = $state<string[] | null>(null);

  function onSubmit(event: SubmitEvent) {
    event.preventDefault();
    const data = new FormData(event.currentTarget as HTMLFormElement);
    const outputs: string[] = [];
    for (const [key, value] of data) {
      if (typeof value === 'string' && value !== '') outputs.push(key + ': ' + value);
    }
    result = outputs;
  }
</script>

<form class={cx(rt.col16)} aria-label="consent" onsubmit={onSubmit}>
  <Checkbox label="I agree to the terminal printing my answers" name="consent" value="yes" required />
  <Checkbox label="join the newsletter" name="news" value="yes" />
  <div class={cx(rt.wrapRow12, rt.pt4)}>
    <PressButton type="submit" variant="fill">sign up</PressButton>
    <span class={cx(rt.inkMuted, rt.text125)}>
      required fields use native validation — try submitting empty
    </span>
  </div>
</form>