# MCombobox

A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `modelValue*` | The current selected value(s) of the combobox. | `string` `number` `(string` `number)[]` `null` | - |
| `multiple` | Enable multiple selection mode. | `boolean` | - |
| `size` | Size of the combobox: small ('s') or medium ('m'). | `"s"` `"m"` | `"m"` |
| `disabled` | Disable the combobox input. | `boolean` | - |
| `readonly` | Make the combobox read-only. | `boolean` | - |
| `invalid` | Mark the combobox as invalid. | `boolean` | - |
| `clearable` | Show a clear selection button. | `boolean` | - |
| `search` | Enable the search input inside the listbox. | `boolean` | - |
| `actions` | Show select all / clear buttons when multiple. | `boolean` | - |
| `checkableSections` | Enable checkable section headers in the listbox. | `boolean` | - |
| `placeholder` | Placeholder text when no value is selected. | `string` | `"Select an option"` |
| `counterLabel` | Label for the selected items counter. | `string` | - |
| `searchPlaceholder` | Placeholder text for the search input. | `string` | `"Find an option..."` |
| `selectLabel` | Label for the "Select all" button. | `string` | `"Select all"` |
| `clearLabel` | Label for the "Clear selection" button. | `string` | `"Clear"` |
| `options*` | Array of options to display in the listbox. | `ListboxOption[]` | - |
| `controlAriaLabel` | Accessible label for the combobox trigger button. Should describe what
the combobox selects (e.g. "Select a country"). | `string` | `"Combobox input"` |
| `clearAriaLabel` | Accessible label for the clear selection button. | `string` | `"Clear selection"` |
| `open` | Controls the open state of the listbox. When provided, the component operates in controlled
mode and delegates open/close decisions to the parent via `v-model:open`. When omitted, the
component manages its own open state internally. | `boolean` | - |

## Slots

| Name | Description |
| --- | --- |
| `item` | Use this slot to customize the content of each item. |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | - | `[value: string` `number` `(string` `number)[]` `null]` |
| `update:open` | Emitted when the selected value(s) change. / ( on: 'update:modelValue', value: string | number | null | (string | number)[], ): void; /** Emitted when the listbox is opened or closed. | [value: boolean] |

## Dependencies

### Depends on

- [MOptionListbox](../optionListbox)

### Graph

```mermaid
graph TD;
  MCombobox --> MOptionListbox
style MCombobox fill:#008240,stroke:#333,stroke-width:4px
```