Checkbox

live example

Explore the API in the live example.

api reference

Checkbox(name[, parent])

The checkbox control widget. Inherits all API from the [Widget] ../components/widget.html component. The checkbox is constrained to a rectangle defined by the width/height and the margins. By default the checkbox is positioned on the top left corner of its bounding box and can be adjusted by the margins. The label is bounded by the inner width (widget width minus the side margins).

Parameters

Name	Type	Description
name	string	Name of the widget. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

Checkbox.callback(callback)

Binds a callback to the checkbox.

Parameters

Name	Type	Description
callback	Function	Function to call when the checkbox is checked/unchecked. The checked status is passed to the method as parameter.

Returns

Checkbox

Reference to the Checkbox API.

Examples

// Bind method to checkbox.
const checkbox = dalian.Checkbox('my-control')
  .callback(console.log)
  .render()

// Remove callback.
checkbox.callback()
  .render()

Checkbox.check(on)

Checks/unchecks the checkbox.

Parameters

Name	Type	Description
on	boolean	Whether to check the box.

Returns

Checkbox

Reference to the Checkbox API.

Examples

// Set the box checked.
const checkbox = dalian.Checkbox('my-control')
  .check(true)
  .render()

// Uncheck the box.
checkbox.check(false)
  .render()

Checkbox.color([color])

Sets the checkbox color.

Parameters

Name	Type	Description
color	string	optionalColor to set. Default value is `grey`.

Returns

Checkbox

Reference to the Checkbox API.

Examples

// Set color.
const checkbox = dalian.Checkbox('my-control')
  .color('yellowgreen')
  .render()

// Reset color.
checkbox.color()
  .render()

Checkbox.disable([on])

Disables/enables the checkbox. If disabled, the checkbox cannot be interacted with.

Parameters

Name	Type	Description
on	boolean	optionalWhether to disable the checkbox or not. Default value is `false`.

Returns

Checkbox

Reference to the Checkbox API.

Examples

// Disable checkbox.
const checkbox = dalian.Checkbox('my-control')
  .disable(true)
  .render()

// Enable checkbox.
checkbox.disable()
  .render()

Checkbox.label([text])

Sets the checkbox label.

Parameters

Name	Type	Description
text	string	optionalLabel text. Default value is `''`.

Returns

Checkbox

Reference to the Checkbox API.

Examples

// Set checkbox label.
const checkbox = dalian.Checkbox('my-control')
  .label('Check me!')
  .render()

// Reset label.
checkbox.label()
  .render()