Checkbox Component - fgta5js Documentation

Overview

Inheritance Notice: Class Checkbox inherits all of its core state tracking, validation logic, editing mode configurations, and event handlers from the abstract base class Input.

The Checkbox class wraps standard HTML checkbox elements within the fgta5js framework, adding custom styled representations, unified checked/unchecked event listeners, and automated change tracking.

Interactive Playground

Try interacting with the live component below and watch how the internal states change dynamically.

Live Preview

Component State

.value false

.InEditMode true

.getLastValue() false

.isChanged() false

HTML Markup

Define standard checkboxes in HTML. Mark the type as checkbox and add fgta5-component="Checkbox".

<form id="myform" locked="true">
  <!-- Checkbox Input -->
  <div class="demo-input-field" field="is_disabled">
    <label for="is_disabled">Account Is Disabled</label>
    <input id="is_disabled" fgta5-component="Checkbox" type="checkbox">
  </div>
</form>

Initialize and render the form in JavaScript:

const form = new $fgta5.Form('myform');
form.render()

HTML Attributes

Attribute	Values	Description
`type`	`"checkbox"`	Required configuration to define standard checkboxes.
`disabled`	N/A	Disables the checkbox, preventing user toggle interactions.
`permanent-disabled`	`"true"`	Permanently disables the checkbox even when the form is in edit mode.
`data-tabindex`	`Number`	Sets the native tabindex on the final checkbox input element for keyboard navigation.

Properties

Property	Type	Description
`value`	`Boolean`	Get or set the active checked status.
`InEditMode`	`Boolean`	Gets the current edit/readonly state of the component (Read-only). To modify, use `setEditingMode()`.
`disabled`	`Boolean`	Gets or sets the component disabled state.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Creates and binds a new `Checkbox` instance to the HTML element using the specified ID.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	Toggles editing mode. Setting to `false` locks the component as read-only and disables user inputs.
`suspend(doSuspend, keepState)`	`(doSuspend: Boolean, keepState: Boolean)`	Suspends or reactivates input interaction.
`isSuspended()`	`()`	Checks if the component is suspended.
`newData(initialvalue)`	`(initialvalue: Boolean \| Number \| String)`	Initializes the input with a new checked/unchecked status.
`getLastValue()`	`()`	Returns the last committed/saved boolean status.
`isChanged()`	`()`	Checks if the current `value` differs from the last saved state value.
`reset()`	`()`	Resets checkbox state back to the last saved checked value.