---
title: "multiple-choice-checklist"
description: "Select multiple options from a checklist."
permalink: /docs/runtime/all-ui-components/multiple-choice-checklist/
---
# multiple-choice-checklist
Refreshed the component's appearance and added the `disabled` attribute.
## Overview
`multiple-choice-checklist` allows users to select multiple options from a list.
### Basic Example
**main.view\.xml**
```xml
```
## Data and events
### `bind`
Bind to a `multiple-choice` or `multiple-choice-integer` field or variable.
### `label`
### `required`
Defaults to `false`. Set to `true` and use a validating button or action (`validate="true"`) to require a value before its handler runs.
### `on-change`
When using `multiple-choice-integer` you can omit the key attribute on options. The array passed to the function assigned to `on-change` will correspond to the key starting from `0.` E.g. `[0, 2]` corresponds to first and third options.
### `disabled`
## Input behavior
### `modifier-text`
## Appearance and visibility
### `checkbox-position`
Specify where the checkbox is positioned in the component (relative to the option label).
**main.view\.xml**
```xml
checkbox-position="left"checkbox-position="right"
```
### `mode`
Configure the layout of the list of check box options. `row` lists options horizontally; `column` lists options vertically.
### `align-content`
### `align-label`
### `id`
### `label-case`
### `label-color`
### `show-if`
### `hide-if`
## Component Methods
The following component methods are available when an [`id`](/docs/runtime/common-component-attributes/id/) is assigned to the component and `component.multipleChoiceChecklist({id:'my-id'})` is called from JS/TS:
### `clear`
Clear the selected option(s) of the `multiple-choice-checklist`.
### `scrollIntoView`
Programmatically scroll until the `multiple-choice-checklist` is visible in the view.
### `selectItem`
Select an item by its label of the list of options of the `multiple-choice-checklist`.
**main.view\.xml**
```xml
```
**main.js**
```javascript
function select() {
component.multipleChoiceChecklist({id: 'my-checklist'}).selectItem('Yellow');
}
```
### `selectItemByIndex`
Select an item by its index of the list of options of the `multiple-choice-checklist`. **Note**: Indexes begin at 1.
**main.view\.xml**
```xml
```
**main.js**
```javascript
function select() {
component.multipleChoiceChecklist({id: 'my-checklist'}).selectItemByIndex(2);
// Selects "Red"
}
```