Checkbox

A <label> around a native checkbox, which stays for screen readers and forms. The browser toggles it on a click and on Space, with or without scripts.

Send me the newsletterSome of the filesTerms, already accepted

<script>
  import { $bind, $signal } from 'brumate/signals';
  import Checkbox from '@brumate/ui/Checkbox.brm';

  let subscribed = $signal(true);
  import Icon from '../../src/components/Icon.brm';
</script>

<div class="ui-stack">
  <Checkbox class="ui-box" isSelected=$bind(subscribed)>
    <span class="ui-mark" aria-hidden="true"><Icon name="check" size=(12) /><Icon name="minus" size=(12) /></span>
    Send me the newsletter
  </Checkbox>
  <Checkbox class="ui-box" isIndeterminate>
    <span class="ui-mark" aria-hidden="true"><Icon name="check" size=(12) /><Icon name="minus" size=(12) /></span>
    Some of the files
  </Checkbox>
  <Checkbox class="ui-box" isSelected isReadOnly>
    <span class="ui-mark" aria-hidden="true"><Icon name="check" size=(12) /><Icon name="minus" size=(12) /></span>
    Terms, already accepted
  </Checkbox>
</div>

Draw the box in the children. See Styling.
isSelected is its state. See State.
isIndeterminate shows that some of a list is selected. Only code can set it on the input, so only an indeterminate box loads any, when the browser is idle.
isReadOnly keeps its state: the click is prevented, so the browser never toggles it.
name and value post with the form.
The label shows data-selected, data-indeterminate, data-pressed, data-hovered, data-focused, data-focus-visible, data-disabled, data-readonly, data-invalid and data-required.