# `m-combobox`

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 |
|------|-------------|------|---------|
| `value*` | The current selected value(s) of the combobox. | `string` `number` `null` `(string` `number)[]` | `$bindable()` |
| `multiple` | Enable multiple value 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 value 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 value" button. | `string` | `Clear` |
| `options*` | Array of options to display in the listbox. | `Array<{ label: string; content?: string; value?: string` `number; disabled?: boolean; type?: 'option'` `'section'; }>` |   |
| `onopen` | Callback to trigger when the listbox is opened or closed. | `(value: boolean) => void` |   |
| `item` |  | `Snippet<[{ option: ListboxOption }]>` |   |

## Events

| Name | Description | Type |
|------|------|-------------|
| `update:open` | Emitted when the listbox is opened or closed. | `CustomEvent<boolean>` |

## Dependencies

### Depends on

- [m-option-listbox](../optionlistbox/README.md)

### Graph

```mermaid
graph TD;
  m-combobox --> m-option-listbox
style m-combobox fill:#008240,stroke:#333,stroke-width:4px
```

