## SegmentedControl  
SegmentedControl is an alternative to RadioGroup and allows users to select an option from a small set of options.  
Category: Inputs  

### Simple Example

SegmentedControl is usually used as an alternative to Tabs (to switch views) and RadioGroup (to capture user feedback
limited to certain options)

```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback

component = html.Div(
    [
        dmc.SegmentedControl(
            id="segmented",
            value="ng",
            data=[
                {"value": "react", "label": "React"},
                {"value": "ng", "label": "Angular"},
                {"value": "svelte", "label": "Svelte"},
                {"value": "vue", "label": "Vue"},
            ],
            mb=10,
        ),
        dmc.Text(id="segmented-value"),
    ]
)


@callback(Output("segmented-value", "children"), Input("segmented", "value"))
def select_value(value):
    return value
```
### Data Prop

The data can be provided as either:
* an array of strings - use when label and value are same.
* an array of dicts with `label` and `value` properties (plus an optional `disabled` boolean).

```python
data = ["React", "Angular", "Svelte", "Vue"]

# or

data = [
    {"value": "React", "label": "React"},
    {"value": "Angular", "label": "Angular"},
    {"value": "Svelte", "label": "Svelte", "disabled": True},
    {"value": "Vue", "label": "Vue"},
]
```

### Disabled

To disable the entire component, use the `disabled` prop. To disable a SegmentedControl item, use the array of objects data format and set `disabled = True` on the item that you want to disable. 

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Text("Disabled control"),
        dmc.SegmentedControl(
            disabled=True,
            data=[
                {"value": "preview", "label": "Preview"},
                {"value": "code", "label": "Code"},
                {"value": "export", "label": "Export"},
            ],
        ),
        dmc.Text("Disabled option"),
        dmc.SegmentedControl(
            data=[
                {"value": "preview", "label": "Preview", "disabled": True},
                {"value": "code", "label": "Code"},
                {"value": "export", "label": "Export"},
            ],
        ),
    ],
    align="flex-start",
)
```
### Full Width and Orientation

By default, SegmentedControl will take only the amount of space that is required to render elements. Set `fullWidth` 
prop to make it block and take 100% width of its container. The orientation can be set via `orientation` prop.

```python
import dash_mantine_components as dmc

dmc.SegmentedControl(
    orientation="horizontal",
    fullWidth=True,
    data=[]
)
```

### Sizes

SegmentedControl supports 5 sizes: xs, sm, md, lg, xl. Size controls font-size and padding properties.

```python
import dash_mantine_components as dmc

data = ["Dash", "Mantine", "Bootstrap", "Core"]

component = dmc.Stack(
    [dmc.SegmentedControl(data=data, size=x) for x in ["xs", "sm", "md", "lg", "xl"]],
    align="flex-start",
)
```
### Radius

xs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, you can use a number to set radius in px.

```python
import dash_mantine_components as dmc

data = ["Dash", "Mantine", "Bootstrap", "Core"]

component = dmc.Stack(
    [dmc.SegmentedControl(data=data, radius=x) for x in [0, "md", "lg", 20]],
    align="flex-start",
)
```
### Color

By default, SegmentedControl uses theme.white with shadow in light color scheme and theme.colors.dark[6] background 
color for active element. You can choose any color defined in theme.colors in case you need colored variant.

```python
import dash_mantine_components as dmc

dmc.SegmentedControl(
    color="red",
    data = []
)
```

### Transitions
Change transition properties with:

- `transitionDuration` – all transitions duration in ms (ignored if user prefers to reduce motion)
- `transitionTimingFunction` – defaults to `theme.transitionTimingFunction`

```python
import dash_mantine_components as dmc

data = ["Dash", "Mantine", "Bootstrap", "Core"]

component = dmc.Stack(
    [
        dmc.Text("No transition"),
        dmc.SegmentedControl(data=data, transitionDuration=0),
        dmc.Text("500ms linear transition"),
        dmc.SegmentedControl(
            data=data, transitionDuration=500, transitionTimingFunction="linear"
        ),
    ],
    align="flex-start",
)
```
### Components in label

```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback
from dash_iconify import DashIconify

data = [
    ["Preview", "tabler:eye"],
    ["Code", "tabler:code"],
    ["Export", "tabler:external-link"],
]

component = html.Div(
    [
        dmc.SegmentedControl(
            id="segmented-with-react-nodes",
            value="Preview",
            data=[
                {
                    "value": v,
                    "label": dmc.Center(
                        [DashIconify(icon=icon, width=16), html.Span(v)],
                        style={"gap": 10},
                    ),
                }
                for v, icon in data
            ],
            mb=10,
        ),
        dmc.Text(id="segmented--value-data"),
    ]
)


@callback(
    Output("segmented--value-data", "children"),
    Input("segmented-with-react-nodes", "value"),
)
def update_value(value):
    return value
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name       | Static selector                      | Description                                             |
|:-----------|:-------------------------------------|:--------------------------------------------------------|
| root       | .mantine-SegmentedControl-root       | Root element                                            |
| control    | .mantine-SegmentedControl-control    | Wrapper element for input and label                     |
| input      | .mantine-SegmentedControl-input      | Input element hidden by default                         |
| label      | .mantine-SegmentedControl-label      | Label element associated with input                     |
| indicator  | .mantine-SegmentedControl-indicator  | Floating indicator that moves between items             |
| innerLabel | .mantine-SegmentedControl-innerLabel | Wrapper of label element children                       |


### Keyword Arguments
#### SegmentedControl

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether text color should depend on `background-color`
    of the indicator. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color, changes color of
    indicator, by default color is based on current color scheme.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data (list of strings; required):
    Data based on which controls are rendered.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Determines whether the component is disabled.

- fullWidth (boolean; optional):
    Determines whether the component should take 100% width of its
    parent, `False` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- name (string; optional):
    Name of the radio group, by default random name is generated.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Determines in which orientation component id displayed,
    `'horizontal'` by default.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem,
    `theme.defaultRadius` by default.

- readOnly (boolean; optional):
    Determines whether the value can be changed.

- size (optional):
    Controls `font-size`, `padding` and `height` properties, `'sm'` by
    default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- transitionDuration (number; optional):
    Indicator `transition-duration` in ms, set `0` to turn off
    transitions, `200` by default.

- transitionTimingFunction (string; optional):
    Indicator `transition-timing-function` property, `ease` by
    default.

- value (string; optional):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withItemsBorders (boolean; optional):
    Determines whether there should be borders between items, `True`
    by default.