Component
Checkbox
A toggle for a single option or a set. It supports checked, unchecked, and indeterminate states, status colours, sizes, and shapes, and gathers several into a value array with hb-checkbox-group.
States
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HbCheckboxImports } from '@herbst/ui';
@Component({
selector: 'hb-demo-checkbox-basic',
imports: [HbCheckboxImports],
template: `
<div class="flex flex-col gap-3">
<hb-checkbox>Unchecked</hb-checkbox>
<hb-checkbox [hbChecked]="true">Checked</hb-checkbox>
<hb-checkbox [hbIndeterminate]="true">Indeterminate</hb-checkbox>
<hb-checkbox hbDisabled>Disabled</hb-checkbox>
<hb-checkbox [hbChecked]="true" hbDisabled>Disabled & checked</hb-checkbox>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoCheckboxBasicComponent {}
Statuses & invalid
Sizes & shapes
Group
Selected: oak
API reference
hb-checkbox
| Property | Description | Type | Default |
|---|---|---|---|
| [(hbChecked)] | Two-way checked state. | boolean | false |
| [(hbIndeterminate)] | Two-way indeterminate (partial) state. | boolean | false |
| [hbValue] | Value contributed to the parent hb-checkbox-group. | unknown | null |
| [hbStatus] | Colour intent of the box. | 'default' | 'error' | 'success' | 'warning' | 'default' |
| [hbSize] | Size of the box. | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
| [hbShape] | Corner style of the box. | 'square' | 'rounded' | 'circle' | 'square' |
| [hbDisabled] | Disable the checkbox. | boolean | false |
| [hbInvalid] | Mark the checkbox as invalid (aria-invalid). | boolean | false |
| [hbCheckboxIndicator] | Template directive to replace the default check icon. | template | — |
hb-checkbox-group
| Property | Description | Type | Default |
|---|---|---|---|
| [(hbValue)] | Array of the values of the checked children. | unknown[] | [] |
| [hbOrientation] | Lay the checkboxes in a column or a row. | 'vertical' | 'horizontal' | 'vertical' |
| [hbDisabled] | Disable every checkbox in the group. | boolean | false |
| (hbChange) | Emits the value array when the selection changes. | unknown[] | — |