# MSegmentedControl

A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `modelValue` | Defines the currently active tab.

- If a `number` is provided, it represents the index of the segment.
- If a `string` is provided, it must match the `id` of one of the segments. | `string` `number` | `0` |
| `full` | if `true`, the segmented control take the full width. | `boolean` | - |
| `size` | Determines the size of the segmented control. | `"s"` `"m"` | `"s"` |
| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `{ id?: string` `undefined; label: string; }[]` | - |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the selected segment changes, updating the modelValue prop. | [value?: string | number] |