# `m-segmented-control`

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 |
|------|-------------|------|---------|
| `selected` | 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. | `number` `string` | `$bindable(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. | `Array<{ id?: string; label: string; }>` |   |
| `onChange` | Callback fired when the selected segment changes. | `(index: number) => void` |   |

## Events

| Name | Description | Type |
|------|------|-------------|
| `change` | Emits when the selected segment changes. | `CustomEvent<number | string | undefined>` |

