RadioGroup

Native radios with one name, from which the user picks one.

Sizesmallmediumlarge

Size: medium.

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

  let size = $signal<string | null>('medium');
</script>

<RadioGroup class="ui-field" name="size" value=$bind(size)>
  <Label>Size</Label>
  #for (choice of ['small', 'medium', 'large'] by choice) {
    <Radio class="ui-box" value=choice>
      <span class="ui-mark round" aria-hidden="true"></span>
      {choice}
    </Radio>
  }
</RadioGroup>
<p>Size: {size ?? 'none'}.</p>

Each Radio is a <label> around a native radio, and names itself with value. Draw the circle in the children. See Styling.
value is the chosen radio, or null. See State.
The arrow keys move the choice, and Tab stops at the chosen radio, as in every browser, with or without scripts.
orientation sets aria-orientation. isRequired asks for a choice when the form is sent.
It is a radiogroup, named by its Label.