toggleGroupSingle<T> function

BloomNode toggleGroupSingle<T>({ required List<ToggleGroupItem<T>> items, required T? value, required void onChange(T value), ToggleVariant variant = ToggleVariant.defaultVariant, ToggleSize size = ToggleSize.defaultSize, String orientation = 'horizontal', String extraClassName = '', })

Controlled toggle group supporting single-selection.

Implementation

BloomNode toggleGroupSingle<T>({
  required List<ToggleGroupItem<T>> items,
  required T? value,
  required void Function(T value) onChange,
  ToggleVariant variant = ToggleVariant.defaultVariant,
  ToggleSize size = ToggleSize.defaultSize,
  String orientation = 'horizontal',
  String extraClassName = '',
}) {
  final isHorizontal = orientation == 'horizontal';

  return Div(
    attrs: {
      'role': 'group',
      'data-slot': 'toggle-group',
      'aria-orientation': orientation,
    },
    className: cn([
      'inline-flex items-center gap-1 rounded-[var(--radius-md)] p-1 bg-[var(--card)] border border-[var(--border)]',
      isHorizontal ? 'flex-row' : 'flex-col',
      extraClassName,
    ]),
    children: items.map((item) {
      final isSelected = item.value == value;

      return toggle(
        pressed: isSelected,
        onChange: (pressed) {
          if (pressed) onChange(item.value);
        },
        variant: variant,
        size: size,
        child: item.child,
      );
    }).toList(),
  );
}