Checkbox

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

Default

The standard checkbox component.

Disabled

Checkboxes in a disabled state.

With Form

Integration with ngModel for reactive state management.

Checked state: false

Complex Layouts & Colors

Using checkboxes inside cards and applying custom Tailwind CSS colors.

Notifications

Manage your alert preferences.

Receive daily updates via email.

Get instant text messages for critical events.

Favorite Colors

Custom styled checkboxes.

Installation & Usage

Installation

Imports

Basic Skeleton

API Reference

Brain API

The brain directives provide the functional logic and accessibility for the checkbox.

DirectiveSelectorInputs / Outputs
BrnCheckbox[brnCheckbox]
  • checked: boolean | 'indeterminate'
  • disabled: boolean
  • required: boolean
  • id: string
  • name: string
  • changed: EventEmitter<boolean | 'indeterminate'>

Helm API

The helm components provide the default spartan/ui styling.

Component / DirectiveSelectorDescription
HlmCheckboxhlm-checkboxThe main styled checkbox component.
HlmCheckboxCheckIconhlm-checkbox-check-iconThe icon displayed when checked.