Checkbox
@xui/core/checkboxA tri-state checkbox. It is a ControlValueAccessor, so ngModel and reactive forms bind straight to it, and indeterminate renders the mixed state a parent checkbox needs.
Install
pnpm add @xui/core/checkboxExamples
This package has no Storybook story yet, so there is nothing to render here. The API below is still extracted from the source.
API
The headless checkbox: a role="checkbox" button with tri-state semantics and a ControlValueAccessor, and no styling of its own.
Inputs
checkedbooleanCurrent checked state of checkbox. Can be bound with [(checked)] for two-way binding; emits checkedChange.falseindeterminatebooleanThe mixed state: neither checked nor unchecked. Two-way bindable, and cleared as soon as the user toggles the box.falseidstring | nullUnique identifier for a checkbox component. When provided, the inner button gets ID without '-checkbox' suffix. Auto-generates ID if not provided.uniqueId('x-checkbox')namestring | nullForm control name for checkbox. When provided, the inner button gets the name without '-checkbox' suffix.nullclassstring | nullCSS classes applied to the inner button element.nullariaLabelstring | nullAccessibility label for screen readers. Use when no visible label exists.nullariaLabelledbystring | nullID of an element that labels this checkbox for accessibility. Auto-set when a checkbox is inside a label element.nullariaDescribedbystring | nullID of the element that describes this checkbox for accessibility.nullrequiredbooleanWhether a checkbox is required in a form.falsedisabledbooleanWhether the checkbox is disabled. Disabled checkboxes cannot be toggled and indicate the disabled state through a data-disabled attribute.falseOutputs
touchedvoidEvent emitted when the checkbox is blurred (loses focus). Used for form validation.Methods
toggle()Toggles checkbox between checked/unchecked states. If the checkbox is indeterminate, sets to check. Does nothing if the checkbox is disabled.ngAfterContentInit()ngOnDestroy()writeValue(value: boolean): voidUpdates internal state when control value changes from outside. Handles boolean and 'indeterminate' values. Part of ControlValueAccessor interface.registerOnChange(fn: XChangeFn<boolean>): voidRegisters callback for value changes. Part of ControlValueAccessor interface.registerOnTouched(fn: XTouchFn): voidRegisters callback for touched events. Part of ControlValueAccessor interface.setDisabledState(isDisabled: boolean): voidUpdates disabled state from form control. Part of ControlValueAccessor interface.