Check Box Group
An items-bound list of check boxes whose value is the array of checked item values — the Syncfusion / PrimeNG checkbox group, as one form field with a label, hint and validation subscript. Each item is a real oge-check-box (native semantics, its own Tab stop — the APG checkbox pattern) inside a role="group" named by the label.
Works standalone via [(value)], with Signal Forms via [formField], and with reactive/template forms via formControl/ngModel.
Getting started
displayExpr / valueExpr / disabledExpr are the select box vocabulary. The value is the array of checked valueExpr results in items order, whatever order the user clicked in; disabled items keep their state.
Value: ["mail","push"]
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeCheckBoxGroup } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeCheckBoxGroup],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- One real check box per item (native semantics, its own Tab stop —
the APG checkbox group) inside a role="group" named by the label. The
value is the ARRAY of checked valueExpr results, in items order however
the user clicked. Disabled items keep their state. -->
<oge-check-box-group
label="Notify me by"
hint="We never share your details."
[items]="channels"
displayExpr="name"
valueExpr="id"
disabledExpr="locked"
[(value)]="notify"
/>
`,
})
export class Demo {
protected readonly channels = [
{ id: 'mail', name: 'E-mail' },
{ id: 'sms', name: 'SMS' },
{ id: 'push', name: 'Push (always on)', locked: true },
{ id: 'call', name: 'Phone call' },
];
protected readonly notify = signal<readonly unknown[]>(['mail', 'push']);
}Select all
showSelectAll adds a tri-state box over the enabled items — checked, mixed (aria-checked='mixed') or unchecked; from mixed it selects all. selectAll() / unselectAll() do the same from code.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeCheckBoxGroup } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeCheckBoxGroup],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- showSelectAll: a tri-state box over the ENABLED items — checked,
mixed or unchecked; from mixed it selects all. selectAll() /
unselectAll() do the same from code. -->
<oge-check-box-group
label="Columns to export"
[items]="columns"
[showSelectAll]="true"
[(value)]="picked"
/>
`,
})
export class Demo {
protected readonly columns = ['Name', 'E-mail', 'City', 'Country', 'Phone'];
protected readonly picked = signal<readonly unknown[]>(['Name', 'City']);
}Layouts
layout: 'vertical' | 'horizontal' | 'columns' — a column, a wrapping row, or a CSS grid of columns columns.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeCheckBoxGroup } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeCheckBoxGroup],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- layout: 'vertical' (default) | 'horizontal' (a wrapping row) |
'columns' (a CSS grid of [columns] columns). -->
<oge-check-box-group label="Days" layout="horizontal" [items]="days" [(value)]="workDays" />
<oge-check-box-group
label="Toppings"
layout="columns"
[columns]="3"
[items]="toppings"
[(value)]="pizza"
/>
`,
})
export class Demo {
protected readonly days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
protected readonly workDays = signal<readonly unknown[]>(['Mon', 'Tue', 'Wed', 'Thu', 'Fri']);
protected readonly toppings = ['Basil', 'Olives', 'Mushrooms', 'Peppers', 'Onion', 'Ham'];
protected readonly pizza = signal<readonly unknown[]>(['Basil']);
}Inside a form
Signal Forms' required() treats [] as a value, so “at least one” is minLength(p.field, 1, { message }); reactive Validators.required treats [] as empty and works as is. Touch the group and leave it empty to see the error.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeCheckBoxGroup } from '@oge-ui/inputs';
import { FormField, form, minLength } from '@angular/forms/signals';
@Component({
selector: 'demo-root',
imports: [OgeCheckBoxGroup, FormField],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- Signal Forms' required() treats [] as a value, so "at least one"
is minLength(…, 1) with its own message. Reactive Validators.required
treats [] as empty and works as is. -->
<oge-check-box-group
label="Interests"
[items]="interests"
[formField]="f.interests"
/>
`,
})
export class Demo {
protected readonly interests = ['Design', 'Engineering', 'Product', 'Sales'];
protected readonly model = signal<{ interests: readonly unknown[] }>({ interests: [] });
protected readonly f = form(this.model, (p) => {
minLength(p.interests, 1, { message: 'Pick at least one interest' });
});
}