# CheckBox

Use a CheckBox to give the user an option, such as true/false or yes/no. The CheckBox control can display an image or text or both.

CheckBox and RadioButton controls serve similar functions: they allow users to choose from a list of options. CheckBox controls let users pick multiple options simultaneously, while RadioButton controls restrict users to one choice from mutually exclusive options.

The `Appearance` property determines whether the CheckBox appears as a typical CheckBox, a button, or as a switch.

The `ThreeState` property determines whether the control supports two or three states. Use the `Checked` property to get or set the value of a two-state CheckBox control and the `CheckState` property to get or set the value of a three-state CheckBox control.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Check States

The Checkbox features three preset check states: `Checked`, `Unchecked`, and `Indeterminate`. These can be toggled using the `CheckState` property.

![Checkbox control demonstrating the three possible check states](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-2c461fb41f14229d93db712a2f0b84d678a13200%2Fimage.png?alt=media)

### Check Alignment

The Checkbox icon can be configured to show on the left or right side of the text.

![Checkbox control showing different text alignment options](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-726daf9cc544b61f8db9f4dcb6bc7303d906ea6e%2Fimage.png?alt=media)

### Icons

Icons can be placed in various positions around the checkbox including above, below, beside, and more.

![Animated demonstration of checkbox icon positioning options](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-ef420d7d8167d573b6809a4c864d56b466983bc0%2FCheckBoxIcons.gif?alt=media)

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                                       |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.CheckBox"                                                                                                              |
| Theme appearance | "checkbox", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                           |
| Child components | "icon" is the checkbox icon, "label" is the text. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)               |