Checkbox

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3)">
  <label class="aura-check">
    <input type="checkbox" class="aura-checkbox" />
    <span>Run all tests</span>
  </label>
  <div style="padding-inline-start: var(--space-5)">
    <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3)">
      <label class="aura-check">
        <input type="checkbox" class="aura-checkbox" checked />
        <span>Unit</span>
      </label>
      <label class="aura-check">
        <input type="checkbox" class="aura-checkbox" />
        <span>Integration</span>
      </label>
      <label class="aura-check">
        <input type="checkbox" class="aura-checkbox" />
        <span>Browser</span>
      </label>
    </div>
  </div>
  <label class="aura-check">
    <input type="checkbox" class="aura-checkbox" checked disabled />
    <span>Locked by policy</span>
  </label>
</div>

import { useState } from 'react';
import { Checkbox, Stack } from '@ilomee/aura-react';

const TESTS = ['Unit', 'Integration', 'Browser'];

/**
 * Indeterminate is the "some, but not all" state, and it only means anything against a set —
 * so the demo is a set. The parent holds no value of its own: it reads the children, showing a
 * tick when every one is checked, the bar when only some are, and nothing when none are. A
 * click commits whichever way it is not already.
 *
 * Shown this way because a lone indeterminate checkbox cannot demonstrate itself. The state has
 * no HTML attribute — only a DOM property — and a click always clears it, so the bar would
 * disappear on first use and never come back.
 */
export default function Demo() {
  const [checked, setChecked] = useState<string[]>(['Unit']);

  const all = checked.length === TESTS.length;
  const none = checked.length === 0;

  return (
    <Stack gap={3}>
      <Checkbox
        label="Run all tests"
        checked={all}
        indeterminate={!all && !none}
        onCheckedChange={() => setChecked(all ? [] : TESTS)}
      />
      {/* A plain div carries the indent so the nesting is visible; the four packages merge a
          caller's `style` into a layout component in their own order, and this keeps the markup
          identical across all of them for the parity diff. */}
      <div style={{ paddingInlineStart: 'var(--space-5)' }}>
        <Stack gap={3}>
          {TESTS.map((name) => (
            <Checkbox
              key={name}
              label={name}
              checked={checked.includes(name)}
              onCheckedChange={(on) =>
                setChecked((prev) => (on ? [...prev, name] : prev.filter((x) => x !== name)))
              }
            />
          ))}
        </Stack>
      </div>
      <Checkbox label="Locked by policy" defaultChecked disabled />
    </Stack>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Checkbox } from '@ilomee/aura-vue';

const ok = ref(true);
</script>

<template>
  <Checkbox v-model="ok" label="Ship on Friday" />
</template>

<script lang="ts">
  import { Checkbox } from '@ilomee/aura-svelte';

  let ok = $state(true);
</script>

<Checkbox bind:checked={ok} label="Ship on Friday" />

import { AuraCheckbox } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraCheckbox],
  template: `<aura-checkbox label="Ship on Friday" [(checked)]="ok" />`,
})
export class DemoComponent {
  ok = true;
}