Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Enable notifications

You can enable or disable notifications at any time.

import { Component } from '@angular/core';
import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-checkbox-preview',
	imports: [HlmLabelImports, HlmCheckboxImports],
	template: `
		<div class="flex flex-col gap-6">
			<div class="flex items-center gap-3">
				<hlm-checkbox id="terms" />
				<label hlmLabel for="terms">Accept terms and conditions</label>
			</div>
			<div class="flex items-start gap-3">
				<hlm-checkbox id="terms-2" [checked]="true" />
				<div class="grid gap-2">
					<label hlmLabel for="terms-2">Accept terms and conditions</label>
					<p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
				</div>
			</div>
			<div class="flex items-start gap-3">
				<hlm-checkbox id="toggle" disabled />
				<label hlmLabel for="toggle">Enable notifications</label>
			</div>
			<label
				class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
			>
				<hlm-checkbox
					id="toggle-2"
					[checked]="true"
					class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
				/>
				<div class="grid gap-1.5 font-normal">
					<p class="text-sm leading-none font-medium">Enable notifications</p>
					<p class="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
				</div>
			</label>
		</div>
	`,
})
export class CheckboxPreview {}

Installation

npx nx g @spartan-ng/cli:ui checkbox

Usage

import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';

<hlm-checkbox />

Brain API

BrnCheckbox

Selector: brn-checkbox

Inputs

Prop	Type	Default	Description
id	string \| null	++uniqueIdCounter +	Unique identifier for checkbox component. When provided, inner button gets ID without '-checkbox' suffix. Auto-generates ID if not provided.
name	string \| null	null	Form control name for checkbox. When provided, inner button gets name without '-checkbox' suffix.
class	string \| null	null	CSS classes applied to inner button element.
aria-label	string \| null	null	Accessibility label for screen readers. Use when no visible label exists.
aria-labelledby	string \| null	null	ID of element that labels this checkbox for accessibility. Auto-set when checkbox is inside label element.
aria-describedby	string \| null	null	ID of element that describes this checkbox for accessibility.
required	boolean	false	Whether checkbox is required in a form.
disabled	boolean	false	Whether checkbox is disabled. Disabled checkboxes cannot be toggled and indicate disabled state through data-disabled attribute.
checked	boolean	false	The checked state of the checkbox. Can be bound with [(checked)] for two-way binding.
indeterminate	boolean	false	-

Outputs

Prop	Type	Default	Description
checkedChange	boolean	-	Emits when checked state changes.
touched	void	-	Event emitted when checkbox is blurred (loses focus). Used for form validation.
checkedChanged	boolean	false	The checked state of the checkbox. Can be bound with [(checked)] for two-way binding.
indeterminateChanged	boolean	false	-

Helm API

HlmCheckbox

Selector: hlm-checkbox

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
id	string \| null	null	Used to set the id on the underlying brn element.
aria-label	string \| null	null	Used to set the aria-label attribute on the underlying brn element.
aria-labelledby	string \| null	null	Used to set the aria-labelledby attribute on the underlying brn element.
aria-describedby	string \| null	null	Used to set the aria-describedby attribute on the underlying brn element.
name	string \| null	null	The name attribute of the checkbox.
required	boolean	false	Whether the checkbox is required.
disabled	boolean	false	Whether the checkbox is disabled.
checked	boolean	false	The checked state of the checkbox.
indeterminate	boolean	false	The indeterminate state of the checkbox. For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked.

Outputs

Prop	Type	Default	Description
checkedChange	boolean	-	Emits when checked state changes.
checkedChanged	boolean	false	The checked state of the checkbox.
indeterminateChanged	boolean	false	The indeterminate state of the checkbox. For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked.

Collapsible

Carousel