---
title: "Multiselect Field"
description: "Also called 'checkbox field'. This component is a list of checkable items. In this case, a user can choose one, many, all, or no options."
sidebar_label: "Multiselect Field"
slug: /reference/components/multiselect-field
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Multiselect Field

Also called 'checkbox field'. This component is a list of checkable items. In this case, a user can choose one, many, all, or no options.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `MultiselectFieldProps`  
**Story source:** [`demo/stories/MultiselectField.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/MultiselectField.stories.tsx)

## Live demo

<ComponentDemo name="Multiselect Field" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `reflection` | Yes | The function to call when the selected values change. |
| `options` | `array` | Yes | The available options for the multiselect field. |
| `title` | `string` | Yes | The title of the multiselect field. |
| `value` | `array` | Yes | The selected values of the multiselect field. |
| `disabled` | `boolean` |  | The disabled state of multiselect. Removes checkboxes and only shows the values. |
| `errorText` | `string` |  |  |
| `helperText` | `string` |  |  |
| `testID` | `string` |  | Root test id for the primary interactive element or container. |
| `testIDs` | `FieldTestIDs` |  |  |
| `variant` | `union` |  | The variant of the multiselect field, which determines the position of the text. |