---
url: /documentation/input-types/checkboxes.md
description: >-
  Configure multi-value checkbox inputs with options, orientation, and isEmpty
  or hasChecked visibility conditions.
---

# Checkboxes Input

On / Off basic checkboxes.

```js
{
  input: {
    type: 'checkboxes', // [!code focus:12]
    options: [
      {
        value: 'opt1',
        label: 'Option 1',
        description: 'More info about this item.'
      },
      {
        value: 'opt2',
        label: 'Option 2'
      }
    ]
  }
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `options` | `Option[]` | - | An array containing the options. These options are by and large interchangeable with those from the [select input](select). |
| `orientation`  | `'horizontal' \| 'vertical'` | `'vertical'` | How the checkboxes are arranged. |

with

```ts
interface Option {
  /**
   * The value returned if the option is selected
   */
  value: string

  /**
   * The human readable name of the option
   */
  label: string

  /**
   * Additional information about the option
   */
  description?: string

  /**
   * Whether the option is preselected if no choice has been made
   * 
   * @deprecated Use the property definition's `defaultValue` instead
   */
  selected?: boolean
}
```

## Template Usage

The selected options will be stored as an object of boolean values.

For example, if `prop1` was checked and `prop2` was not:

```js
{
  prop1: false,
  prop2: true,
}
```

Therefore it can be used as a normal object:

```php
if ($element->properties->checkboxesProperty->prop1) {
	// ...
}
```

## Conditions

The `checkboxes` input type supports the following conditions for [dynamic visibility](/documentation/concepts/elements/definition#dynamic-visibility):

| Condition | Payload | Description |
| - | - | - |
| `isEmpty` | `boolean`defaults to `true` | Checks whether any option has been checked or not. |
| `hasChecked` | `string` | Checks whether the the given `payload` value has been checked. |