---
title: "Perspective - Checkbox"
description: "A Checkbox is a familiar component that represents a bit - it is either on (selected) or off (not selected)."
---

# Perspective - Checkbox

> A Checkbox is a familiar component that represents a bit - it is either on (selected) or off (not selected).

![](img1.png)

**Component Palette Icon**:  

![](img2.png)

## Description

A Checkbox is a familiar component that represents a bit - it is either on (selected) or off (not selected). In addition, the 'triState' property can be enabled, adding a third state to represent an indeterminate value. It is functionally equivalent to the Toggle Switch component.

 

The DateTime Picker component has two pre-configured [variants](../../../../../ignition-modules/perspective/working-with-perspective-components/working-with-perspective-components.md): Text Right and Text left.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name              | Description     | Property Type  |
| ----------------- | ---------------- | -------------- |
| selected  | Output value for checkbox.   | value: boolean |
| text | Label for the checkbox. Label text can also be entered directly by deep selecting the checkbox component, which enables inline editing. Changes are immediately reflected in the text property field. | value: string  |
| textPosition      | Where to place the label text in relation to the checkbox: top, right, bottom, or left.     | value: string  |
| enabled | Whether the user can currently interact with the checkbox.**Note:** If the component is disabled, scripts can still run on the component. For example, if you add a [script action](../../../../../ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md#script-action) to the onClick event, the script will fire when the user clicks on the Checkbox. | value: boolean |
| triState   | Whether the checkbox supports a third state of "indeterminate" - effectively 'null' or 'no choice'.   | value: boolean |
| checkedIcon  | Settings for the appearance of the check box's icon when it is selected (checked).**path**: Path to the icon source, in format: library/IconName. For more information on icons, see the [Images, and Icons in Perspective](../../../../../ignition-modules/perspective/working-with-perspective-components/images-and-icons-in-perspective.md) page. Value is string.**color**: Settings for the fill color for the icon.**enabled**: Color of the icon when enabled. Can be a named color. Value is string.**disabled**: Color of the icon when disabled. Can be a named color. Value is string.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object         |
| uncheckedIcon  | Settings for the appearance of the check box's icon when it is not selected.**path**: Path to the icon source, in format: library/IconName. For more information on icons, see the [Images, and Icons in Perspective](../../../../../ignition-modules/perspective/working-with-perspective-components/images-and-icons-in-perspective.md) page. Value is string.**color**: Settings for the fill color for the icon.**enabled**: Color of the icon when enabled. Can be a named color. Value is string.**disabled**: Color of the icon when disabled. Can be a named color. Value is string.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object         |
| indeterminateIcon | Settings for the appearance of the check box's icon when it is in the indeterminate state. Only applies if props.triState is set to true.**path**: Path to the icon source, in format: library/IconName. For more information on icons, see the [Images, and Icons in Perspective](../../../../../ignition-modules/perspective/working-with-perspective-components/images-and-icons-in-perspective.md) page. Value is string.**color**: Settings for the fill color for the icon.**enabled**: Color of the icon when enabled. Can be a named color. Value is string.**disabled**: Color of the icon when disabled. Can be a named color. Value is string.**style**: Sets a style for the icon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object         |
| style     | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Examples

### Example 1

![](img3.png)

|Property|Value|
|--|--|
|props.text|	Checkbox 1|
|props.textPosition	|left|
|props.triState	|true|

### Example 2

![](img4.png)

|Property|Value|
|--|--|
|props.text|	Checkbox 2|
|props.textPosition	|left|
|props.selected|	null|

### Example 3

![](img5.png)

|Property|Value|
|--|--|
|props.text|	Checkbox 3|
|props.textPosition|	top|
|props.enabled	|false|
|props.selected|false|