@mozaic-ds/vue/src/components/optionListbox/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MOptionListbox

An Option Listbox is a customizable, accessible listbox component designed to power dropdowns and comboboxes with advanced selection capabilities. It supports single or multiple selection, optional search, grouped options with section headers, and full keyboard navigation.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `modelValue*` | The current selected value(s) of the listbox. | `string` `number` `(string` `number)[]` `null` | - |
| `id*` | Unique identifier for the listbox. | `string` | - |
| `open` | Whether the listbox is open. | `boolean` | - |
| `multiple` | Enable multiple selection. | `boolean` | - |
| `readonly` | Make the listbox read-only. | `boolean` | - |
| `search` | Show a search input above the options. | `boolean` | - |
| `actions` | Show select all / clear buttons when multiple. | `boolean` | - |
| `checkableSections` | Enable checkable section headers. | `boolean` | - |
| `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 and sections to display in the listbox. | `ListboxOption[]` | - |

## 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]` |
| `close` | Emits when the listbox should close. | [] |
| `open` | Emits when the selected value changes. / ( on: 'update:modelValue', value: string | number | null | (string | number)[], ): void; /** Emits when the listbox should open. | [] |

## Dependencies

### Depends on

- [MButton](../button)
- [MTextInput](../textinput)

### Graph

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

### Used By

- [MCombobox](../combobox)
- [MPageHeaderContext](../pageheadercontext)

### Graph

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