Component

Toggle Button

Single or multi-selection button group with full Angular Forms support.

import { NeuToggleButtonGroupComponent } from '@neural-ui/core/toggle-button-group';
import type { NeuToggleOption } from '@neural-ui/core/toggle-button-group';

Alignment (with icons)

View — multiple

Priority — text

Active days — multiple, sm

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NeuToggleButtonGroupComponent, NeuToggleOption } from '@neural-ui/core/toggle-button-group';

@Component({
  imports: [NeuToggleButtonGroupComponent, ReactiveFormsModule],
  template: `
    <!-- Selección única / Single selection -->
    <neu-toggle-button-group [options]="alignOpts" [formControl]="alignmentCtrl" />

    <!-- Selección múltiple / Multiple selection -->
    <neu-toggle-button-group
      [options]="viewOpts"
      [multiple]="true"
      [formControl]="selectedViewsCtrl"
    />

    <!-- Con iconos / With icons -->
    <neu-toggle-button-group
      [options]="alignOpts"
      size="sm"
      [formControl]="alignmentCtrl"
    />

    <!-- Reactive Forms / Reactive Forms -->
    <neu-toggle-button-group [options]="opts" [formControl]="ctrl" />
  `
})
export class MyComponent {
  readonly alignmentCtrl = new FormControl('left', { nonNullable: true });
  readonly selectedViewsCtrl = new FormControl<string[]>(['grid'], { nonNullable: true });

  alignOpts: NeuToggleOption[] = [
    { label: 'Izquierda', value: 'left', icon: 'lucideAlignLeft' },
    { label: 'Centro',    value: 'center', icon: 'lucideAlignCenter' },
    { label: 'Derecha',   value: 'right', icon: 'lucideAlignRight' },
  ];
}