<!-- Generated by npm run gen:skill from ui/Group/skill.md - do not edit. -->

# Group

## `<group>`

- `align`: right | left | center
- `type`: row
- `mode`: default | mutex | toggle
- `value` (name of a child)
- events: Disable, Enable, Select
- methods: getMode

## Guidance

```xml
<group name="size" label="Size" mode="mutex">
  <radio name="small" value="s" post-text="Small"/>
  <radio name="medium" value="m" post-text="Medium"/>
</group>
```

- Only direct children are in the set. `mutex`: one choice, kept - use it for radios too (only then a bound group follows its document). `toggle`: buttons with `selected`, the choice can be cleared.
- Trigger on the group's Select; `{#v#size}` is the chosen radio's `value`, the pressed button's `value` (else its name, never its text) or the shown panel's name. `value=` takes the child's `name` only; the `set` action also takes a radio's `value`, and presses a button (by name or `value`) only in a `mutex` group.
- Select also fires for programmatic changes (`set`, `value` at build, the bound document): gate user-only steps on a flag.
- Panel children: only the one the value names is shown. Bind a radio group; a bound group of buttons is not supported (binding relabels the buttons and clicks stop setting the value).
- Stacked radios (`type="row"`) need `style="line-height: 24px"` for the 24px target size.
