Checkbox
A control that allows the user to toggle between checked and not checked.
import { Component } from '@angular/core';
import { HlmCheckboxCheckIconComponent, HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
@Component({
selector: 'spartan-checkbox-preview',
standalone: true,
imports: [HlmLabelDirective, HlmCheckboxComponent ],
template: `
<label class="flex items-center" hlmLabel>
<hlm-checkbox class="mr-2" />
Accept terms and conditions
</label>
`,
})
export class CheckboxPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui checkbox
ng g @spartan-ng/cli:ui checkbox
Usage
import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';<hlm-checkbox />Examples
Own Icon
Make sure to provide the Icon.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideMoon } from '@ng-icons/lucide';
import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
@Component({
selector: 'spartan-checkbox-own-icon',
standalone: true,
imports: [HlmLabelDirective, HlmCheckboxComponent],
providers: [provideIcons({ lucideMoon })],
template: `
<label class="flex items-center" hlmLabel>
<hlm-checkbox class="mr-2" checkIconName="lucideMoon" />
Accept terms and conditions
</label>
`,
})
export class CheckboxOwnIconComponent {}