Switch

A native checkbox with role="switch", for a setting that applies at once.

Wi-Fi is on

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

  let wifi = $signal(true);
</script>

<Switch class="ui-box" isSelected=$bind(wifi)>
  <span class="ui-track" aria-hidden="true"></span>
  Wi-Fi is {wifi ? 'on' : 'off'}
</Switch>

isSelected is its state. See State.
It is a <label> around the input. Draw the switch in the children. See Styling.
isDisabled and isReadOnly set its state. name and value post with the form.
The label shows data-selected, data-pressed, data-hovered, data-focused, data-focus-visible, data-disabled and data-readonly.