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'];

/**
 * «Частично» — это состояние «некоторые, но не все», и смысл оно имеет только относительно набора,
 * поэтому демо и есть набор. Собственного значения у родителя нет: он читает детей и показывает
 * галочку, когда отмечены все, полоску — когда только часть, и ничего, когда ни одного. Клик
 * приводит всех к тому состоянию, в котором они ещё не находятся. Показано именно так, потому что
 * одиночный чекбокс в состоянии «частично» сам себя продемонстрировать не может: у состояния нет
 * HTML-атрибута, только DOM-свойство, и клик всегда его снимает — полоска исчезла бы при первом же
 * использовании и больше не вернулась.
 */
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;
}