# SegmentedControl A Segmented Control allows users to switch between multiple options or views within a single container. Also known as toggle group, option selector, button segments, or view selector. ## Installation Install the segmented control, the theme package, and **the font package matching your project's brand**: **Leroy Merlin projects** ```bash npm install @ptlm-azulejo/segmented-control @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin # or yarn add @ptlm-azulejo/segmented-control @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin ``` **Adeo projects** ```bash npm install @ptlm-azulejo/segmented-control @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo # or yarn add @ptlm-azulejo/segmented-control @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo ``` ## Styles & theming The component ships no colors or typeface of its own — it reads design tokens from CSS variables at runtime. Those tokens come from `@ptlm-azulejo/themes`, and **the brand is selected by a class on your app's `` element**, so switching brand never touches component code. | Project | Preset stylesheet | Root class | Typeface | Font package | | ------------ | ----------------------------------------------- | ------------- | --------------- | ---------------------------------- | | Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` | | Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` | **Leroy Merlin projects** ```js import '@ptlm-azulejo/themes/presets/leroy-merlin.css' import '@ptlm-azulejo/fonts-leroy-merlin' import '@ptlm-azulejo/segmented-control/style.css' ``` ```html ``` **Adeo projects** ```js import '@ptlm-azulejo/themes/presets/adeo.css' import '@ptlm-azulejo/fonts-adeo' import '@ptlm-azulejo/segmented-control/style.css' ``` ```html ``` > The preset class is what resolves the brand at runtime. Without it — even with > the stylesheets imported — the component renders uncolored and in a fallback > typeface. See the [themes package](../themes/README.md) for brand switching, > dark mode, and custom brands. ### Light and dark mode Add `data-theme` alongside the brand class to pin the color scheme. Leave it off and the preset follows the OS `prefers-color-scheme`: ```html ``` ### Why the font package is separate The preset only _names_ its typeface in `--font-family` and ships no font files. [Loading them is your app's job](../themes/README.md#fonts), as with upstream Mozaic, so you keep control of hosting, subsetting and preload. Without the matching font package, `font-sans` falls back to a generic sans-serif. A multi-brand app can install both and switch by swapping the `.preset-*` class: only the active brand's file is ever downloaded. ## Props | Name | Type | Default | Description | | ------------ | ------------------------ | ------- | --------------------------------------------------- | | `items` | `SegmentedControlItem[]` | — | Segments with `label`, `value`, optional `disabled` | | `modelValue` | `string` | — | Selected value (`v-model`) | | `size` | `'s' \| 'm'` | `'m'` | `m` = 3rem (`h-12`), `s` = 2rem (`h-8`) | | `fullWidth` | `boolean` | `false` | Equal-width segments | | `disabled` | `boolean` | `false` | Disables the whole control | | `ui` | `SegmentedControlUi` | `{}` | Per-part Tailwind class overrides | | `ariaLabel` | `string` | — | Accessible name for the radiogroup | ## Basic usage ```vue ```