radioGroup function

HTMLElement radioGroup({
  1. required String name,
  2. required List<({String label, String value})> options,
  3. required String selected,
  4. required void onChange(
    1. String value
    ),
  5. bool inline = false,
  6. String? ariaLabel,
})

A radio-button group. Each option is a (value, label) pair; selected is the initially-checked value and onChange fires with the newly-picked value. Set inline to lay the options out in a row (e.g. a segmented control), and ariaLabel to name the group for assistive tech.

Implementation

web.HTMLElement radioGroup({
  required String name,
  required List<({String value, String label})> options,
  required String selected,
  required void Function(String value) onChange,
  bool inline = false,
  String? ariaLabel,
}) {
  final rows = <web.HTMLElement>[];
  for (final o in options) {
    final box = el('input', id: '$name-${o.value}') as web.HTMLInputElement;
    box.type = 'radio';
    box.name = name;
    box.value = o.value;
    box.checked = o.value == selected;
    box.addEventListener(
      'change',
      (web.Event _) {
        if (box.checked) onChange(o.value);
      }.toJS,
    );
    rows.add(
      el(
        'label',
        classes: 'radio',
        attrs: {'for': box.id},
        children: [box, textNode(o.label)],
      ),
    );
  }
  return el(
    'div',
    classes: inline ? 'radio-group inline' : 'radio-group',
    role: 'radiogroup',
    ariaLabel: ariaLabel,
    children: rows,
  );
}