Checkbox class

📖 Description

The Checkbox class defines a checkbox control for the Tripetto builder. It is derived from the DataControl class.

📺 Preview

---

🆕 constructor

Creates a new Checkbox instance.

Signature

constructor(
  label: string,
  checked?: boolean | Binding,
  style?: ICheckboxStyle
): Checkbox

Parameters

Name	Type	Optional	Description
label	string	No	Specifies the label.
checked	boolean | Binding	Yes	Specifies the checkbox state or a data binding created with bind.
style	ICheckboxStyle	Yes	Specifies the style (when omitted the default global style will be used).

Return value

Returns a reference to the new Checkbox instance.

📌 Statics

---

🏷️ style

Contains the global default style for the checkbox control.

Type

ICheckboxStyle

---

🔧 bind

Binds an object property to the control allowing its value to update automatically when the value of the control changes. If the control is disabled or invisible, the supplied valueWhenInactive is automatically set as the property value. When a control is enabled and visible, the supplied defaultWhenActive is set automatically if the property value is currently not defined.

Signature

bind<Target, P extends keyof Target>(
  target: Target,
  property: P,
  valueWhenInactive: boolean,
  defaultWhenActive?: boolean,
  modifier?: (value?: boolean) => boolean
): Binding;

Parameters

Name	Type	Optional	Description
target	Target	No	Reference to the target object which contains the property.
property	P	No	Specifies the name of the property.
valueWhenInactive	boolean	No	Specifies the value which is set to the property when the control is inactive (disabled or invisible).
defaultWhenActive	boolean	Yes	Specifies the default (initial) value that will be used when the control is active (enabled and visible).
modifier	(value?: boolean) => boolean	Yes	Specifies a modifier function for the data.

Return value

Returns a Binding instance that can be used in the controls constructor to bind a value to a control.

Example

import { Forms } from "@tripetto/builder";

const example = {
  state: false
};

const checkbox = new Forms.Checkbox(
  "Toggles the state in the example object",
  Forms.Checkbox.bind(example, "state", false));

🗃️ Fields

---

🏷️ hasFocus

Retrieves if the control has input focus.

Type

boolean

---

🏷️ isChecked

Sets or retrieves the checkbox state.

Type

boolean

---

🏷️ isDisabled

Sets or retrieves if the control is disabled.

Type

boolean

---

🏷️ isLocked

Sets or retrieves if the control is locked (readonly).

Type

boolean

---

🏷️ isObservable

Retrieves if the control is observable.

Type

boolean

---

🏷️ isVisible

Sets or retrieves the visibility of the control.

Type

boolean

---

🏷️ style

Contains the checkbox style.

Type

ICheckboxStyle

▶️ Methods

---

🔧 blur

Blurs the focus of the control.

Signature

blur(): void

---

🔧 checked

Sets the checked state of the checkbox.

Signature

checked(checked?: boolean): this

Parameters

Name	Type	Optional	Description
checked	boolean	Yes	Specifies the state.

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 check

Checks the checkbox.

Signature

check(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 description

Sets a description for the control.

Signature

description(description: string): this

Parameters

Name	Type	Optional	Description
description	string	No	Specifies the description string.

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 disable

Disables the control.

Signature

disable(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 disabled

Specifies the state of the control.

Signature

disabled(disabled?: boolean): this

Parameters

Name	Type	Optional	Description
disabled	boolean	Yes	Specifies if the control is disabled (default is true).

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 enable

Enables the control.

Signature

enable(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 focus

Sets the focus to the control.

Signature

focus(): boolean

Return value

Returns true if the focus is set.

---

🔧 hide

Hides the control.

Signature

hide(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 indent

Enables control indentation. This can only be set during construction.

Signature

indent(size: number): this

Parameters

Name	Type	Optional	Description
size	number	No	Specifies the indent size in pixels.

Return value

Returns a reference to the Control instance to allow chaining.

---

🔧 label

Sets the label for the control.

tip

If you want to use markdown in the label, activate it first using the markdown method.

Signature

label(label: string): this

Parameters

Name	Type	Optional	Description
label	string	No	Specifies the control label.

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 lock

Locks the control.

Signature

lock(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 locked

Specifies if the control is locked (readonly).

Signature

locked(locked?: boolean): this

Parameters

Name	Type	Optional	Description
locked	boolean	Yes	Specifies if the control is locked/readonly (default is true).

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 markdown

Specifies if the label should support markdown formatting.

Signature

markdown(options?: IMarkdownOptions): this

Parameters

Name	Type	Optional	Description
options	IMarkdownOptions	Yes	Specifies the markdown options.

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 on

Specifies the function which is invoked when the checkbox is toggled.

Signature

on(fn: (checkbox: Checkbox) => void): this

Parameters

Name	Type	Optional	Description
fn	(checkbox: Checkbox) => void	No	Specifies the toggle function.

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 readonly

Makes the control readonly.

Signature

readonly(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 show

Shows the control.

Signature

show(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 toggle

Toggles the checkbox.

Signature

toggle(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 uncheck

Unchecks the checkbox.

Signature

uncheck(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 unlock

Unlocks the control.

Signature

unlock(): this

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 visible

Specifies the visibility of the control.

Signature

visible(visible?: boolean): this

Parameters

Name	Type	Optional	Description
visible	boolean	Yes	Specifies if the control is visible (default is true).

Return value

Returns a reference to the Checkbox instance to allow chaining.

---

🔧 width

Sets the width of the control.

Signature

width(width: number): this

Parameters

Name	Type	Optional	Description
width	number	No	Specifies the control width in pixels.

Return value

Returns a reference to the Checkbox instance to allow chaining.

⛓️ Interfaces

---

🔗 ICheckboxStyle

Describes the interface for the checkbox styles.

Type declaration

interface ICheckboxStyle {
  /* Checkbox appearance. */
  appearance?: IStyles;

  /* Checkbox label. */
  label?: IStyles;

  /* Checkbox description. */
  description?: IStyles;

  /* Checked state. */
  checked?: IStyles;

  /* Unchecked state. */
  unchecked?: IStyles;

  /* Checkbox disabled. */
  disabled?: ICheckboxStyles;

  /* Checkbox required. */
  required?: ICheckboxStyles;

  /* Checkbox locked. */
  locked?: ICheckboxStyles;

  /* Checkbox focus. */
  focus?: ICheckboxStyles;

  /* Checkbox hover. */
  hover?: ICheckboxStyles;

  /* Validation passed. */
  passed?: ICheckboxStyles;

  /* Validation failed. */
  failed?: ICheckboxStyles;

  /* Validation awaiting. */
  awaiting?: ICheckboxStyles;

  /* Fused with form card. */
  fused?: {
    /* Checkbox appearance. */
    appearance?: IStyles;

    /* Checkbox required. */
    required?: IStyles;

    /* Checkbox focus. */
    focus?: ICheckboxStyles;

    /* Checkbox hover. */
    hover?: ICheckboxStyles;
  };
}