# API of `@koobiq/components/toggle`

Documented on [Toggle](https://koobiq.io/en/components/toggle.md). NgModule: `KbqToggleModule`.

## Components

### KbqToggleComponent (component)

A switch for turning an option on or off.

To show a validation error, put its text in a `kbq-error` inside the toggle bound to a form control.

```ts
@Component({ selector: 'kbq-toggle', exportAs: 'kbqToggle' })
class KbqToggleComponent extends KbqColorDirective implements CanUpdateErrorState {
    readonly errorStateMatcher = input<ErrorStateMatcher>();
    readonly big = input<boolean>(false);
    readonly labelPosition = input<ToggleLabelPositionType>('right');
    readonly ariaLabel = input<string>('', { alias: 'aria-label' });
    readonly ariaLabelledby = input<string | null>(null, {
        alias: 'aria-labelledby'
    });
    id = input<string | undefined>();
    readonly name = input<string | null>(null);
    readonly value = input<string | undefined>();
    disabled = input<boolean | undefined>();
    checked = input<boolean | undefined>();
    indeterminate = model<boolean | undefined>();
    readonly loading = input<boolean>(false);
    clickAction = input<KbqToggleClickAction | undefined>();
    readonly color = input<T | null | undefined>();
    readonly change = output<KbqToggleChange>();
    readonly errorState: Signal<boolean>;
    readonly inputElement: Signal<ElementRef<HTMLInputElement>>;
    get inputId(): string;
    get colorClassName(): string;
    updateErrorState(): void;
    focus(): void;
    getAriaChecked(): KbqCheckedState;
    onChangeEvent(event: Event): void;
    /** @deprecated */
    onLabelTextChange(): void;
    onInputClick(event: MouseEvent): void;
    setDefaultColor(color: T): void;
}
```

- `[errorStateMatcher]`: `ErrorStateMatcher` — An object used to control when the error state is shown.
- `[(indeterminate)]`: `boolean | undefined` — Whether the toggle 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.
- `[loading]`: `boolean` — Property for manually set loading state.
- `[clickAction]`: `KbqToggleClickAction | undefined` — Defines the behavior when a user clicks on the toggle.
- `[color]`: `T | 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.
- `errorState`: `Signal<boolean>` — Whether the toggle is in an error state.
- `colorClassName`: `string` — current class name of color
- `updateErrorState()`: `void` — Updates the error state based on the error state matcher.
- `onLabelTextChange()`: `void` — Does nothing: the view reads nothing from the label, so a change of it needs no re-check.

  Deprecated: Kept for back-compatibility. Will be removed in 22.0.0.
- `setDefaultColor()`: `void` — this color will be used as a default value. For example [color]="'' | false | undefined | null".

## Classes

### KbqToggleChange (class)

Change event object emitted by `KbqToggleComponent`.

```ts
class KbqToggleChange {
    source: KbqToggleComponent;
    checked: boolean;
}
```

- `source`: `KbqToggleComponent` — The source toggle of the event.
- `checked`: `boolean` — The new `checked` value of the toggle.

## Types

### KbqToggleClickAction (type)

Toggle click action when user click on input element. Alias of `KbqCheckableClickAction`.

```ts
type KbqToggleClickAction = KbqCheckableClickAction;
```

### ToggleLabelPositionType (type)

Position of the label relative to the switch.

```ts
type ToggleLabelPositionType = 'left' | 'right';
```