# MultiSelect

Source: /tuil/docs/reference/components/forms/multi-select
Locale: en

MultiSelect component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Field" />

## API and events [#api-and-events]

Connect semantic terminal controls to typed form state, validation, descriptions, errors, hints, and submission.

```tsx
export function MultiSelect<T extends string>({
  options,
  value,
  defaultValue,
  onValueChange,
  field: adaptedField,
  validators,
  onBlur,
  maxSelected,
  placeholder = "Select…",
  autoFocus,
  disabled = false,
  readOnly = false,
  ...props
}: MultiSelectProps<T>): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

| Member          | Type                                                                                                                                                                                                                      | Required | Description                                                                                                                                                                                                                                                         | Related types                                                                                                                                                                                |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`         | `readonly T[] \| undefined`                                                                                                                                                                                               | No       | The `value` member uses the `readonly T[] \| undefined` contract.                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `defaultValue`  | `readonly T[] \| undefined`                                                                                                                                                                                               | No       | The `defaultValue` member uses the `readonly T[] \| undefined` contract.                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `onValueChange` | `((value: readonly T[]) => void \| Promise<void>) \| undefined`                                                                                                                                                           | No       | The `onValueChange` member uses the `((value: readonly T[]) => void \| Promise<void>) \| undefined` contract.                                                                                                                                                       | —                                                                                                                                                                                            |
| `field`         | `AdaptedTanStackField<readonly T[]> \| undefined`                                                                                                                                                                         | No       | The `field` member uses the `AdaptedTanStackField<readonly T[]> \| undefined` contract.                                                                                                                                                                             | [`AdaptedTanStackField`](/tuil/docs/reference/packages/form/api/adapted-tan-stack-field)                                                                                                          |
| `validators`    | `FieldValidators<readonly T[]> \| undefined`                                                                                                                                                                              | No       | The `validators` member uses the `FieldValidators<readonly T[]> \| undefined` contract.                                                                                                                                                                             | [`FieldValidators`](/tuil/docs/reference/packages/form/api/field-validators)                                                                                                                      |
| `onBlur`        | `(() => void \| Promise<void>) \| undefined`                                                                                                                                                                              | No       | The `onBlur` member uses the `(() => void \| Promise<void>) \| undefined` contract.                                                                                                                                                                                 | —                                                                                                                                                                                            |
| `maxSelected`   | `number \| undefined`                                                                                                                                                                                                     | No       | The `maxSelected` member uses the `number \| undefined` contract.                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `options`       | `readonly SelectOption<T>[]`                                                                                                                                                                                              | Yes      | The `options` member uses the `readonly SelectOption<T>[]` contract.                                                                                                                                                                                                | —                                                                                                                                                                                            |
| `placeholder`   | `string \| undefined`                                                                                                                                                                                                     | No       | The `placeholder` member uses the `string \| undefined` contract.                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `searchable`    | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `searchable` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `autoFocus`     | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `autoFocus` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `variant`       | `string \| undefined`                                                                                                                                                                                                     | No       | The `variant` member uses the `string \| undefined` contract.                                                                                                                                                                                                       | —                                                                                                                                                                                            |
| `size`          | `"sm" \| "md" \| "lg" \| undefined`                                                                                                                                                                                       | No       | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract.                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `unstyled`      | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `unstyled` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `className`     | `string \| undefined`                                                                                                                                                                                                     | No       | The `className` member uses the `string \| undefined` contract.                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `layout`        | `Partial<Omit<LayoutNodeInput, "id" \| "children" \| "semantics">> \| undefined`                                                                                                                                          | No       | The `layout` member uses the `Partial<Omit<LayoutNodeInput, "id" \| "children" \| "semantics">> \| undefined` contract.                                                                                                                                             | —                                                                                                                                                                                            |
| `id`            | `string \| undefined`                                                                                                                                                                                                     | No       | The `id` member uses the `string \| undefined` contract.                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `testId`        | `string \| undefined`                                                                                                                                                                                                     | No       | The `testId` member uses the `string \| undefined` contract.                                                                                                                                                                                                        | —                                                                                                                                                                                            |
| `role`          | `SemanticRole \| undefined`                                                                                                                                                                                               | No       | The `role` member uses the `SemanticRole \| undefined` contract.                                                                                                                                                                                                    | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role)                                                                                                                            |
| `label`         | `string \| undefined`                                                                                                                                                                                                     | No       | The `label` member uses the `string \| undefined` contract.                                                                                                                                                                                                         | —                                                                                                                                                                                            |
| `description`   | `string \| undefined`                                                                                                                                                                                                     | No       | The `description` member uses the `string \| undefined` contract.                                                                                                                                                                                                   | —                                                                                                                                                                                            |
| `disabled`      | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `disabled` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `readOnly`      | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `readOnly` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `selected`      | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `selected` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `checked`       | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `checked` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                      | —                                                                                                                                                                                            |
| `expanded`      | `boolean \| undefined`                                                                                                                                                                                                    | No       | The `expanded` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `valueText`     | `string \| undefined`                                                                                                                                                                                                     | No       | The `valueText` member uses the `string \| undefined` contract.                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `slots`         | `Partial<SlotComponents<&#123; root: import("ink").BoxProps; indicator: import("ink").TextProps; list: import("ink").BoxProps; option: import("ink").TextProps; empty: import("ink").TextProps; &#125;>> \| undefined`    | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("ink").BoxProps; indicator: import("ink").TextProps; list: import("ink").BoxProps; option: import("ink").TextProps; empty: import("ink").TextProps; &#125;>> \| undefined` contract.        | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps`     | `Partial<SlotProps<&#123; root: import("ink").BoxProps; indicator: import("ink").TextProps; list: import("ink").BoxProps; option: import("ink").TextProps; empty: import("ink").TextProps; &#125;, object>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("ink").BoxProps; indicator: import("ink").TextProps; list: import("ink").BoxProps; option: import("ink").TextProps; empty: import("ink").TextProps; &#125;, object>> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |

Controls expose `onValueChange`, `onSubmit`, focus, selection, and validation callbacks.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

## Interaction and capabilities [#interaction-and-capabilities]

Text controls edit directly; choice controls use arrows and Space or Enter; `Form` coordinates validation and submission.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

## Complete import [#complete-import]

```tsx
import { MultiSelect } from "@/components/tuil/forms/controls";
```