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 &amp; checked</hb-checkbox>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoCheckboxBasicComponent {}

Statuses & invalid

Sizes & shapes

Group

Selected: oak

API reference

hb-checkbox

PropertyDescriptionTypeDefault
[(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

PropertyDescriptionTypeDefault
[(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[]