import { KbqCheckboxModule } from '@koobiq/components/checkbox';A Koobiq checkbox component. Supports all of the functionality of an HTML5 checkbox, and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or disabled. Note that all additional accessibility attributes are taken care of by the component, so there is no need to provide them yourself. However, if you want to omit a label and still have the checkbox be accessible, you may supply an [aria-label] input.
To show a validation error, put its text in a kbq-error inside the checkbox bound to a form control.
@Component({ selector: 'kbq-checkbox', exportAs: 'kbqCheckbox' }) class KbqCheckbox extends KbqColorDirective implements CanUpdateErrorState { readonly errorStateMatcher = input<ErrorStateMatcher>(); readonly big = input<boolean>(false); readonly id = input<string>(this.uniqueId); readonly labelPosition = input<'before' | 'after'>('after'); readonly name = input<string | null>(null); readonly value = input<string>(); readonly clickAction = input<KbqCheckboxClickAction>( inject(KBQ_CHECKBOX_CLICK_ACTION, { optional: true }) || undefined ); readonly required = input<boolean>(false); checked = input<boolean | undefined>(); disabled = input<boolean | undefined>(); indeterminate = model<boolean | undefined>(); readonly color = input<T | null | undefined>(); readonly change = output<KbqCheckboxChange>(); readonly errorState: Signal<boolean>; get colorClassName(): string; updateErrorState(): void; toggle(): void; focus(): void; setDefaultColor(color: T): void; }
errorStateMatcherErrorStateMatcher An object used to control when the error state is shown.
bigboolean Whether the checkbox uses the big size.
idstring A unique id for the checkbox input. If none is supplied — or null is bound explicitly — it is
auto-generated, so a read always yields the id the element actually carries.
labelPosition'before' | 'after' Whether the label should appear after or before the checkbox. Defaults to 'after'
namestring | null Name value will be applied to the input element if present
valuestring The value attribute of the native input element
clickActionKbqCheckboxClickAction Defines the behavior when a user clicks on the checkbox.
requiredboolean Whether the checkbox is required.
checkedboolean | undefined Whether the checkbox is checked.
disabledboolean | undefined Whether the checkbox is disabled.
indeterminateboolean | undefined Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately set to false.
colorT | null | undefined Color of the component. A value set in code holds until the input changes, and the default color is used while both are unset or falsy.
changeKbqCheckboxChange Event emitted when the checkbox's checked value changes.
errorStateSignal<boolean> Whether the checkbox is in an error state.
colorClassNamestring current class name of color
updateErrorState()void Updates the error state based on the error state matcher.
toggle()void Toggles the checked state of the checkbox.
focus()void Focuses the checkbox.
setDefaultColor()void this color will be used as a default value. For example [color]="'' | false | undefined | null".
Validator for koobiq checkbox's required attribute in template-driven checkbox.
Current CheckboxRequiredValidator only work with input type=checkbox and does not
work with kbq-checkbox.
@Directive({ selector: 'kbq-checkbox[required][formControlName], kbq-checkbox[required][formControl], kbq-checkbox[required][ngModel]' }) class KbqCheckboxRequiredValidator extends CheckboxRequiredValidator { required: string | boolean; }
Change event object emitted by KbqCheckbox.
class KbqCheckboxChange { source: KbqCheckbox; checked: boolean; }
sourceKbqCheckbox The source KbqCheckbox of the event.
checkedboolean The new checked value of the checkbox.
Checkbox click action when user click on input element.
noop: Do not toggle checked or indeterminate.
check: Only toggle checked status, ignore indeterminate.
check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
undefined: Same as check-indeterminate.
type KbqCheckboxClickAction = KbqCheckableClickAction;Injection token that can be used to specify the checkbox click behavior.
const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckboxClickAction>;const KBQ_CHECKBOX_REQUIRED_VALIDATOR: Provider;