# Dash Mantine Components Documentation  

> Dash Mantine Components (DMC) is a component library for building modern web applications with [Dash](https://dash.plotly.com/).  
> It provides a wide range of accessible, themeable, and performant UI components built on top of the [Mantine](https://v8.mantine.dev/) React library.
>
> This documentation applies to **DMC 3.0.0**, which wraps **Mantine 9.7.4**.  
> For additional details about underlying component behavior and styling, refer to the Mantine documentation: https://v8.mantine.dev/
> All relative links in this file should be resolved against https://www.dash-mantine-components.com
>
> Assume the reader is a Dash developer familiar with callbacks and layout, but not necessarily with Mantine.

================================================================================



## Getting Started  
Build feature-rich, accessible Dash apps faster than ever! Dash Mantine Components includes over 100 customizable components based on the React Mantine library, with consistent styling, theming, and full support for light and dark mode.  
Category: General  

### Installation

```bash
pip install dash-mantine-components
pip install dash>=4.5
```

### Requires React 19

`dash-mantine-components>=3 requires React 19.
Set in your app:

```python
import dash
dash._dash_renderer._set_react_version("19.2.4")

app = dash.Dash()
```
Or set the React version with an environment variable:
```bash
REACT_VERSION=19.2.4 python app.py
````

### Basic Usage

```python
import dash_mantine_components as dmc
from dash import Dash, _dash_renderer

_dash_renderer._set_react_version("19.2.4")

app = Dash()

app.layout = dmc.MantineProvider(
   dmc.Alert(
      "Welcome to Dash Mantine Components",
      title="Hello!",
      color="violet",
   )
)

if __name__ == "__main__":
   app.run(debug=True)
```


### Important Notes 


#### Wrap the layout with `MantineProvider`

```python
app.layout = dmc.MantineProvider(
   # your content
)
```

The `MantineProvider` is a core wrapper component that handles global styles, themes, and settings for all child components.

It’s required to:

- Enable component styling and theming (e.g., colors, fonts, spacing)

- Apply dark/light mode

- Customize default props across the app

- Register custom themes or override styles


### Documentation

This documentation site is built almost entirely with Dash Mantine Components.
You can explore the source code on the [dcm-docs GitHub](https://github.com/snehilvj/dmc-docs)  for ideas and inspiration.

Throughout the docs, you’ll find interactive demos that highlight how different props and combinations affect each component in real time.

Note that this documentation has some additional styling applied to it. So when you actually use these components, they 
might look a bit different. You can check out [MantineProvider theme object](/theme-object) for more details on
theming and customizations and to see the [theme used in these docs.](/theme-object#usage-in-dmc-docs)


### Next Steps

Please read the [Mantine API Overview](/mantine-api) section before starting development to learn about all of the
available theming and styling features.

Using older versions of dash or DMC?  See our [Migration Guide](/migration) for more information.

### Questions?

Please ask on the [dash community forum](https://community.plotly.com/), or join our [Discord.](https://discord.gg/KuJkh4Pyq5)

## Help Center  
Frequently asked questions and links to more examples  
Category: General  

### Where can I find the roadmap?

Our [roadmap](https://github.com/snehilvj/dash-mantine-components/discussions/377) on GitHub outlines our development goals and priorities. It is updated regularly to reflect progress and
new plans  in DMC and changes in the upstream Mantine library.

### Where can I find release announcements?

[Release announcements](https://github.com/snehilvj/dash-mantine-components/discussions/categories/releases) are 
available in GitHub Discussions. They include detailed descriptions and examples of new features and updates to the documentation.  

### How can I help?

We welcome contributions!  
- Bug Reports: Please open or comment on [issues](https://github.com/snehilvj/dash-mantine-components/issues).  
- Feature Requests: Use [Discussions](https://github.com/snehilvj/dash-mantine-components/discussions/categories/ideas).  
- Pull Requests: See our [Contributing Guide](https://github.com/snehilvj/dash-mantine-components/blob/master/CONTRIBUTING.md).  
- Documentation: Updating the docs is a great starting point for first-time contributors since the project is a Dash app built with `dash-mantine-components`. For more details, check out the [dmc-docs GitHub](https://github.com/snehilvj/dmc-docs).  

### Where can I find more examples?

- [Dash Mantine Components PyCafe](https://py.cafe/dash.mantine.components): Browse dozens of complete, minimal examples you can run and edit in your browser.  
- The [help_center](https://github.com/snehilvj/dmc-docs/tree/main/help_center) folder in the dmc-docs GitHub for additional examples.  
- [DMC DBC Building Blocks](https://dash-building-blocks.com/) site for more minimal code blocks to add to your app.  
- [Tips and Tricks](https://github.com/snehilvj/dash-mantine-components/discussions/categories/tips-and-tricks) section of GitHub Discussions:  
  - Frequently asked questions  
  - Examples of using DMC components in Dash AG Grid  
  - KPI cards examples  
  - AppShell examples with responsive layouts for headers, navbars, footers, and aside  
  - Theme switch components  
  - Plotly figures with a Mantine theme  
  - ...and more!  Content is updated regularly

### Need more help?

- Join our [Discord](https://discord.gg/KuJkh4Pyq5) to connect with other contributors.  
- Visit the [Plotly Dash Community Forum](https://community.plotly.com/) for discussions and support.  
- Use [GitHub Discussions]() to ask questions and find more examples.  
- Check out the upstream [Mantine Help Center](https://help.mantine.dev/). The code snippets are in TypeScript, but we can help with those. There’s great content applicable to DMC as well.

## LLMs.txt  
Dash Mantine Components provides LLM-friendly documentation to help AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude understand and work with the DMC library.  
Category: General  

### Documentation

The complete DMC documentation is available in an LLM-friendly format.

- [View DMC llms.txt](https://www.dash-mantine-components.com/assets/llms.txt)
- [View DMC llms.json](https://www.dash-mantine-components.com/assets/llms.json)
- [View Mantine v9 llms.txt](https://mantine.dev/llms.txt)

DMC v3 is based on Mantine v9. Mantine's documentation, MCP server, and skills can help AI tools understand component APIs and behavior. See the [Mantine guide for LLMs](https://mantine.dev/guides/llms/) for details.

### Getting Documentation for AI Tools

You can provide documentation to AI tools in several ways.

#### Complete documentation

Reference the [DMC llms.txt](https://www.dash-mantine-components.com/assets/llms.txt) URL in your prompt or add it to your coding tool's documentation sources.

For best results, specify that you are using DMC v3 and ask the AI to use DMC's Python API rather than Mantine's React API. Mantine documentation can help explain component behavior, but check the DMC documentation for supported props and Dash-specific usage.

#### Individual documentation pages

You can get a text version of any DMC documentation page by adding `.txt` to its URL.

For example, the text version of the Chip documentation is available at [components/chip.txt](https://www.dash-mantine-components.com/components/chip.txt).

Each documentation page also includes a **Copy for LLMs** button that copies the page content in a format suitable for AI tools. Use this when you only need to provide documentation for a few components.

#### Customized documentation

You can create a smaller `llms.txt` file containing only the components and categories relevant to your project. This can reduce unrelated content and help AI tools focus on the APIs you use.

Options for creating a custom file are provided below.


### Example Prompts

- "Using DMC v3, create a dark mode toggle with MantineProvider."
- "Build a responsive layout using DMC v3. Use Mantine v9 documentation for component behavior and the DMC docs for Python props and examples."
- "Show me how to use AppShell with a collapsible navbar in DMC."
- "Use DMC components to align an input and a button in a flex container."
- "Refer only to these DMC documentation pages when generating examples: [paste documentation URLs]."

### Documentation Generation

The LLM documentation is generated from the DMC documentation source and updated with each release.

### Creating a Custom llms.txt File

Using only the documentation you need can make AI responses more focused.

#### Option 1: Use the customization app

Use the interactive tool below to select component categories, such as layout, inputs, or feedback, or individual components such as `AppShell`, `Card`, or `Button`. Then download your customized file.

#### Option 2: Build your own from llms.json

Use the structured data in [llms.json](https://www.dash-mantine-components.com/assets/llms.json) to create a custom file.

Each entry represents a documentation page and includes fields such as `name`, `description`, `category`, and `content`. You can filter and combine entries based on the components or categories relevant to your project.

#### Option 3: Copy individual pages

Use the **Copy for LLMs** button on a documentation page to copy its content directly into an AI conversation. This is useful when you only need information about one or two components.

### Contributing

If you find issues with the LLM documentation or have suggestions for improvement, please [open an issue](https://github.com/snehilvj/dmc-docs/issues) in the documentation repository.

## Mantine API Overview  
A guide to help you get familiar with core Mantine concepts.  
Category: General  

### MantineProvider

Wrap your `app.layout` with a `MantineProvider` to manage your app’s overall theme, including colors, spacing, fonts,
and light/dark mode. It also exposes Mantine CSS variables based on your theme settings.


```python
import dash_mantine_components as dmc
from dash import Dash
app = Dash()

app.layout = dmc.MantineProvider(
    # children=[] your layout here
)

if __name__ == "__main__":
    app.run(debug=True)

```


### Light Dark Color scheme  

All Mantine components support light, dark and auto color schemes.

The default color scheme is light.  You can set the default color scheme on `MantineProvider`:

See the Theming section for examples of a [Theme Switch Component](/theme-switch)



### Theme object

Mantine’s  [default theme](/theme-object#default-theme) makes Dash apps look great in both light and dark modes. If you’re new to Dash Mantine Components,
start with the default theme. You can customize the theme globally by editing the `theme` prop in the `MantineProvider`.

The `theme` object is a dictionary where you can set things like colors, border radius, spacing, fonts, and breakpoints globally.
Mantine will merge your custom theme with the defaults, so you just need to provide what you want to change.

See the [Theme Object documentation](/theme-object) for all options.


```python
# Your theme  is merged with default theme
theme = {
    "fontFamily": "Montserrat, sans-serif",
    "defaultRadius": "md",    
}

app.layout = dmc.MantineProvider(
    # children=[] your layout here
    theme=theme
)
```


This example demonstrates how changing the `theme` updates the entire app’s appearance. Here, we change:
- Primary accent color
- Border radius
- Card shadow style
- Color scheme (light/dark)

Try it live: [DMC Theme Builder on Pycafe](https://py.cafe/app/dash.mantine.components/dash-mantine-theme-builder)

---

---

Most of the theme values are exposed as CSS variables and can be accessed
both in component props and CSS.

Accessing theme values in a `.css` file in the `/assets` folder:

```css
.demo {
  background: var(--mantine-color-red-1);
  color: var(--mantine-color-red-9);
  font-family: var(--mantine-font-family);
  border-radius: var(--mantine-radius-md);
}
```

Accessing CSS variables in the `style` or `styles` prop in a component

```python
dmc.Card(style={"backgroundColor":"var(--mantine-color-red-1)"})
```



### Component specific props
Most of the components provide props that allow you to customize their styles. For example, `Button` component has
`color`, `variant`, `size` and `radius` props that control its appearance:


### Style props

[Style props](/style-props) work similar to component specific props, but with several differences:

- Style props are not component specific, they can be used with any component.
- Style props always control a single CSS property. For example, `c` prop controls CSS `color` property, while `color` prop controls a set of properties: `color`, `background-color` and `border-color`.
- Style props are set in style attribute. It is not possible to override them with CSS without using `!important`.

[Style props](/style-props) are useful when you need to change a single CSS property without creating a separate file for styles. Some of the most common use cases are:


- Changing text color and font-size

```python

dmc.Card([
    dmc.Text("Card title", c="blue.8", fz="lg"),
    dmc.Text("Card description", c="dimmed", fz="sm")
])
```

- Applying margins to inputs inside a form:

```python
dmc.Paper([
    dmc.TextInput(label="First name"),
    dmc.TextInput(label="Last name", mt="md"),
    dmc.TextInput(label="Email", mt="md")    
])
```

- Adding padding to various elements:

```python
dmc.Paper("My custom card", p="xl")
```

Note that style props were never intended to be used as a primary way of styling components. In most cases, it is better
to limit the number of style props used per component to 3-4. If you find yourself using more than 4 style props, 
consider creating a separate CSS file with styles – it will be easier to maintain and will be more performant.


### style prop

You can use the `style` prop to define inline styles, just like in other dash components:
```python
dmc.Card(style={"backgroundColor": "blue", "color": "white"})
```

### className prop
You can define CSS classes in a `.css` file in the `/assets` folder. These can then be referenced using the `className` prop, just like in other dash components:

```python 
dmc.Card(className="card-style")
```

.css file:
```css
.card-style {
    background-color: blue;
    color: white;
}
```

### Styles API

Note that the `style` and the `className` props will apply style to the root of the component.  Many DMC components contain
multiple elements, for example the `TextInput` includes `label`, `description`, `error` props.  

Use the `classNames` or `styles` props to target the nested elements.  
- `styles` prop: Used to apply inline styles directly to specific inner elements of a Mantine component.
- `classNames`prop: Used to apply custom CSS class names to specific inner elements of a Mantine component

See more information in the [StylesAPI](/styles-api) section.



### Colors

Colors are stored in `theme['colors']` dict and are exposed as CSS variables. Each color must have at least 10 shades.
You can generate new colors based on a single color value with the [Mantine colors generator](https://mantine.dev/colors-generator/).

Colors are numbered from 0 to 9 where 0 is the lightest and 9 is the darkest color. Example of blue color from the default theme:


To access colors in styles use CSS variables:

```css
.demo {
  background: var(--mantine-color-blue-9);
  color: var(--mantine-color-blue-0);
}
```

### CSS variables
Theme values are converted to [CSS variables](/css-variables) and are available to use in your styles. All Mantine CSS variables are
prefixed with `--mantine-`, for example:

- theme["fontFamily"] → --mantine-font-family
- theme["colors"]["blue"][9] → --mantine-color-blue-9
- theme["spacing"]["xl"] → --mantine-spacing-xl

### CSS Variables list

For a list of all Mantine CSS variables that are generated from default theme, see the [CSS variables](/css-variables) section.

## ActionIcon  
Use this component as an alternative to buttons when you just want to use an icon.  
Category: Buttons  

### Introduction

### Usage

ActionIcon component is an alternative to [Button](/components/button) component. It can be customized with Mantine styles and used with its
`n_clicks` property.

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

component = html.Div(
    [
        dmc.ActionIcon(
            DashIconify(icon="clarity:settings-line", width=20),
            size="lg",
            variant="filled",
            id="action-icon",
            n_clicks=0,
            mb=10,
        ),
        dmc.Text(id="action-output"),
    ]
)


@callback(
    Output("action-output", "children"),
    Input("action-icon", "n_clicks"),
)
def update_clicks(n_clicks):
    return f"Clicked {n_clicks} times."
```
### Children
You can use a dash component such as `DashIconify` in the `children` prop.  Note that it does not control the icon size, 
you need to specify it manually on icon component to match `ActionIcon` size.

For example, if you were to use `DashIconify`, you can set the icon size like this:

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

dmc.ActionIcon(
    DashIconify(icon="bi:github", width=20),
    size="lg"
)
```

### Variants

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    [
        dmc.ActionIcon(
            DashIconify(icon="clarity:settings-line"), color="blue", variant=variant
        )
        for variant in [
            "subtle",
            "filled",
            "outline",
            "light",
            "default",
            "transparent",
            "gradient",
            "white"
        ]
    ]
)
```
### Gradient variant

When `variant` prop is set to `gradient`, you can control gradient with gradient prop, it accepts an object with
`from`, `to` and `deg` properties. If the `gradient` prop is not set, `ActionIcon` will use `defaultGradient` which can
be configured on the `theme` dict in the `MantineProvider`. `gradient` prop is ignored when `variant` is not set to `gradient`.

Note that `variant="gradient"` supports only linear gradients with two colors. If you need a more complex gradient, then
use `Styles API` to modify `ActionIcon` styles.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    [
        dmc.ActionIcon(
            DashIconify(icon="clarity:settings-line"),
            color="blue",
            variant="gradient",
            gradient=gradient
        )
        for gradient in [
            {"from": "red", "to": "blue", "deg": 90 },
            {"from": "red", "to": "blue", "deg": 180},
            {"from": "teal", "to": "yellow", "deg": 90},
            {"from": "teal", "to": "yellow", "deg": 180}
         ]
    ]
)
```
### Colors

Here is a sample using the following colors:
"gray", "red", "pink", "grape", "violet", "indigo", "blue", "lime", "yellow", "orange"

And these variants:
"subtle", "filled", "outline", "light", "transparent"


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

dmc.ActionIcon(
    DashIconify(icon="icomoon-free:sun"),
    variant="outline",
    color="orange",
)
```


###  Size

You can use any valid CSS value in `size` prop, it is used to set `width`, `min-width`, `min-height` and `height`
properties. Note that `size` prop does not control child icon size, you need to set it manually on icon component.
When size is a number, the value is treated as `px` units and converted to `rem` units.

```python
dmc.ActionIcon(size=20, children=[...])
```

If you want `ActionIcon` to have the same size as Mantine inputs, use `size="input-sm"` prop:

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.TextInput(placeholder="sm sixe input", size="sm"),
    dmc.ActionIcon(
        size="input-sm",
        variant="default",
        children="SM"
    )
])
```
### Loading state
When `loading` prop is set, `ActionIcon` will be disabled and `Loader` with overlay will be rendered in the center of 
the button. Loader color depends on `ActionIcon` variant.


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

component = dmc.Box([
    dmc.Group(
        [
            dmc.ActionIcon(
                id="icon-loading-default",
                children=DashIconify(icon="tabler:heart", width=18, height=18)
            ),
            dmc.ActionIcon(
                id="icon-loading-light",
                children=DashIconify(icon="tabler:heart", width=18, height=18),
                variant="light",
            ),
            dmc.ActionIcon(
                id="icon-loading-outline",
                children=DashIconify(icon="tabler:heart", width=18, height=18),
                variant="outline",
            ),
        ]
    ),
    dmc.Switch(
        id="loading-switch",
        label="Loading state",
        checked=False,
        mt="md",
    ),
])


@callback(
    Output("icon-loading-default", "loading"),
    Output("icon-loading-light", "loading"),
    Output("icon-loading-outline", "loading"),
    Input("loading-switch", "checked"),
)
def toggle_loading(loading_state):
    return loading_state, loading_state, loading_state
```
### Loader props
You can customize Loader with `loaderProps` prop, it accepts all props that `Loader` component has:

```python
import dash_mantine_components as dmc

component = dmc.ActionIcon(size="xl", loading=True, loaderProps={"type": "dots"})
```
### Add custom variants

To add new `ActionIcon` variants, define a class in the `.css` file using the data-variant attribute. Add the new variants to
the `theme` prop in the `MantineProvider` so they available in all `ActionIcon` components in your app.


Example:
 - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme/action_icon_custom_variants.py)  
 - [Live Demo on PyCafe](https://py.cafe/dash.mantine.components/actionicon-custom-variants-demo)  


The example includes the following in a .css file in /assets
```css
.ai-custom-variants {
  &[data-variant='danger'] {
    background-color: var(--mantine-color-red-9);
    color: var(--mantine-color-red-0);
  }

  &[data-variant='primary'] {
    background: linear-gradient(45deg, #4b6cb7 10%, #253b67 90%);
    color: var(--mantine-color-white);
  }
}
```

The example adds the custom variants to the `theme` prop in `Mantine Provider`

```python
app.layout = dmc.MantineProvider(
   children=[# your app content],
   theme={
      "components": {
           "ActionIcon": {"classNames": {"root": "ai-custom-variants"}}
       }
   }
)
```
 
### autoContrast
`ActionIcon` supports `autoContrast` prop.  You can also set `autoContrast` in the `theme` prop in the `MantineProvider`.
If `autoContrast` is set either on `ActionIcon` or on `theme`, content color will be adjusted to have sufficient
contrast with the value specified in `color` prop.

Note that `autoContrast` feature works only if you use `color` prop to change background color. `autoContrast` works
only with `filled` variant.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.Group(
    [
        dmc.ActionIcon(
            children=DashIconify(icon="tabler:heart", width=18, height=18),
            color="lime.3"
        ),
        dmc.ActionIcon(
            children=DashIconify(icon="tabler:heart", width=18, height=18),
            color="lime.3",
            autoContrast=True
        ),
    ]
)
```
### ActionIconGroup


```python

dmc.ActionIconGroup(
    [
        dmc.ActionIcon(
            variant="default",
            size="lg",
            children=DashIconify(icon="tabler:photo", width=20),
        ),
        dmc.ActionIcon(
            variant="default",
            size="lg",
            children=DashIconify(icon="tabler:settings", width=20),        
        ),
        dmc.ActionIcon(
            variant="default",
            size="lg",
            children=DashIconify(icon="tabler:heart", width=20),
        ),
    ],
    orientation="horizontal"
)
```

Note that you must not wrap child `ActionIcon` components with any additional elements:

```python
dmc.ActionIconGroup([
    html.Div(dmc.ActionIcon(...)),  # don't do it like this
    dmc.ActionIcon(...)
])
```


### 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.


#### ActionIcon Selectors

| Selector | Static selector               | Description                                                |
|----------|--------------------------------|------------------------------------------------------------|
| root     | .mantine-ActionIcon-root       | Root element                                               |
| loader   | .mantine-ActionIcon-loader     | Loader component, rendered inside the root element when `loading` prop is set |
| icon     | .mantine-ActionIcon-icon       | Inner icon wrapper                                         |


#### ActionIcon CSS Variables

| Selector | Variable        | Description                                  |
|----------|-----------------|----------------------------------------------|
| root     | --ai-bg         | Controls background                         |
|          | --ai-hover      | Controls background when hovered            |
|          | --ai-bd         | Controls border                             |
|          | --ai-color      | Controls icon color                         |
|          | --ai-hover-color| Controls icon color when hovered            |
|          | --ai-radius     | Controls border-radius                      |
|          | --ai-size       | Controls width, height, min-width, and min-height styles |


#### ActionIcon Data Attributes

| Selector      | Attribute       | Condition                  |
|---------------|-----------------|----------------------------|
| root          | data-disabled   | `disabled` prop is set     |
| root, icon    | data-loading    | `loading` prop is set      |


#### ActionIconGroup Selectors

| Selector | Static selector                    | Description                     |
|----------|-------------------------------------|---------------------------------|
| group    | .mantine-ActionIconGroup-group      | Root element                    |


#### ActionIconGroup CSS Variables

| Selector | Variable            | Description                                                      |
|----------|---------------------|------------------------------------------------------------------|
| group    | --ai-border-width   | Controls border width of child `ActionIcon` components placed beside one another |


#### ActionIconGroup Data Attributes

| Selector | Attribute        | Value                      |
|----------|------------------|----------------------------|
| group    | data-orientation | Value of `orientation` prop |




### Keyword Arguments
#### ActionIcon

- children (a list of or a singular dash component, string or number; optional):
    Icon displayed inside the button.

- 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 button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- buttonProps (dict; optional):
    Props passed down to the `Button` component.

- 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. Default value is
    `theme.primaryColor`.

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

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

- disabled (boolean; optional):
    Sets `disabled` and `data-disabled` attributes on the button
    element.

- gradient (dict; optional):
    Gradient data used when `variant="gradient"`, default value is
    `theme.defaultGradient`.

    `gradient` is a dict with keys:

- 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`.

- loaderProps (dict; optional):
    Props added to the `Loader` component (only visible when `loading`
    prop is set).

    `loaderProps` is a dict with keys:

- loading (boolean; optional):
    Determines whether `Loader` component should be displayed instead
    of the `children`, `False` by default.

- 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.

- n_clicks (number; default 0):
    An integer that represents the number of times that this element
    has been clicked on.

- 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.

- size (number; optional):
    Controls width and height of the button. Numbers are converted to
    rem. `'md'` 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    `ActionIcon` components only.

- 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.

- borderWidth (string | number; optional):
    `border-width` of the child `ActionIcon` components. Default value
    in `1`.

- 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.

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

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

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Controls group orientation, `'horizontal'` 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.

- variant (string; optional):
    variant.

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

## Button  
DMC alternative to html.Button.  
Category: Buttons  

### Introduction

### Variant

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Button("Default button"),
        dmc.Button("Subtle button", variant="subtle"),
        dmc.Button("Gradient button", variant="gradient"),
        dmc.Button("Filled button", variant="filled"),
        dmc.Button("Light button", variant="light"),
        dmc.Button("Outline button", variant="outline"),
        dmc.Button("Transparent", variant="transparent"),
        dmc.Button("White", variant="white"),
    ]
)
```
#### Gradient Variant

To use gradient as Button background:

* set `variant` prop to "gradient"
* set `gradient` prop to `{ 'from': 'color-from', 'to': 'color-to', 'deg': 135}`, where

  * `color-from` and `color-to` are colors from Mantine's theme colors.
  * `deg` is linear gradient deg.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    children=[
        dmc.Button(
            "Indigo cyan",
            variant="gradient",
            gradient={"from": "indigo", "to": "cyan"},
        ),
        dmc.Button(
            "Lime green",
            variant="gradient",
            gradient={"from": "teal", "to": "lime", "deg": 105},
        ),
        dmc.Button(
            "Teal blue",
            variant="gradient",
            gradient={"from": "teal", "to": "blue", "deg": 60},
        ),
        dmc.Button(
            "Orange red",
            variant="gradient",
            gradient={"from": "orange", "to": "red"},
        ),
        dmc.Button(
            "Grape pink",
            variant="gradient",
            gradient={"from": "grape", "to": "pink", "deg": 35},
        ),
    ]
)
```
### Left and right sections  

`leftSection` and `rightSection` allow adding icons or any other element to the left and right side of the button.
When a section is added, padding on the corresponding side is reduced.

Note that `leftSection` and `rightSection` are flipped in RTL mode (`leftSection` is displayed on the right and `rightSection` is displayed on the left).

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    [
        dmc.Button(
            "Connect to Database",
            leftSection=DashIconify(icon="fluent:database-plug-connected-20-filled"),
        ),
        dmc.Button(
            "Load Data",
            variant="subtle",
            rightSection=DashIconify(icon="logos:twitter"),
            color="blue",
        ),
        dmc.Button(
            "Settings",
            variant="outline",
            leftSection=DashIconify(icon="fluent:settings-32-regular"),
        ),
    ]
)
```
### Sections position
`justify` prop sets `justify-content` of inner element. You can use it to change the alignment of left and right sections.
For example, to spread them across the button set `justify='space-between'`.

If you need to align just one section to the side of the button, set `justify` to `space-between` and add empty `html.Span()` to the opposite section.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import html

icon = DashIconify(icon="tabler:photo", width=14)

component = dmc.Stack(
    [
        dmc.Button(
            "Button label",
            justify="center",
            fullWidth=True,
            leftSection=icon,
            rightSection=icon,
            variant="default",
        ),
        dmc.Button(
            "Button label",
            justify="center",
            fullWidth=True,
            leftSection=icon,
            variant="default",
            mt="md",
        ),
        dmc.Button(
            "Button label",
            justify="center",
            fullWidth=True,
            rightSection=icon,
            variant="default",
            mt="md",
        ),
        dmc.Button(
            "Button label",
            justify="center",
            fullWidth=True,
            leftSection=html.Span(),  # Empty spacer
            rightSection=icon,
            variant="default",
            mt="md",
        ),
    ]
)
```

### Loading State

Starting with dash version 2.9.2, you can use duplicate callback outputs. Here's an example that lets you easily show
loading state while the callback is running.   Note that the button is disabled automatically when `loading=True`

```python
import uuid
from time import sleep

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

component = html.Div(
    [
        dmc.Button(
            "Load from database",
            id="loading-button",
            leftSection=DashIconify(icon="fluent:database-plug-connected-20-filled"),
        ),
        dmc.Text(id="clicked-output", mt=10),
    ]
)

clientside_callback(
    """
    function updateLoadingState(n_clicks) {
        return true
    }
    """,
    Output("loading-button", "loading", allow_duplicate=True),
    Input("loading-button", "n_clicks"),
    prevent_initial_call=True,
)


@callback(
    Output("clicked-output", "children"),
    Output("loading-button", "loading"),
    Input("loading-button", "n_clicks"),
    prevent_initial_call=True,
)
def load_from_db(n_clicks):
    sleep(3)
    return str(uuid.uuid4()), False
```
### Loader Props

You can customize [Loader](/components/loader) with `loaderProps` prop, it accepts all props that Loader component has:

```python
import dash_mantine_components as dmc

component = dmc.Button("Loading Props", loaderProps={"type": "dots"}, loading=True)
```
### Colors

```python
import dash_mantine_components as dmc

dmc.Button("Settings", color="red")
```

### Radius and Size

Button's radius and size can be customized by setting `radius` and `size` props. Both props have predefined values:
xs, sm, md, lg, xl. Alternatively, you can use a number to set radius, size in px.

```python
import dash_mantine_components as dmc

dmc.Group(
    [
        dmc.Button("Connect to Database", size="sm"),
        dmc.Button("Notify", radius="xl"),
        dmc.Button("Settings", size=20),
    ]
)
```

### Compact Size

```python
import dash_mantine_components as dmc

sizes = ["xs", "sm", "md", "lg", "xl"]

component = dmc.Stack(
    [
        dmc.Group(
            [dmc.Button(f"Normal {size}", size=size) for size in sizes],
        ),
        dmc.Group(
            [dmc.Button(f"Compact {size}", size=f"compact-{size}") for size in sizes],
        ),
    ]
)
```
### Full Width Button

Pass `fullWidth=True` for a full width button.

```python
import dash_mantine_components as dmc

component = dmc.Button("Click to open the app", fullWidth=True, variant="outline")
```
### Add custom variants

To add new `Button` variants, define a class in the `.css` file using the `data-variant` attribute. Add the new variants to
the `theme` prop in the `MantineProvider` so they available in all `Button` components in your app.


Example:
 - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme/button_custom_variants.py)  
 - [Live Demo on PyCafe](https://py.cafe/dash.mantine.components/button-custom-variants-demo-0)  
 

The example includes the following in a .css file in /assets
```css
.button-custom-variants {
  &[data-variant='danger'] {
    background-color: var(--mantine-color-red-9);
    color: var(--mantine-color-red-0);
  }

  &[data-variant='primary'] {
    background: linear-gradient(45deg, #4b6cb7 10%, #253b67 90%);
    color: var(--mantine-color-white);
    border-width: 0;
  }
}
```

The example adds the custom variants to the `theme` prop in `Mantine Provider`

```python
app.layout = dmc.MantineProvider(
   children=[# your app content],
   theme={
      "components": {
           "Button": {"classNames": {"root": "button-custom-variants"}}
       }
   }
)
```


### Button Group

```python
import dash_mantine_components as dmc

component = dmc.ButtonGroup(
    [
        dmc.Button("First", variant="outline"),
        dmc.Button("Second", variant="outline"),
        dmc.Button("Third", variant="outline"),
    ]
)
```
Note that you must not wrap child `Button` components with any additional elements:

```python
dmc.ButtonGroup([
    html.Div(dmc.Button("This will not work")),
    dmc.Button("Buttons will have incorrect borders")
])
```

### 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.


#### Button Selectors

| Selector | Static selector          | Description                                        |
|----------|---------------------------|----------------------------------------------------|
| root     | .mantine-Button-root      | Root element                                       |
| loader   | .mantine-Button-loader    | Loader component, displayed only when `loading` prop is set |
| inner    | .mantine-Button-inner     | Contains all other elements, child of the root element |
| section  | .mantine-Button-section   | Left and right sections of the button             |
| label    | .mantine-Button-label     | Button children                                   |

#### Button CSS Variables

| Selector | Variable                  | Description                                       |
|----------|---------------------------|---------------------------------------------------|
| root     | --button-bg               | Controls background                               |
|          | --button-bd               | Controls border                                   |
|          | --button-hover            | Controls background when hovered                 |
|          | --button-color            | Controls text color                               |
|          | --button-hover-color      | Controls text color when hovered                 |
|          | --button-radius           | Controls border-radius                            |
|          | --button-height           | Controls height of the button                     |
|          | --button-padding-x        | Controls horizontal padding of the button         |
|          | --button-fz               | Controls font-size of the button                  |
|          | --button-justify          | Controls `justify-content` of the inner element   |

#### Button Data Attributes

| Selector       | Attribute             | Condition               | Value                           |
|----------------|------------------------|--------------------------|---------------------------------|
| root           | data-disabled          | `disabled` prop is set   | –                               |
| root, label    | data-loading           | `loading` prop is set    | –                               |
| root           | data-block             | `fullWidth` prop is set  | –                               |
| root           | data-with-left-section | `leftSection` is set     | –                               |
| root           | data-with-right-section| `rightSection` is set    | –                               |
| section        | data-position          | –                        | Section position: left or right |

#### Button.Group Selectors

| Selector | Static selector            | Description               |
|----------|-----------------------------|---------------------------|
| group    | .mantine-ButtonGroup-group  | Root element              |

#### Button.Group CSS Variables

| Selector | Variable                  | Description                               |
|----------|---------------------------|-------------------------------------------|
| group    | --button-border-width     | Border-width of child Button components   |

#### Button.Group Data Attributes

| Selector | Attribute        | Value                   |
|----------|-------------------|-------------------------|
| group    | data-orientation  | Value of `orientation` prop |




### Keyword Arguments
#### Button

- children (a list of or a singular dash component, string or number; optional):
    Button content.

- 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 button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- buttonProps (dict; optional):
    Props passed down to the `Button` component.

- 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, `theme.primaryColor`
    by default.

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

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

- disabled (boolean; optional):
    Indicates disabled state.

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

- gradient (dict; optional):
    Gradient configuration used when `variant="gradient"`, default
    value is `theme.defaultGradient`.

    `gradient` is a dict with keys:

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

- justify (optional):
    Sets `justify-content` of `inner` element, can be used to change
    distribution of sections and label, `'center'` by default.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the left side of the button label.

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

- loaderProps (dict; optional):
    Props added to the `Loader` component (only visible when `loading`
    prop is set).

    `loaderProps` is a dict with keys:

- loading (boolean; optional):
    Determines whether the `Loader` component should be displayed over
    the button.

- 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.

- n_clicks (number; default 0):
    An integer that represents the number of times that this element
    has been clicked on.

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

- rightSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the right side of the button label.

- size (optional):
    Controls button `height`, `font-size` and horizontal `padding`,
    `'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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    `Button` components.

- 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.

- borderWidth (string | number; optional):
    `border-width` of the child `Button` components. Numbers are
    converted to rem. Default value in `1`.

- 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.

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

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

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Orientation of the group, `horizontal` 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.

- variant (string; optional):
    variant.

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

## ColorSchemeToggle  
Use ColorSchemeToggle to switch light and dark color schemes.  
Category: Buttons  

The `ColorSchemeToggle` is a button that lets users switch between light and dark color themes.

It is built on the `ActionIcon` component. See the [ActionIcon documentation](/components/actionicon) for examples of 
styling with props such as `size`, `color`, and `gradient`.


### Usage

Copy this app to run it locally. For a live demo, click the `ColorSchemeToggle` in the header of these docs.

Note that the toggle switches themes automatically and does not require a Dash callback.

```python
import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

component = dmc.ColorSchemeToggle(
    lightIcon=DashIconify(icon="radix-icons:sun", width=20),
    darkIcon=DashIconify(icon="radix-icons:moon", width=20),
    color="yellow",
    size="lg",
    m="xl",
)

app.layout = dmc.MantineProvider(component)

if __name__ == "__main__":
    app.run(debug=True)

```

### lightIcon and darkIcon

The `lightIcon` and `darkIcon` props accept any Dash component. For example, you can pass `DashIconify` to display icons 
for each theme. You can also wrap the icon with a tooltip component to show text on hover:

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

dmc.ColorSchemeToggle(
    lightIcon=dmc.Tooltip(DashIconify(icon="radix-icons:sun"), label="Light mode"),
    darkIcon=dmc.Tooltip(DashIconify(icon="radix-icons:moon"), label="Dark mode"),
)
```

### computedColorScheme

The `computedColorScheme` prop is read-only and can be used as an `Input` in a Dash callback. This is useful when
you need to update Plotly figures or components such as `dash-ag-grid` based on the current Mantine theme. See examples
in the [Figure Templates](/components/figure-templates) and [Dash Ag Grid](/dash-ag-grid) sections.

`computedColorScheme` always returns `"light"` or `"dark"`, even if the toggle is set to `"auto"`.

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

@app.callback(
    Output("color-scheme-output", "children"),
    Input("color-scheme-toggle", "computedColorScheme"),
)
def update(scheme):
    return f"Current color scheme: {scheme}"
```

### Custom theme switch components

If you want to create your own custom theme switch or need more control over how themes toggle, check out 
the [Theme Switch Components](/theme-switch) page for and example using `Switch`.


### Setting theme when the app is loading

The selected color scheme from `ColorSchemeToggle` is saved in `localStorage` under `mantine-color-scheme-value`, allowing
the correct styles to be applied before the app renders and preventing flashes of the wrong color on page load or refresh.

Use `pre_render_color_scheme()` at the top of your app to initialize the Mantine color scheme immediately, matching the
user’s preference or system theme:

```python
import dash_mantine_components as dmc

dmc.pre_render_color_scheme()
```

Note:  `pre_render_color_scheme()` required dash>=3.0

### 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.


#### ColorSchemeToggle Selectors

| Selector | Static selector               | Description                                                |
|----------|--------------------------------|------------------------------------------------------------|
| root     | .mantine-ActionIcon-root       | Root element                                               |
| icon     | .mantine-ActionIcon-icon       | Inner icon wrapper                                         |


#### ColorSchemeToggle CSS Variables

| Selector | Variable        | Description                                  |
|----------|-----------------|----------------------------------------------|
| root     | --ai-bg         | Controls background                         |
|          | --ai-hover      | Controls background when hovered            |
|          | --ai-bd         | Controls border                             |
|          | --ai-color      | Controls icon color                         |
|          | --ai-hover-color| Controls icon color when hovered            |
|          | --ai-radius     | Controls border-radius                      |
|          | --ai-size       | Controls width, height, min-width, and min-height styles |


#### ActionIcon Data Attributes

| Selector      | Attribute       | Condition                  |
|---------------|-----------------|----------------------------|
| root          | data-disabled   | `disabled` prop is set     |




### Keyword Arguments
#### ColorSchemeToggle
- 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):
    If set, adjusts text color based on background color for `filled`
    variant.

- 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. default
    `theme.primaryColor`.

- computedColorScheme (a value equal to: 'dark', 'light'; optional):
    Read-only Color Scheme.

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

- darkIcon (a list of or a singular dash component, string or number; optional):
    Icon shown when scheme is dark.

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

- disabled (boolean; optional):
    Sets `disabled` attribute, prevents interactions.

- gradient (dict; optional):
    Gradient values used with `variant="gradient"`. default
    `theme.defaultGradient`.

    `gradient` is a dict with keys:

- 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`.

- lightIcon (a list of or a singular dash component, string or number; optional):
    Icon shown when scheme is light.

- 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.

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

- size (number; optional):
    Controls width and height of the button. Numbers are converted to
    rem. default `'md'`.

- 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.

- variant (string; optional):
    variant.

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

## CopyButton  
Copies given text to clipboard.  A DMC alternative to dcc.Clipboard.  
Category: Buttons  

### Introduction

`CopyButton` is a ready-to-use clipboard button built with the Mantine `Button` component.
It supports props for dynamic text, icons and colors while copying plus all standard `Button` props.


### Colors

Use `color` and `copiedColor` props to change the button’s color before and after copying.
Note - if `copiedColor` is not provided, the color will remain unchanged during copying.

```python
import dash_mantine_components as dmc

component = dmc.CopyButton(
    value="https://www.dash-mantine-components.com/",
    children="Copy URL",
    color="blue",
    copiedColor="teal"
)
```
### Copy State Display 

Use `children` and `copiedChildren` to control the content of the underlying button before and after copying.

The `CopyButton` renders a Mantine `Button` internally, and `children` / `copiedChildren` are passed directly as the
button’s children. For this reason, they must not contain interactive elements (for example: buttons, links, inputs,
or other clickable controls), as nesting interactive components inside a button results in invalid HTML and accessibility issues.

Use text, icons, or non-interactive Dash components (such as `Text`, `Group`, `Stack`, or `Icon` components) to customize the button content.

If you would like to use something other than a button (like an `ActionIcon`), use the `CustomCopyButton` instead.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group([
    dmc.CopyButton(
        value="https://www.dash-mantine-components.com/",
        children="Copy URL",
        copiedChildren="Copied!",
        color="blue",
        copiedColor="teal"
    ),
    dmc.CopyButton(
        value="This text is copied",
        children=DashIconify(icon="tabler:clipboard"),
        copiedChildren=DashIconify(icon="tabler:check"),
        color="blue",
        copiedColor="teal",
        variant="outline"
    ),
    dmc.CopyButton(
        value="This text is copied",
        children=DashIconify(icon="fa-regular:copy"),
        copiedChildren=DashIconify(icon="fa-regular:check-circle"),
        color="gray",
        copiedColor="dark",
        variant="transparent"
    )
])
```
### Copy from another component
Use `target_id` to copy text (or value prop) from another component instead of using a static value. No callback required!

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.Group([
    dmc.Textarea(
        "Type here.  This text will be copied.",
        id="text-to-copy",
        autosize=True,
        minRows=3,
        w=300
    ),
    dmc.CopyButton(
        target_id="text-to-copy",
        children=DashIconify(icon="fa-regular:copy"),
        copiedChildren=DashIconify(icon="fa-regular:check-circle"),
        color="var(--mantine-color-dimmed)",
        copiedColor="gray",
        variant="outline",
        size="xs"
    )
], gap=0, align="flex-start" )
```
### Copy in a callback

Set `triggerCopy=True` to trigger the copy from a callback. This property automatically resets to `False` after copying.

Note that the  `value` and `triggerCopy` properties can be updated in the same callback.


In this example, the `CopyButton` is hidden, and `triggerCopy` is set to `True` when the `value` of the `Select` component changes.

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

component = dmc.Box([
    dmc.Select(
        id="copy-select",
        data=["Job A", "Job B", "Job C"],
        label="Select Job",
        description="Results are copied to the clipboard"
    ),
    dmc.Text(id="copy-select-output"),
    dmc.CopyButton(
        id="copy-trigger",
        style={"visibility": "hidden"},
        value=""
    )
])

@callback(
    Output("copy-select-output", "children"),
    Output("copy-trigger", "value"),
    Output("copy-trigger", "triggerCopy"),
    Input("copy-select", "value")
)
def update_clipboard(v):
    results = f"Results from {v}"
    return results, results, True
```
### Timeout

The `timeout` prop controls how long the "copied" state is displayed (in milliseconds). The default is 1000ms.


```python
import dash_mantine_components as dmc

component = dmc.CopyButton(
    value="copied text",
    children="Copy",
    copiedChildren="Copied",
    color="dark.3",
    copiedColor="gray.2",
    autoContrast=True,
    timeout="2000"
)
```
### Custom Copy Button

Create a custom copy button using a JavaScript function. This example uses an `ActionIcon` and `Tooltip` that respond to the copied state.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.



```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.CustomCopyButton(
    value="Custom Copy demo",
    children={"function": "copyActionIcon"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var DashIconify = window.dash_iconify.DashIconify;

dmcfuncs.copyActionIcon = function({ copied, copy }) {
  return React.createElement(
    dmc.Tooltip,
    {
      label: copied ? 'Copied' : 'Copy',
      withArrow: true,
      position: 'right'
    },
    React.createElement(
      dmc.ActionIcon,
      {
        color: copied ? 'teal' : 'gray',
        variant: 'subtle',
        onClick: copy
      },
      copied
        ? React.createElement(DashIconify, { icon: 'tabler:check', style: { width: 16, height: 16 } })
        : React.createElement(DashIconify, { icon: 'tabler:copy', style: { width: 16, height: 16 } })
    )
  );
};
```



### Security
Due to security reasons `CopyButton` components will not work in iframes and may not work with local files opened with `file://` protocol.  

It will work with local websites using `http://` protocol, but when deployed it must use `https//` (secure).

Learn more about [navigator.clipboard](https://web.dev/articles/async-clipboard).


### 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.


#### CopyButton Selectors

| Selector | Static selector          | Description                                        |
|----------|---------------------------|----------------------------------------------------|
| root     | .mantine-Button-root      | Root element                                       |
| loader   | .mantine-Button-loader    | Loader component, displayed only when `loading` prop is set |
| inner    | .mantine-Button-inner     | Contains all other elements, child of the root element |
| section  | .mantine-Button-section   | Left and right sections of the button             |
| label    | .mantine-Button-label     | Button children                                   |

#### CopyButton CSS Variables

| Selector | Variable                  | Description                                       |
|----------|---------------------------|---------------------------------------------------|
| root     | --button-bg               | Controls background                               |
|          | --button-bd               | Controls border                                   |
|          | --button-hover            | Controls background when hovered                 |
|          | --button-color            | Controls text color                               |
|          | --button-hover-color      | Controls text color when hovered                 |
|          | --button-radius           | Controls border-radius                            |
|          | --button-height           | Controls height of the button                     |
|          | --button-padding-x        | Controls horizontal padding of the button         |
|          | --button-fz               | Controls font-size of the button                  |
|          | --button-justify          | Controls `justify-content` of the inner element   |

#### CopyButton Data Attributes

| Selector       | Attribute             | Condition               | Value                           |
|----------------|------------------------|--------------------------|---------------------------------|
| root           | data-disabled          | `disabled` prop is set   | –                               |
| root           | data-block             | `fullWidth` prop is set  | –                               |


### Keyword Arguments
#### CopyButton

- children (a list of or a singular dash component, string or number; optional):
    Button content displayed before copying.

- 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 button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- buttonProps (dict; optional):
    Props passed down to the `Button` component.

- 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, used when the value
    has not been copied yet.

- copiedChildren (a list of or a singular dash component, string or number; optional):
    Button content displayed after the value has been copied to
    clipboard.

- copiedColor (optional):
    Key of `theme.colors` or any valid CSS color, used after the value
    has been copied to clipboard.

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

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

- disabled (boolean; optional):
    Indicates disabled state.

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

- gradient (dict; optional):
    Gradient configuration used when `variant="gradient"`, default
    value is `theme.defaultGradient`.

    `gradient` is a dict with keys:

- 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.

- n_clicks (number; default 0):
    An integer that represents the number of times that this element
    has been clicked on.

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

- size (optional):
    Controls button `height`, `font-size` and horizontal `padding`,
    `'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.

- target_id (string; optional):
    The id of target component containing text to copy to the
    clipboard. The inner text of the `children` prop will be copied to
    the clipboard.  If none, then the text from the  `value` prop will
    be copied.

- timeout (number; default 1000):
    Copied status timeout in ms, `1000` by default.

- triggerCopy (boolean; default False):
    Set to True to trigger copy in a callback - will auto-reset to
    False after copy.

- value (string; default ''):
    Value to be copied to clipboard.

- variant (string; optional):
    variant.

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

- children (boolean | number | string | dict | list; optional):
    Function that receives {copied, copy} and returns a component  See
    https://www.dash-mantine-components.com/functions-as-props.

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

- timeout (number; default 1000):
    Copied status timeout in ms, `1000` by default.

- value (string; required):
    Value to be copied to clipboard.

## An Introduction to Charts  
Getting started with chart components.  
Category: Charts  

### CSS Extensions

As of DMC 1.2.0, Chart component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.

### Based on recharts

Most of the chart components are based on [recharts](https://recharts.org/) library. If you need advanced features that are not covered in dmc charts documentation, please refer to the [recharts documentation](https://recharts.org/en-US/api) for more information.

## AreaChart  
Area chart component with stacked, percent and split variants.  
Category: Charts  

### Introduction

Use `AreaChart` component without `type` prop to render a regular area chart. In a regular area chart, each data series
is plotted on its own and does not interact with other series.

```python
import dash_mantine_components as dmc
from .data import data

dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    series = [
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ],
    curveType="linear",
    tickLine="xy",
    withGradient=False,
    withXAxis=False,
    withDots=False,
)
```

### Data
Here is the data imported for the examples on this page:

```python

data = [
  {"date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452},
  {"date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402},
  {"date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": 1821},
  {"date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809},
  {"date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}
]
```

### Stacked area chart
Set type="stacked" to render a stacked area chart. In this type of area chart stacking is applied along the vertical
axis, allowing you to see the overall trend as well as the contribution of each individual series to the total.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Percent area chart
Set type="percent" to render a percent area chart. In this type of area chart the y-axis scale is always normalized to
100%, making it easier to compare the contribution of each series in terms of percentages.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="percent",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Split area chart 
Set type="split" to render a split area chart. In this type of area chart fill color is split into two colors, one for
positive values and one for negative values. Split area chart supports only one data series.


```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 22", "Apples": 110},
    {"date": "Mar 23", "Apples": 60},
    {"date": "Mar 24", "Apples": -80},
    {"date": "Mar 25", "Apples": 40},
    {"date": "Mar 26", "Apples": -40},
    {"date": "Mar 27", "Apples": 80},
]

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="split",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Streamgraph
Set `type="stream"` to render a streamgraph (also known as ThemeRiver). A streamgraph is a stacked area chart whose 
baseline flows around a central axis instead of being fixed to zero, producing the characteristic organic "river" shape.
It is useful for showing how the composition of a total shifts over time when the overall flow and proportions matter more
than exact values.

Since the baseline floats, the y-axis values are not meaningful to read off – the y-axis is hidden by default for `type="stream"`.
You can set `withYAxis` back to `True` if you need it.


```python
import dash_mantine_components as dmc

data = [
    {"month": "Jan", "Apples": 220, "Oranges": 140, "Tomatoes": 90, "Grapes": 60},
    {"month": "Feb", "Apples": 260, "Oranges": 180, "Tomatoes": 120, "Grapes": 90},
    {"month": "Mar", "Apples": 300, "Oranges": 240, "Tomatoes": 180, "Grapes": 140},
    {"month": "Apr", "Apples": 340, "Oranges": 320, "Tomatoes": 260, "Grapes": 200},
    {"month": "May", "Apples": 380, "Oranges": 420, "Tomatoes": 360, "Grapes": 280},
    {"month": "Jun", "Apples": 420, "Oranges": 520, "Tomatoes": 460, "Grapes": 360},
    {"month": "Jul", "Apples": 400, "Oranges": 560, "Tomatoes": 520, "Grapes": 420},
    {"month": "Aug", "Apples": 360, "Oranges": 520, "Tomatoes": 560, "Grapes": 460},
    {"month": "Sep", "Apples": 300, "Oranges": 440, "Tomatoes": 520, "Grapes": 420},
    {"month": "Oct", "Apples": 260, "Oranges": 340, "Tomatoes": 440, "Grapes": 360},
    {"month": "Nov", "Apples": 220, "Oranges": 260, "Tomatoes": 340, "Grapes": 280},
    {"month": "Dec", "Apples": 200, "Oranges": 200, "Tomatoes": 260, "Grapes": 200},
]

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="month",
    type="stream",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
        {"name": "Grapes", "color": "grape.6"},
    ],
)
```
### Split colors
Set `splitColors` prop to an array of two colors to customize the fill color of split area chart. The first color is
used for positive values and the second color for negative values. `splitColors` prop is ignored in other types of area charts.

```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 22", "Apples": 110},
    {"date": "Mar 23", "Apples": 60},
    {"date": "Mar 24", "Apples": -80},
    {"date": "Mar 25", "Apples": 40},
    {"date": "Mar 26", "Apples": -40},
    {"date": "Mar 27", "Apples": 80},
]

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="split",
    strokeWidth=1,
    activeDotProps={"r": 2, "strokeWidth": 1},
    series=[{"name": "Apples", "color": "bright"}],
    splitColors=["violet", "orange"],
)
```
### Legend
To display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data
series is highlighted in the chart.Tooltip

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    withLegend=True,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Legend position
You can pass props down to recharts Legend component with `legendProps` prop. For example, setting the following will
render the legend at the bottom of the chart and set its height to 50px:
```python
legendProps={'verticalAlign': 'bottom', 'height': 50} 
```

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    withLegend=True,
    legendProps={"verticalAlign": "bottom", "height": 50},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Series labels
By default, series `name` is used as a label. To change it, set `label` property in `series` object:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    withLegend=True,
    legendProps={"verticalAlign": "bottom"},
    series=[
        {"name": "Apples", "label": "Apples sales", "color": "indigo.6"},
        {"name": "Oranges", "label": "Oranges sales", "color": "blue.6"},
        {"name": "Tomatoes", "label": "Tomatoes sales", "color": "teal.6"},
    ],
)
```
### Connect nulls
Use `connectNulls` prop to specify whether to connect a data point across null points. By default, `connectNulls` is true.


```python
import dash_mantine_components as dmc

data = [
  {"date": "Mar 22", "Apples": 110},
  {"date": "Mar 23", "Apples": 60},
  {"date": "Mar 24", "Apples": -80},
  {"date": "Mar 25", "Apples": 40},
  {"date": "Mar 26", "Apples": None},
  {"date": "Mar 27", "Apples": 80}
]

dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    connectNulls=True,
    series=[{"name": "Apples", "color": "indigo.6"}],
    curveType="linear",
)

```
### X and Y axis props
Use `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these props can
be used to change orientation of axis:

```python
import dash_mantine_components as dmc
from .data import data


component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    tickLine="xy",
    yAxisProps={"tickMargin": 15, "orientation": "right"},
    xAxisProps={"tickMargin": 15, "orientation": "top"},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Axis labels
Use `xAxisLabel` and `yAxisLabel` props to display axis labels:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    xAxisLabel="Date",
    yAxisLabel="Amount",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### X axis offset
Use xAxisProps to set padding between the charts ends and the x-axis:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    xAxisProps={"padding": {"left": 30, "right": 30}},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Y axis scale
Use `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range
of 0 to 100, you can set domain to [0, 100]:

```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 22", "Apples": 50},
    {"date": "Mar 23", "Apples": 60},
    {"date": "Mar 24", "Apples": 40},
    {"date": "Mar 25", "Apples": 30},
    {"date": "Mar 26", "Apples": 0},
    {"date": "Mar 27", "Apples": 20},
    {"date": "Mar 28", "Apples": 20},
    {"date": "Mar 29", "Apples": 10},
]

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    yAxisProps={"domain": [0, 100]},
    data=data,
    connectNulls=True,
    series=[{"name": "Apples", "color": "indigo.6"}],
)
```
### Right Y axis

To display additional Y axis on the right side of the chart, set `withRightYAxis` prop. You can pass props down to
recharts `YAxis` component with `rightYAxisProps` prop and assign a label to the right Y axis with `rightYAxisLabel` prop.
Note that you need to bind data series to the right Y axis by setting `yAxisId` in the series object.

```python
import dash_mantine_components as dmc

data = biaxial_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398},
    {"name": "Page C", "uv": 2000, "pv": 9800},
    {"name": "Page D", "uv": 2780, "pv": 3908},
    {"name": "Page E", "uv": 1890, "pv": 4800},
    {"name": "Page F", "uv": 2390, "pv": 3800},
    {"name": "Page G", "uv": 3490, "pv": 4300},
]

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="name",
    withRightYAxis=True,
    yAxisLabel="uv",
    rightYAxisLabel="pv",
    series=[
        {"name": "uv", "color": "pink.6"},
        {"name": "pv", "color": "cyan.6", "yAxisId": "right"},
    ],
)
```
### Rotate x-axis labels
To rotate x-axis labels, set `xAxisProps.angle` to a number of degrees to rotate:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    tickLine="xy",
    xAxisProps={"angle": -20},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Value formatter
To format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`
as an argument and returns formatted value:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    tickLine="xy",
    valueFormatter={"function": "formatNumberIntl"},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatNumberIntl = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
};
```


### Area color
You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. 
Any valid CSS color value is also accepted.


```python
import dash_mantine_components as dmc

data = [
  {"date": "Mar 22", "Apples": 110},
  {"date": "Mar 23", "Apples": 60},
  {"date": "Mar 24", "Apples": -80},
  {"date": "Mar 25", "Apples": 40},
  {"date": "Mar 26", "Apples": 60},
  {"date": "Mar 27", "Apples": 80}
]

dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    withGradient=True,
    series=[{"name": "Apples", "color": "orange.7"}],
)

```

### Change area color depending on color scheme
You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

Example of area that is dark orange in light mode and lime in dark mode:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    withGradient=True,
    series=[{"name": "Apples", "color": "var(--chart-color)"}],
)
```

```css
:root {
   --chart-color: var(--mantine-color-orange-8)
}

:root[data-mantine-color-scheme="dark"] {
  --chart-color: var(--mantine-color-lime-4);
}
```


### Stroke dash array
Set `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the
lengths of alternating dashes and gaps. For example, strokeDasharray="10 5" will render a dashed line with 10px dashes
and 5px gaps.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    strokeDasharray="15 15",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Grid and text colors
Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. 
With CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)



```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    className="chart-grid-text-colors",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```

```css

.chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-5);
  --chart-text-color: var(--mantine-color-blue-8);
}

[data-mantine-color-scheme='dark'] .chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-3);
  --chart-text-color: var(--mantine-color-blue-2);
}
```

If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:

```python
dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    gridColor="gray.5",
    textColor = "gray.9",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```

### Tooltip animation
By default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of
milliseconds to animate the tooltip position change.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    tooltipAnimationDuration=200,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Area animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `areaProps` to pass properties to the Recharts `Area` component.

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

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-areachart-animation"),
        dmc.AreaChart(
            id="areachart-animation",
            h=300,
            dataKey="date",
            data=[{}],
            tooltipAnimationDuration=500,
            areaProps={
                "isAnimationActive": True,
                "animationDuration": 500,
                "animationEasing": "ease-in-out",
                "animationBegin": 500,
            },
            series=[
                {"name": "Apples", "color": "indigo.6"},
                {"name": "Oranges", "color": "blue.6"},
                {"name": "Tomatoes", "color": "teal.6"},
            ],
        ),
    ]
)


@callback(
    Output("areachart-animation", "data"), Input("btn-areachart-animation", "n_clicks")
)
def update(n):
    return [
        {
            "date": "Mar 22",
            "Apples": 2890,
            "Oranges": 2338,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 23",
            "Apples": 2756,
            "Oranges": 2103,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 24",
            "Apples": 3322,
            "Oranges": 986,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 25",
            "Apples": 3470,
            "Oranges": 2108,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 26",
            "Apples": 3129,
            "Oranges": 1726,
            "Tomatoes": randint(1000, 4000),
        },
    ]
```
### Units
Set `unit` prop to render a unit label next to the y-axis ticks and tooltip values:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    unit="$",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Remove tooltip
To remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    withTooltip=False,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Customize dots
Use `dotProps` to pass props down to recharts dot in regular state and `activeDotProps` to pass props down to recharts dot in active state (when cursor is over the current series).

```python
import dash_mantine_components as dmc
from .data import data


component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    dotProps={"r": 6, "strokeWidth": 2, "stroke": "#fff"},
    activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Stroke width
Use `strokeWidth` prop to control the stroke width of all areas:

```python
import dash_mantine_components as dmc
from .data import data

dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ],
    strokeWidth=2,
)

```

### Fill opacity
Use `fillOpacity` prop to control the fill opacity of all areas:

```python

import dash_mantine_components as dmc
from .data import data

dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ],
    fillOpacity="0.2",
    withGradient=False,
)
```

### Sync multiple AreaCharts
You can pass props down to recharts AreaChart component with `areaChartProps` prop. For example, setting the following 
will sync tooltip of multiple `AreaChart` components with the same `syncId` prop.

```python
areaChartProps={"syncId": "any-id"}
```
```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [
        dmc.Text("Apples sales:"),
        dmc.AreaChart(
            h=180,
            dataKey="date",
            data=data,
            series=[{"name": "Apples", "color": "indigo.6"}],
            areaChartProps={"syncId": "groceries"},
        ),
        dmc.Text("Tomatoes sales"),
        dmc.AreaChart(
            h=180,
            dataKey="date",
            data=data,
            series=[{"name": "Tomatoes", "color": "teal.6"}],
            areaChartProps={"syncId": "groceries"},
        ),
    ]
)
```
### Vertical orientation
Set orientation="vertical" to render a vertical area chart:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    orientation="vertical",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Dashed area line
Set `strokeDasharray` property in series to change line style to dashed:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    strokeWidth=1,
    dotProps={"r": 2},
    activeDotProps={"r": 3, "strokeWidth": 1},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6", "strokeDasharray": "5 5"},
    ],
)
```
### Reference lines
Use `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.

```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 22", "Apples": 50},
    {"date": "Mar 23", "Apples": 60},
    {"date": "Mar 24", "Apples": 40},
    {"date": "Mar 25", "Apples": 30},
    {"date": "Mar 26", "Apples": 0},
    {"date": "Mar 27", "Apples": 20},
    {"date": "Mar 28", "Apples": 20},
    {"date": "Mar 29", "Apples": 10},
]


component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    yAxisProps={"domain": [0, 100]},
    referenceLines=[
        {"y": 40, "label": "Average sales", "color": "red.6"},
        {"x": "Mar 25", "label": "Report out"},
    ],
    series=[{"name": "Apples", "color": "indigo.6"}],
)
```
### Reference areas
Use the `referenceAreas` prop to highlight a rectangular region of the chart. Each area is bounded by x1/x2 (horizontal)
and y1/y2 (vertical) data values – omit one pair to span the full opposite axis, for example provide only x1/x2 to
highlight a time range across the entire height of the chart. Set `color` to any theme color or CSS color and label
to display text inside the area. Reference areas are rendered behind the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="date",
    type="stacked",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    referenceAreas=[
        {"x1": "Mar 23", "x2": "Mar 25", "color": "red.6", "label": "Weekend"},
    ],
)
```
### Reference dots
Use the `referenceDots` prop to mark individual points on the chart – a peak, an event, a record value or an anomaly. 
Each dot is positioned by x and y data coordinates and supports `r` (radius), `color` (any theme color or CSS color) and
`label`. Reference dots are rendered on top of the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="date",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    referenceDots=[
        {"x": "Mar 25", "y": 3470, "color": "red.6", "label": "Peak"},
    ],
)
```
### Brush (Range Slider)
Set the `withBrush` prop to display a brush (range slider) under the chart. Drag the brush handles to
zoom into a subset of the data. The chart updates to show only the selected range. The brush border and background are
themed to match the chart grid and adapt to the color scheme. `withBrush` is `False` by default and is supported by
`AreaChart`, `BarChart`, `LineChart` and `CompositeChart` components with `horizontal` orientation.

Use the `brushDragEnd` prop to get the `startIndex` and `endIndex` of the selected range when dragging ends. 


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

data = [
    {"date": "Mar 1", "Apples": 2200, "Oranges": 1400},
    {"date": "Mar 2", "Apples": 2500, "Oranges": 1500},
    {"date": "Mar 3", "Apples": 2800, "Oranges": 1700},
    {"date": "Mar 4", "Apples": 3100, "Oranges": 1600},
    {"date": "Mar 5", "Apples": 3000, "Oranges": 1800},
    {"date": "Mar 6", "Apples": 2700, "Oranges": 2000},
    {"date": "Mar 7", "Apples": 2400, "Oranges": 2100},
    {"date": "Mar 8", "Apples": 2100, "Oranges": 1900},
    {"date": "Mar 9", "Apples": 1900, "Oranges": 1700},
    {"date": "Mar 10", "Apples": 2200, "Oranges": 1500},
    {"date": "Mar 11", "Apples": 2600, "Oranges": 1600},
    {"date": "Mar 12", "Apples": 3000, "Oranges": 1800},
    {"date": "Mar 13", "Apples": 3300, "Oranges": 2000},
    {"date": "Mar 14", "Apples": 3100, "Oranges": 2200},
    {"date": "Mar 15", "Apples": 2800, "Oranges": 2100},
    {"date": "Mar 16", "Apples": 2500, "Oranges": 1900},
]

component = dmc.Stack([
    dmc.AreaChart(
        h=300,
        data=data,
        dataKey="date",
        withBrush=True,
        series=[
            {"name": "Apples", "color": "indigo.6"},
            {"name": "Oranges", "color": "blue.6"},
        ],
        id="areachart-brush"
    ),
    dmc.Text(id="areachart-brush-dragend")
])

@callback(
    Output("areachart-brush-dragend", "children"),
    Input("areachart-brush", "brushDragEnd"),
)
def brushDragEnd(brushDragEnd):
    return f"Brush range selected: {brushDragEnd}"
```
### Brush props
Use the `brushProps` prop to pass props down to the underlying [recharts Brush](https://recharts.github.io/en-US/api/Brush/) component. For example, you can set the
initially selected range with `startIndex`/`endIndex`, change the brush height and more:

```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 1", "Apples": 2200, "Oranges": 1400},
    {"date": "Mar 2", "Apples": 2500, "Oranges": 1500},
    {"date": "Mar 3", "Apples": 2800, "Oranges": 1700},
    {"date": "Mar 4", "Apples": 3100, "Oranges": 1600},
    {"date": "Mar 5", "Apples": 3000, "Oranges": 1800},
    {"date": "Mar 6", "Apples": 2700, "Oranges": 2000},
    {"date": "Mar 7", "Apples": 2400, "Oranges": 2100},
    {"date": "Mar 8", "Apples": 2100, "Oranges": 1900},
    {"date": "Mar 9", "Apples": 1900, "Oranges": 1700},
    {"date": "Mar 10", "Apples": 2200, "Oranges": 1500},
    {"date": "Mar 11", "Apples": 2600, "Oranges": 1600},
    {"date": "Mar 12", "Apples": 3000, "Oranges": 1800},
    {"date": "Mar 13", "Apples": 3300, "Oranges": 2000},
    {"date": "Mar 14", "Apples": 3100, "Oranges": 2200},
    {"date": "Mar 15", "Apples": 2800, "Oranges": 2100},
    {"date": "Mar 16", "Apples": 2500, "Oranges": 1900},
]

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="date",
    withBrush=True,
    brushProps={"startIndex": 3, "endIndex": 10, "height": 30},
    series=[{"name": "Apples", "color": "indigo.6"}],
)
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event.
To get the name of the clicked series, use the `clickSeriesName` property.

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


component = dmc.Group(
    [
        dmc.AreaChart(
            id="figure-areachart",
            h=300,
            dataKey="date",
            data=data,
            type="stacked",
            series=[
                {"name": "Apples", "color": "indigo.6"},
                {"name": "Oranges", "color": "blue.6"},
                {"name": "Tomatoes", "color": "teal.6"},
            ],
        ),
        dmc.Text(id="clickdata-areachart1"),
        dmc.Text(id="clickdata-areachart2"),
    ]
)


@callback(
    Output("clickdata-areachart1", "children"),
    Output("clickdata-areachart2", "children"),
    Input("figure-areachart", "clickData"),
    Input("figure-areachart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event.
To get the name of the hovered series, use the `hoverSeriesName` property.

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


component = dmc.Group(
    [
        dmc.AreaChart(
            id="figure-areachart-hover",
            h=300,
            dataKey="date",
            data=data,
            type="stacked",
            series=[
                {"name": "Apples", "color": "indigo.6"},
                {"name": "Oranges", "color": "blue.6"},
                {"name": "Tomatoes", "color": "teal.6"},
            ],
        ),
        dmc.Text(id="hoverdata-areachart1"),
        dmc.Text(id="hoverdata-areachart2"),
    ]
)


@callback(
    Output("hoverdata-areachart1", "children"),
    Output("hoverdata-areachart2", "children"),
    Input("figure-areachart-hover", "hoverData"),
    Input("figure-areachart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### highlightHover

Set `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    highlightHover=True
)
```
### 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.


#### AreaChart selectors

| Name            | Static selector                    | Description                                   |
|:----------------|:----------------------------------|:----------------------------------------------|
| root            | .mantine-AreaChart-root            | Root element                                  |
| area            | .mantine-AreaChart-area            | Area of the chart                             |
| axis            | .mantine-AreaChart-axis            | X and Y axis of the chart                     |
| container       | .mantine-AreaChart-container       | Recharts ResponsiveContainer component        |
| grid            | .mantine-AreaChart-grid            | Recharts CartesianGrid component              |
| legend          | .mantine-AreaChart-legend          | Legend root element                           |
| legendItem      | .mantine-AreaChart-legendItem      | Legend item representing data series          |
| legendItemColor | .mantine-AreaChart-legendItemColor | Legend item color                             |
| legendItemName  | .mantine-AreaChart-legendItemName  | Legend item name                              |
| tooltip         | .mantine-AreaChart-tooltip         | Tooltip root element                          |
| tooltipBody     | .mantine-AreaChart-tooltipBody     | Tooltip wrapper around all items              |
| tooltipItem     | .mantine-AreaChart-tooltipItem     | Tooltip item representing data series         |
| tooltipItemBody | .mantine-AreaChart-tooltipItemBody | Tooltip item wrapper around item color and name|
| tooltipItemColor| .mantine-AreaChart-tooltipItemColor| Tooltip item color                            |
| tooltipItemName | .mantine-AreaChart-tooltipItemName | Tooltip item name                             |
| tooltipItemData | .mantine-AreaChart-tooltipItemData | Tooltip item data                             |
| tooltipLabel    | .mantine-AreaChart-tooltipLabel    | Label of the tooltip                          |
| referenceLine   | .mantine-AreaChart-referenceLine   | Reference line                                |
| axisLabel       | .mantine-AreaChart-axisLabel       | X and Y axis labels                           |

#### AreaChart CSS variables

| Selector           | Variable             | Description                                      |
|:-------------------|:---------------------|:-------------------------------------------------|
| root               | --chart-grid-color   | Controls color of the grid and cursor lines      |
|                    | --chart-text-color   | Controls color of the axis labels                |



### Keyword Arguments
#### AreaChart

- children (a list of or a singular dash component, string or number; optional):
    Additional components that are rendered inside recharts
    `AreaChart` component.

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

- accessibilityLayer (boolean; optional):
    Determines whether the chart should be keyboard-navigable with the
    recharts accessibility layer, `True` by default.

- activeDotProps (dict; optional):
    Props passed down to all active dots. Ignored if
    `withDots={False}` is set.

- areaChartProps (dict; optional):
    Props passed down to recharts `AreaChart` component.

- areaProps (dict; optional):
    Props passed down to recharts `Area` component.

- 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.

- brushDragEnd (dict; optional):
    The startIndex and endIndex  of the selected brush range when
    dragging ends. Read only.

    `brushDragEnd` is a dict with keys:

- brushProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Brush` component.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

- connectNulls (boolean; optional):
    Determines whether points with `None` values should be connected,
    `True` by default.

- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):
    Type of the curve, `'monotone'` by default.

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

- data (list of dicts; required):
    Data used to display chart.

    `data` is a list of dicts with keys:

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

- dataKey (string; required):
    Key of the `data` object for x-axis values.

- dotProps (dict; optional):
    Props passed down to all dots. Ignored if `withDots={False}` is
    set.

- fillOpacity (number; optional):
    Controls fill opacity of all areas, `0.2` by default.

- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which lines should be displayed in the grid, `'x'` by
    default.

- gridColor (optional):
    Color of the grid and cursor lines, by default depends on color
    scheme.

- gridProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `CartesianGrid` component.

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

- highlightHover (boolean; optional):
    Determines whether a hovered series is highlighted. False by
    default. Mirrors the behaviour when hovering about chart legend
    items.

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- legendProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Legend` component.

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Chart orientation, `'horizontal'` by default.

- referenceAreas (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference areas that should be displayed on the chart.

- referenceDots (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference dots that should be displayed on the chart.

- referenceLines (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference lines that should be displayed on the chart.

- rightYAxisLabel (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- rightYAxisProps (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- series (list of dicts; required):
    An array of objects with `name` and `color` keys. Determines which
    data should be consumed from the `data` array.

    `series` is a list of dicts with keys:

- splitColors (list of 2 elements: [, ]; optional):
    A tuple of colors used when `type="split"` is set, ignored in
    all other cases. A tuple may include theme colors reference or any
    valid CSS colors `['green.7', 'red.7']` by default.

- splitOffset (number; optional):
    Offset for the split gradient. By default, value is inferred from
    `data` and `series` if possible. Must be generated from the data
    array with `getSplitOffset` function.

- strokeDasharray (string | number; optional):
    Dash array for the grid lines and cursor, `'5 5'` by default.

- strokeWidth (number; optional):
    Stroke width for the chart areas, `2` 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.

- textColor (optional):
    Color of the text displayed inside the chart, `'dimmed'` by
    default.

- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which axis should have tick line, `'y'` by default.

- tooltipAnimationDuration (number; optional):
    Tooltip position animation duration in ms, `0` by default.

- tooltipProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Tooltip` component.

- type (a value equal to: 'default', 'stacked', 'percent', 'split', 'stream'; optional):
    Controls how chart areas are positioned relative to each other,
    `'default'` by default.

- unit (string; optional):
    Unit displayed next to each tick in y-axis.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format values on Y axis and inside the tooltip. See
    https://www.dash-mantine-components.com/functions-as-props.

- variant (string; optional):
    variant.

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

- withBrush (boolean; optional):
    Determines whether a brush (range selector) should be displayed
    under the chart, `False` by default.

- withDots (boolean; optional):
    Determines whether dots should be displayed, `True` by default.

- withGradient (boolean; optional):
    Determines whether the chart area should be represented with a
    gradient instead of the solid color, `False` by default.

- withLegend (boolean; optional):
    Determines whether chart legend should be displayed, `False` by
    default.

- withPointLabels (boolean; optional):
    Determines whether each point should have associated label, False
    by default.

- withRightYAxis (boolean; optional):
    Determines whether additional y-axis should be displayed on the
    right side of the chart, False by default.

- withTooltip (boolean; optional):
    Determines whether chart tooltip should be displayed, `True` by
    default.

- withXAxis (boolean; optional):
    Determines whether x-axis should be hidden, `True` by default.

- withYAxis (boolean; optional):
    Determines whether y-axis should be hidden, `True` by default.

- xAxisLabel (string; optional):
    A label to display below the x-axis.

- xAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `XAxis` recharts component.

- yAxisLabel (string; optional):
    A label to display next to the y-axis.

- yAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `YAxis` recharts component.

## BarChart  
Use BarChart component without type prop to render a regular bar chart. In a regular bar chart, each data series is plotted on its own and does not interact with other series.  
Category: Charts  

### Introduction

```python

import dash_mantine_components as dmc
from .data import data

dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"}
    ],
    tickLine="y",
    gridAxis="y",
    withXAxis=True,
    withYAxis=True
)

```

### Data

Here is the data used in all the examples on this page:

```python
data = [
    {"month": "January", "Smartphones": 1200, "Laptops": 900, "Tablets": 200},
    {"month": "February", "Smartphones": 1900, "Laptops": 1200, "Tablets": 400},
    {"month": "March", "Smartphones": 400, "Laptops": 1000, "Tablets": 200},
    {"month": "April", "Smartphones": 1000, "Laptops": 200, "Tablets": 800},
    {"month": "May", "Smartphones": 800, "Laptops": 1400, "Tablets": 1200},
    {"month": "June", "Smartphones": 750, "Laptops": 600, "Tablets": 1000}
]
```

### Stacked bar chart
Set type="stacked" to render a stacked bar chart. In this type of bar chart stacking is applied along the vertical axis,
allowing you to see the overall trend as well as the contribution of each individual series to the total.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Mixed stacked bar chart

You can control how series are stacked by setting `stackId` property in `series` dictionary:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    series=[
        {"name": "Smartphones", "color": "violet.6", "stackId": "a"},
        {"name": "Laptops", "color": "blue.6", "stackId": "b"},
        {"name": "Tablets", "color": "teal.6", "stackId": "b"},
    ],
)
```
### Percent bar chart
Set type="percent" to render a percent bar chart. In this type of bar chart the y-axis scale is always normalized 
to 100%, making it easier to compare the contribution of each series in terms of percentages.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="percent",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Waterfall

Set `type="waterfall"` to render a waterfall bar chart. This chart type illustrates how an initial value is influenced
by subsequent positive or negative values, with each bar starting where the previous one ended. Use the `color` prop
inside data to color each bar individually. Note that the series color gets overwritten for this specific bar. Use the
`standalone` prop inside data to decouple the bar from the flow.

```python
import dash_mantine_components as dmc

data = [
    {"item": "TaxRate", "Effective tax rate in %": 21, "color": "blue"},
    {"item": "Foreign inc.", "Effective tax rate in %": -15.5, "color": "teal"},
    {"item": "Perm. diff.", "Effective tax rate in %": -3, "color": "teal"},
    {"item": "Credits", "Effective tax rate in %": -3, "color": "teal"},
    {"item": "Loss carryf.", "Effective tax rate in %": -2, "color": "teal"},
    {"item": "Law changes", "Effective tax rate in %": 2, "color": "red"},
    {"item": "Reven. adj.", "Effective tax rate in %": 4, "color": "red"},
    {
        "item": "ETR",
        "Effective tax rate in %": 3.5,
        "color": "blue",
        "standalone": True,
    },
]

component = dmc.BarChart(
    h=300,
    data=data,
    dataKey="item",
    type="waterfall",
    series=[{"name": "Effective tax rate in %", "color": "blue"}],
    withLegend=True,
)
```
### SVG Pattern as bar fill

You can use SVG patterns as bar fill. To do so, set `fill` property in series object to a url of the SVG pattern.

Example of using diagonal stripes and crosshatch patterns as bar fill:


```python
import dash_mantine_components as dmc
from dash import html, dcc
from .data import data

# Define patterns for custom colors
pattern_definitions = dcc.Markdown('''
<svg>
  <defs>
    <pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="6" height="8" patternTransform="rotate(45)">
      <rect width="2" height="8" fill="rgba(0, 128, 128, 0.7)"></rect>
    </pattern>
    <pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8">
      <path d="M 0 0 L 8 0 L 8 8 L 0 8 Z" fill="none" stroke="rgba(75, 0, 130, 0.7)" strokeWidth="1"></path>
      <path d="M 0 0 L 8 8" stroke="rgba(75, 0, 130, 0.7)" strokeWidth="1"></path>
      <path d="M 8 0 L 0 8" stroke="rgba(75, 0, 130, 0.7)" strokeWidth="1"></path>
    </pattern>
  </defs>
</svg>
''', dangerously_allow_html=True)

component = html.Div([
    pattern_definitions,
    dmc.BarChart(
        h=300,
        dataKey="month",
        data=data,
        type="stacked",
        series=[
            {"name": "Smartphones", "color": "url(#crosshatch)"},
            {"name": "Laptops", "color": "blue.6"},
            {"name": "Tablets", "color": "url(#diagonalStripes)"},
        ],
    )
])
```
### Bar color based on value
Use `getBarColor` prop to assign color based on `value`. `getBarColor` function is called with two arguments: `value`
and `series` object. It should return a color string (theme color reference or any valid CSS color value).

Note that color returned by `getBarColor` does not impact colors of the legend and tooltip.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python

import dash_mantine_components as dmc

data = [
    {"month": "January", "Smartphones": 1200, "Laptops": 900, "Tablets": 200},
    {"month": "February", "Smartphones": 1900, "Laptops": 1200, "Tablets": 400},
    {"month": "March", "Smartphones": 400, "Laptops": 1000, "Tablets": 200},
    {"month": "April", "Smartphones": 1000, "Laptops": 200, "Tablets": 800},
    {"month": "May", "Smartphones": 800, "Laptops": 1400, "Tablets": 1200},
    {"month": "June", "Smartphones": 750, "Laptops": 600, "Tablets": 1000},
]

component = dmc.BarChart(
    h=300,
    data=data,
    dataKey="month",
    series=[{"name": "Laptops", "color": "gray.6"}],
    getBarColor={"function": "barColor"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

// Highlights bars with value > 700 in teal, others in red
dmcfuncs.barColor = (value) => {
  return value > 700 ? 'teal.8' : 'red.8';
};
```



### Legend
To display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data
series is highlighted in the chart.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    withLegend=True,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Legend position
You can pass props down to recharts `Legend` component with `legendProps` prop. For example, setting the following will
render the legend at the bottom of the chart and set its height to 50px.

```python
legendProps={"verticalAlign": "bottom", "height": 50} 
```

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    withLegend=True,
    legendProps={"verticalAlign": "bottom", "height": 50},
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Series labels
By default, series `name` is used as a label. To change it, set `label` property in `series` object:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    withLegend=True,
    legendProps={"verticalAlign": "bottom"},
    series=[
        {"name": "Smartphones", "label": "Smartphones sales", "color": "violet.6"},
        {"name": "Laptops", "label": "Laptops sales", "color": "blue.6"},
        {"name": "Tablets", "label": "Tablets sales", "color": "teal.6"},
    ],
)
```
### X and Y axis props
Use `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these
props can be used to change orientation of axis:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    tickLine="xy",
    yAxisProps={"tickMargin": 15, "orientation": "right"},
    xAxisProps={"tickMargin": 15, "orientation": "top"},
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Axis labels
Use `xAxisLabel` and `yAxisLabel` props to display axis labels:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    xAxisLabel="Date",
    yAxisLabel="Amount",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### X axis offset
Use `xAxisProps` to set padding between the charts ends and the x-axis:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    xAxisProps={"padding": {"left": 30, "right": 30}},
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Y axis scale
Use `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range
of 0 to 150, you can set domain to `[0, 150]`:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    yAxisProps={"domain": [0, 250]},
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Value formatter
To format values in the tooltip and axis ticks, use `valueFormat` prop. It accepts a function that takes number `value`
as an argument and returns formatted value:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    data=data,
    dataKey="month",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    valueFormatter={"function": "formatNumberIntl"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatNumberIntl = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
};
```


### Area color
You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc.
Any valid CSS color value is also accepted.


```python
import dash_mantine_components as dmc
from .data import data

dmc.BarChart(
    h=300,
    dataKey="date",
    data=data,
    fillOpacity=0.5,
    series=[{"name": "Smartphones", "color": "orange.7"}],
)

```


### Change area color depending on color scheme
You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

Example of bar area color that is dark orange in light mode and lime in dark mode:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="date",
    data=data,
    series=[{"name": "Smartphones", "color": "var(--chart-color)"}],
)
```

```css
:root {
   --chart-color: var(--mantine-color-orange-8)
}

:root[data-mantine-color-scheme="dark"] {
  --chart-color: var(--mantine-color-lime-4);
}
```


### Bar props
You can pass props down to recharts [Bar](https://recharts.org/en-US/api/Bar) component with `barProps` prop. `barProps` accepts an object with rechart props.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    orientation="vertical",
    yAxisProps={"width": 80},
    barProps={"radius": 50},
    series=[{"name": "Smartphones", "color": "violet.6"}],
)
```
### Bar animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `barProps` to pass properties to the Recharts `Bar` component.


```python
from random import randint

import dash
import dash_mantine_components as dmc
from dash import callback, Input, Output

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-barchart-animation"),
        dmc.BarChart(
            id="barchart-animation",
            h=300,
            dataKey="month",
            data=[{}],
            type="stacked",
            barProps={"isAnimationActive": True},
            series=[
                {"name": "Smartphones", "color": "violet.6"},
                {"name": "Laptops", "color": "blue.6"},
                {"name": "Tablets", "color": "teal.6"},
            ],
        ),
    ]
)


@callback(
    Output("barchart-animation", "data"), Input("btn-barchart-animation", "n_clicks")
)
def update(n):
    if n and n > 0:
        return [
            {
                "month": month,
                "Smartphones": randint(50, 300),
                "Laptops": randint(30, 200),
                "Tablets": randint(20, 150),
            }
            for month in ["January", "February", "March", "April", "May", "June"]
        ]
    return dash.no_update
```
### Stroke dash array
Set `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the lengths of alternating dashes and gaps. For example, strokeDasharray="10 5" will render a dashed line with 10px dashes and 5px gaps.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    strokeDasharray="15 15",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Grid and text colors
Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. 
With CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)



```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    className="chart-grid-text-colors",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```

```css

.chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-5);
  --chart-text-color: var(--mantine-color-blue-8);
}

[data-mantine-color-scheme='dark'] .chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-3);
  --chart-text-color: var(--mantine-color-blue-2);
}
```

If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:

```python
dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    gridColor="gray.5",
    textColor = "gray.9",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```

### Tooltip animation
By default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of milliseconds to animate the tooltip position change.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    tooltipAnimationDuration=200,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Units
Set `unit` prop to render a unit label next to the y-axis ticks and tooltip values:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    unit="$",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Remove tooltip
To remove tooltip, set `withTooltip=false`. It also removes the cursor line and disables interactions with the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    withTooltip=False,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Custom tooltip
Use the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:
```python
 tooltipProps={'content': {'functon': 'myFunction'}}
```


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data


component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"}
    ],
    tickLine="y",
    gridAxis="y",
    withXAxis=True,
    withYAxis=True,
    tooltipProps={"content":  {"function": "chartTooltip"}}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.chartTooltip = ({ label, payload }) => {

  if (!payload || payload.length === 0) return null;

  return React.createElement(
    dmc.Paper,
    {
      px: "md",
      py: "sm",
      withBorder: true,
      shadow: "md",
      radius: "md",
    },
    [
      React.createElement(
        dmc.Text,
        {
          key: "tooltip-label",
          fw: 500,
          mb: 5,
        },
        label
      ),
      ...payload.map((item, index) =>
        React.createElement(
          dmc.Text,
          {
            key: `item-${index}`,
            c: item.color,
            fz: "sm",
          },
          `${item.name}: ${item.value}`
        )
      ),
    ]
  );
};
```


### Sync multiple BarCharts
You can pass props down to recharts [BarChart](https://recharts.org/en-US/api/BarChart) component with `barChartProps` 
prop. For example, setting  will sync tooltip of multiple BarChart components with the same `syncId` prop.

```python
barChartProps={"syncId": "any-id"}
```
```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [
        dmc.Text("Smartphone sales:"),
        dmc.BarChart(
            h=180,
            dataKey="month",
            data=data,
            series=[{"name": "Smartphones", "color": "violet.6"}],
            barChartProps={"syncId": "tech"},
        ),
        dmc.Text("Laptop sales"),
        dmc.BarChart(
            h=180,
            dataKey="month",
            data=data,
            series=[{"name": "Laptops", "color": "teal.6"}],
            barChartProps={"syncId": "tech"},
        ),
    ]
)
```
### Vertical orientation
Set orientation="vertical" to render a vertical bar chart:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    orientation="vertical",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Reference lines

Use `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    withTooltip=False,
    referenceLines=[
        {
            "y": 130,
            "color": "red.5",
            "label": "Profit reached",
            "labelPosition": "insideTopRight",
        }
    ],
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)
```
### Reference areas
Use the `referenceAreas` prop to highlight a rectangular region of the chart. Each area is bounded by x1/x2 (horizontal)
and y1/y2 (vertical) data values – omit one pair to span the full opposite axis, for example provide only x1/x2 to
highlight a time range across the entire height of the chart. Set `color` to any theme color or CSS color and label
to display text inside the area. Reference areas are rendered behind the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    data=data,
    dataKey="month",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    referenceAreas=[
        {"x1": "January", "x2": "March", "color": "red.6", "label": "Q1"},
    ],
)
```
### Reference dots
Use the `referenceDots` prop to mark individual points on the chart – a peak, an event, a record value or an anomaly. 
Each dot is positioned by x and y data coordinates and supports `r` (radius), `color` (any theme color or CSS color) and
`label`. Reference dots are rendered on top of the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    data=data,
    dataKey="month",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    referenceDots=[
        {"x": "February", "y": 1900, "color": "red.6", "label": "Peak"},
    ],
)
```
### Bar value label
To display value above each bar, set `withBarValueLabel=True`:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    withBarValueLabel=True,
    withLegend=True,
    withTooltip=False,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    valueFormatter={"function": "formatNumberIntl"},
)
```
### Bar value label props
You can pass props down to [recharts LabelList](https://recharts.org/en-US/api/LabelList) component with `valueLabelProps` prop. 


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    withBarValueLabel=True,
    valueLabelProps={"position": 'inside', "fill": 'white'},
    withLegend=True,
    withTooltip=False,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    valueFormatter={"function": "formatNumberIntl"},
)
```
### Brush (Range Slider)
Set the `withBrush` prop to display a brush (range slider) under the chart. Drag the brush handles to
zoom into a subset of the data. The chart updates to show only the selected range. The brush border and background are
themed to match the chart grid and adapt to the color scheme. `withBrush` is `False` by default and is supported by
`AreaChart`, `BarChart`, `LineChart` and `CompositeChart` components with `horizontal` orientation.

Use the `brushDragEnd` prop to get the `startIndex` and `endIndex` of the selected range when dragging ends. 

Use the `brushProps` prop to pass props down to the underlying [recharts Brush](https://recharts.github.io/en-US/api/Brush/) component. For example, you can set the
initially selected range with `startIndex`/`endIndex`, change the brush height and more.


```python
import dash_mantine_components as dmc
from dash import callback, Input, Output
from .data import data2

component = dmc.Stack([
    dmc.BarChart(
        h=300,
        data=data2,
        dataKey="month",
        withBrush=True,
        series=[
            {"name": "Smartphones", "color": "violet.6"},
            {"name": "Laptops", "color": "blue.6"},
        ],
        id="barchart-brush",
    ),
    dmc.Text(id="barchart-brush-dragend"),
])

@callback(
    Output("barchart-brush-dragend", "children"),
    Input("barchart-brush", "brushDragEnd"),
)
def update_brush_range(brush_drag_end):
    return f"Brush range selected: {brush_drag_end}"
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event.
To get the name of the clicked series, use the `clickSeriesName` property.

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

component = dmc.Group(
    [
        dmc.BarChart(
            id="figure-barchart",
            h=300,
            dataKey="month",
            data=data,
            type="stacked",
            series=[
                {"name": "Smartphones", "color": "violet.6"},
                {"name": "Laptops", "color": "blue.6"},
                {"name": "Tablets", "color": "teal.6"},
            ],
            withLegend=True,
            withTooltip=False,
        ),
        dmc.Text(id="clickdata-barchart1"),
        dmc.Text(id="clickdata-barchart2"),
    ]
)

@callback(
    Output("clickdata-barchart1", "children"),
    Output("clickdata-barchart2", "children"),
    Input("figure-barchart", "clickData"),
    Input("figure-barchart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event.
To get the name of the hovered series, use the `hoverSeriesName` property.

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

component = dmc.Group(
    [
        dmc.BarChart(
            id="figure-barchart-hover",
            h=300,
            dataKey="month",
            data=data,
            type="stacked",
            series=[
                {"name": "Smartphones", "color": "violet.6"},
                {"name": "Laptops", "color": "blue.6"},
                {"name": "Tablets", "color": "teal.6"},
            ],
            withLegend=True,
            withTooltip=False,
        ),
        dmc.Text(id="hoverdata-barchart1"),
        dmc.Text(id="hoverdata-barchart2"),
    ]
)

@callback(
    Output("hoverdata-barchart1", "children"),
    Output("hoverdata-barchart2", "children"),
    Input("figure-barchart-hover", "hoverData"),
    Input("figure-barchart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### highlightHover

Set `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    withLegend=True,
    withTooltip=False,
    highlightHover=True
)
```
### 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.


#### BarChart selectors

| Selector           | Static selector                   | Description                                      |
|:-------------------|:---------------------------------|:-------------------------------------------------|
| root               | .mantine-BarChart-root           | Root element                                    |
| bar                | .mantine-BarChart-bar            | Bar of the chart                                |
| axis               | .mantine-BarChart-axis           | X and Y axis of the chart                       |
| container          | .mantine-BarChart-container      | Recharts ResponsiveContainer component          |
| grid               | .mantine-BarChart-grid           | Recharts CartesianGrid component                |
| legend             | .mantine-BarChart-legend         | Legend root element                             |
| legendItem         | .mantine-BarChart-legendItem     | Legend item representing data series            |
| legendItemColor    | .mantine-BarChart-legendItemColor| Legend item color                               |
| legendItemName     | .mantine-BarChart-legendItemName | Legend item name                                |
| tooltip            | .mantine-BarChart-tooltip        | Tooltip root element                            |
| tooltipBody        | .mantine-BarChart-tooltipBody    | Tooltip wrapper around all items                |
| tooltipItem        | .mantine-BarChart-tooltipItem    | Tooltip item representing data series           |
| tooltipItemBody    | .mantine-BarChart-tooltipItemBody| Tooltip item wrapper around item color and name|
| tooltipItemColor   | .mantine-BarChart-tooltipItemColor| Tooltip item color                             |
| tooltipItemName    | .mantine-BarChart-tooltipItemName | Tooltip item name                              |
| tooltipItemData    | .mantine-BarChart-tooltipItemData | Tooltip item data                              |
| tooltipLabel       | .mantine-BarChart-tooltipLabel   | Label of the tooltip                            |
| referenceLine      | .mantine-BarChart-referenceLine  | Reference line                                  |
| axisLabel          | .mantine-BarChart-axisLabel      | X and Y axis labels                             |


### BarChart CSS variables

| Selector         | Variable             | Description                                      |
|:-----------------|:---------------------|:-------------------------------------------------|
| root             | --chart-grid-color   | Controls color of the grid and cursor lines      |
|                  | --chart-text-color   | Controls color of the axis labels                |
|                  | --chart-cursor-fill  | Controls fill color of the cursor line           |



### Keyword Arguments
#### BarChart

- children (a list of or a singular dash component, string or number; optional):
    Additional components that are rendered inside recharts `BarChart`
    component.

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

- accessibilityLayer (boolean; optional):
    Determines whether the chart should be keyboard-navigable with the
    recharts accessibility layer, `True` by default.

- 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.

- barChartProps (dict; optional):
    Props passed down to recharts `BarChart` component.

- barLabelColor (optional):
    Controls color of the bar label, by default the value is
    determined by the chart orientation.

- barProps (dict; optional):
    Props passed down to recharts `Bar` component.

- brushDragEnd (dict with strings as keys and values of type number; optional):
    The startIndex and endIndex  of the selected brush range when
    dragging ends. Read only.

- brushProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Brush` component.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

- cursorFill (optional):
    Fill of hovered bar section, by default value is based on color
    scheme.

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

- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):
    Data used to display chart.

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

- dataKey (string; required):
    Key of the `data` object for x-axis values.

- fillOpacity (number; optional):
    Controls fill opacity of all bars, `1` by default.

- getBarColor (boolean | number | string | dict | list; optional):
    A function to assign dynamic bar color based on its value.
    Accepts value and series returns MantineColor.  See
    https://www.dash-mantine-components.com/functions-as-props.

- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which lines should be displayed in the grid, `'x'` by
    default.

- gridColor (optional):
    Color of the grid and cursor lines, by default depends on color
    scheme.

- gridProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `CartesianGrid` component.

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

- highlightHover (boolean; optional):
    Determines whether a hovered series is highlighted. False by
    default. Mirrors the behaviour when hovering about chart legend
    items.

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- legendProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Legend` component.

- 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:

- maxBarWidth (number; optional):
    Maximum bar width in px.

- minBarSize (number; optional):
    Sets minimum height of the bar in px, `0` by default.

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Chart orientation, `'horizontal'` by default.

- referenceAreas (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference areas that should be displayed on the chart.

- referenceDots (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference dots that should be displayed on the chart.

- referenceLines (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference lines that should be displayed on the chart.

- rightYAxisLabel (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- rightYAxisProps (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- series (list of dicts; required):
    An array of objects with `name` and `color` keys. Determines which
    data should be consumed from the `data` array.

    `series` is a list of dicts with keys:

- strokeDasharray (string | number; optional):
    Dash array for the grid lines and cursor, `'5 5'` 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.

- textColor (optional):
    Color of the text displayed inside the chart, `'dimmed'` by
    default.

- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which axis should have tick line, `'y'` by default.

- tooltipAnimationDuration (number; optional):
    Tooltip position animation duration in ms, `0` by default.

- tooltipProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Tooltip` component.

- type (a value equal to: 'default', 'stacked', 'percent', 'waterfall'; optional):
    Controls how bars are positioned relative to each other,
    `'default'` by default.

- unit (string; optional):
    Unit displayed next to each tick in y-axis.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format values on Y axis and inside the tooltip. See
    https://www.dash-mantine-components.com/functions-as-props.

- valueLabelProps (dict; optional):
    Props passed down to recharts `LabelList` component. Can be an
    object with props like "position" for valueLabel formatting.
    Only relevant, if withBarValueLabel is True.

- variant (string; optional):
    variant.

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

- withBarValueLabel (boolean; optional):
    Determines whether a label with bar value should be displayed on
    top of each bar. On type="stacked" or type="percent",
    additionally use withBarValueLabel to customize the label (e.g.
    use {position: 'inside'} to move the labels inside each bar).
    False by default.

- withBrush (boolean; optional):
    Determines whether a brush (range selector) should be displayed
    under the chart, `False` by default.

- withLegend (boolean; optional):
    Determines whether chart legend should be displayed, `False` by
    default.

- withRightYAxis (boolean; optional):
    Determines whether additional y-axis should be displayed on the
    right side of the chart, False by default.

- withTooltip (boolean; optional):
    Determines whether chart tooltip should be displayed, `True` by
    default.

- withXAxis (boolean; optional):
    Determines whether x-axis should be hidden, `True` by default.

- withYAxis (boolean; optional):
    Determines whether y-axis should be hidden, `True` by default.

- xAxisLabel (string; optional):
    A label to display below the x-axis.

- xAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `XAxis` recharts component.

- yAxisLabel (string; optional):
    A label to display next to the y-axis.

- yAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `YAxis` recharts component.

## BubbleChart  
Bubble Chart component  
Category: Charts  

### Usage


```python
import dash_mantine_components as dmc
from .data import data


component = dmc.BubbleChart(
    gridColor="gray.5",
    textColor="gray.9",
    h=60,
    data=data,
    range=[16, 225],
    label="Sales/hour",
    color="lime.6",
    dataKey={"x": "hour", "y": "index", "z": "value"}
)
```
### Data

Here is the data used in all the examples on this page:

```python
data = [
    {"hour": "08:00", "index": 1, "value": 150},
    {"hour": "10:00", "index": 1, "value": 166},
    {"hour": "12:00", "index": 1, "value": 170},
    {"hour": "14:00", "index": 1, "value": 150},
    {"hour": "16:00", "index": 1, "value": 200},
    {"hour": "18:00", "index": 1, "value": 400},
    {"hour": "20:00", "index": 1, "value": 100},
    {"hour": "22:00", "index": 1, "value": 160},
]
```

### Change color

You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.

### Change line color depending on color scheme
You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

Example of line color that is dark orange in light mode and lime in dark mode:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BubbleChart(
    h=60,
    data=data,
    range=[16, 225],
    label="Sales/hour",
    color="var(--chart-color)",
    dataKey={"x": "hour", "y": "index", "z": "value"}
)
```

```css
:root {
   --chart-color: var(--mantine-color-orange-8)
}

:root[data-mantine-color-scheme="dark"] {
  --chart-color: var(--mantine-color-lime-4);
}
```



### Grid and text colors
Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. 
With CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BubbleChart(
    h=60,
    data=data,
    range=[16, 225],
    label="Sales/hour",
    className="chart-grid-text-colors",
    dataKey={"x": "hour", "y": "index", "z": "value"}
)
```

```css

.chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-5);
  --chart-text-color: var(--mantine-color-blue-8);
}

[data-mantine-color-scheme='dark'] .chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-3);
  --chart-text-color: var(--mantine-color-blue-2);
}
```

If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:

```python
dmc.BubbleChart(
    gridColor="gray.5",
    textColor="gray.9",
    h=60,
    data=data,
    range=[16, 225],
    label="Sales/hour",
    color="lime.6",
    dataKey={"x": "hour", "y": "index", "z": "value"}
)

```



### Value formatter
To format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`
as an argument and returns formatted value:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BubbleChart(
    h=60,
    data=data,
    range=[16, 225],
    label="Sales/hour",
    color="lime.6",
    dataKey={"x": "hour", "y": "index", "z": "value"},
    valueFormatter={"function": "formatUsd"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatUsd = function (value) {
  return `${value.toFixed(2)} USD`;
};
```



### Remove tooltip
To remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.

```python
import dash_mantine_components as dmc
from .data import data


component = dmc.BubbleChart(
    gridColor="gray.5",
    textColor="gray.9",
    h=60,
    data=data,
    range=[16, 225],
    label="Sales/hour",
    color="lime.6",
    dataKey={"x": "hour", "y": "index", "z": "value"},
    withTooltip=False
)
```
### clickData 

Use the `clickData` property in a callback to retrieve data from the most recent click event. 

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

component = dmc.Group(
    [
        dmc.BubbleChart(
            id="figure-bubblechart",
            gridColor="gray.5",
            textColor="gray.9",
            h=60,
            data=data,
            range=[16, 225],
            label="Sales/hour",
            color="lime.6",
            dataKey={"x": "hour", "y": "index", "z": "value"}
        ),
        dmc.Text(id="clickdata-bubblechart"),

    ]
)

@callback(
    Output("clickdata-bubblechart", "children"),
    Input("figure-bubblechart", "clickData"),
)
def update(data):
    return f"clickData:  {data}"
```
### hoverData 

Use the `hoverData` property in a callback to retrieve data from the most recent hover event. 

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

component = dmc.Group(
    [
        dmc.BubbleChart(
            id="figure-bubblechart-hover",
            gridColor="gray.5",
            textColor="gray.9",
            h=60,
            data=data,
            range=[16, 225],
            label="Sales/hour",
            color="lime.6",
            dataKey={"x": "hour", "y": "index", "z": "value"}
        ),
        dmc.Text(id="hoverdata-bubblechart"),

    ]
)

@callback(
    Output("hoverdata-bubblechart", "children"),
    Input("figure-bubblechart-hover", "hoverData"),
)
def update(data):
    return f"hoverData:  {data}"
```
### 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.


#### BubbleChart selectors 

| Selector | Static selector              | Description                |
|----------|------------------------------|----------------------------|
| root     | .mantine-BubbleChart-root    | Root element               |
| axis     | .mantine-BubbleChart-axis    | X and Y axis of the chart  |
| tooltip  | .mantine-BubbleChart-tooltip | Tooltip root element       |


#### BubbleChart CSS variables

| Selector | Variable             | Description                                 |
|----------|-----------------------|---------------------------------------------|
| root     | --chart-grid-color    | Controls color of the grid and cursor lines |
|          | --chart-text-color    | Controls color of the axis labels           |



### Keyword Arguments
#### BubbleChart

- 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.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- color (optional):
    Color of the chart items. Key of `theme.colors` or any valid CSS
    color, `blue.6` by default.

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

- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):
    Chart data.

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

- dataKey (dict; required):
    Data keys for x, y and z axis.

    `dataKey` is a dict with keys:

- gridColor (optional):
    Color of the grid and cursor lines, by default depends on color
    scheme.

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

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- label (string; optional):
    Chart label displayed next to the x axis.

- 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.

- range (list of 2 elements: [number, number]; required):
    Z axis range.

- scatterProps (dict; optional):
    Props passed down to the `Scatter` component.

- 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.

- textColor (optional):
    Color of the text displayed inside the chart, `'dimmed'` by
    default.

- tooltipProps (dict; optional):
    Props passed down to the `Tooltip` component.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format values on Y axis and inside the tooltip. See
    https://www.dash-mantine-components.com/functions-as-props.

- variant (string; optional):
    variant.

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

- withTooltip (boolean; optional):
    Determines whether the tooltip should be displayed, `True` by
    default.

- xAxisProps (dict; optional):
    Props passed down to the `XAxis` recharts component.

- yAxisProps (dict; optional):
    Props passed down to the `YAxis` recharts component.

- zAxisProps (dict; optional):
    Props passed down to the `ZAxis` recharts component.

## CompositeChart  
Composed chart with support for Area, Bar and Line charts  
Category: Charts  

### Introduction

```python

import dash_mantine_components as dmc
from .data import data

dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withLegend=True,
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)

```

### Data

Here is the data used in all the examples on this page:

```python
data = [
    {
        "date": "Mar 22",
        "Apples": 2890,
        "Oranges": 2338,
        "Tomatoes": 2452,
    },
    {
        "date": "Mar 23",
        "Apples": 2756,
        "Oranges": 2103,
        "Tomatoes": 2402,
    },
    {
        "date": "Mar 24",
        "Apples": 3322,
        "Oranges": 986,
        "Tomatoes": 1821,
    },
    {
        "date": "Mar 25",
        "Apples": 3470,
        "Oranges": 2108,
        "Tomatoes": 2809,
    },
    {
        "date": "Mar 26",
        "Apples": 3129,
        "Oranges": 1726,
        "Tomatoes": 2290,
    },
]

```


### Legend
To display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data
series is highlighted in the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withLegend=True,
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Legend position
You can pass props down to recharts `Legend` component with `legendProps` prop. For example, setting the following will
render the legend at the bottom of the chart and set its height to 50px.

```python
legendProps={"verticalAlign": "bottom", "height": 50} 
```

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withLegend=True,
    maxBarWidth=30,
    legendProps={"verticalAlign": "bottom", "height": 50},
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Series labels
By default, series `name` is used as a label. To change it, set `label` property in `series` object:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withLegend=True,
    legendProps={"verticalAlign": "bottom"},
    maxBarWidth=30,
    series=[
        {
            "name": "Tomatoes",
            "label": "Tomatoes sales",
            "color": "rgba(18, 120, 255, 0.2)",
            "type": "bar",
        },
        {
            "name": "Apples",
            "label": "Apples sales",
            "color": "red.8",
            "type": "line",
        },
        {
            "name": "Oranges",
            "label": "Oranges sales",
            "color": "yellow.8",
            "type": "area",
        },
    ]
)
```
### Points labels

To display labels on data points, set `withPointLabels=True`. This feature is supported only for Line and Area charts:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withPointLabels=True,
    withLegend=True,
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### X and Y axis props
Use `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these
props can be used to change orientation of axis:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    tickLine="xy",
    yAxisProps={"tickMargin": 15, "orientation": "right"},
    xAxisProps={"tickMargin": 15, "orientation": "top"},
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Axis labels
Use `xAxisLabel` and `yAxisLabel` props to display axis labels:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    xAxisLabel="Date",
    yAxisLabel="Amount",
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    xAxisLabel="Date",
    yAxisLabel="Amount",
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### X axis offset
Use `xAxisProps` to set padding between the charts ends and the x-axis:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    type="stacked",
    xAxisProps={"padding": {"left": 30, "right": 30}},
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
)

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    xAxisProps={"padding": {"left": 30, "right": 30}},
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Y axis scale
Use `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range
of 0 to 150, you can set domain to `[0, 150]`:

```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 22", "Apples": 50},
    {"date": "Mar 23", "Apples": 60},
    {"date": "Mar 24", "Apples": 40},
    {"date": "Mar 25", "Apples": 30},
    {"date": "Mar 26", "Apples": 0},
    {"date": "Mar 27", "Apples": 20},
    {"date": "Mar 28", "Apples": 20},
    {"date": "Mar 29", "Apples": 10},
]

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    yAxisProps={"domain": [0, 100]},
    withLegend=True,
    maxBarWidth=30,
    series=[
        {"name": "Apples", "color": "red.8", "type": "line"},
    ]
)
```
### Chart color

You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withLegend=True,
    maxBarWidth=30,
    series=[
        {"name": "Apples", "color": "blue", "type": "line"},
    ]
)
```
### Change chart color depending on color scheme
You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

Example of line color that is dark orange in light mode and lime in dark mode:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    dataKey="date",
    data=data,
    series=[{"name": "Apples", "color": "var(--chart-color)", "type": "line" }],
)
```

```css
:root {
   --chart-color: var(--mantine-color-orange-8)
}

:root[data-mantine-color-scheme="dark"] {
  --chart-color: var(--mantine-color-lime-4);
}
```


### Stroke dash array
Set `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the lengths of alternating dashes and gaps. For example, strokeDasharray="10 5" will render a dashed line with 10px dashes and 5px gaps.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    strokeDasharray="15 15",
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Grid and text colors
Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. 
With CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    dataKey="date",
    data=data,
    maxBarWidth=30,
    className="chart-grid-text-colors",
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```

```css

.chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-5);
  --chart-text-color: var(--mantine-color-blue-8);
}

[data-mantine-color-scheme='dark'] .chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-3);
  --chart-text-color: var(--mantine-color-blue-2);
}
```

If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:

```python
dmc.CompositeChart(
    h=300,
    dataKey="date",
    data=data,
    maxBarWidth=30,
    gridColor="gray.5",
    textColor="gray.9",
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)

```




### Tooltip animation
By default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of milliseconds to animate the tooltip position change.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    tooltipAnimationDuration=200,
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Value formatter
To format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`
as an argument and returns formatted value:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    maxBarWidth=30,
    valueFormatter={"function": "formatNumberIntl"},
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatNumberIntl = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
};
```


### Units
Set `unit` prop to render a unit label next to the y-axis ticks and tooltip values:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    unit="$",
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Remove tooltip
To remove tooltip, set `withTooltip=false`. It also removes the cursor line and disables interactions with the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withTooltip=False,
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Custom tooltip
Use the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:
```python
 tooltipProps={'content': {'functon': 'myFunction'}}
```


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    tooltipProps={"content":  {"function": "chartTooltip"}},
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.chartTooltip = ({ label, payload }) => {

  if (!payload || payload.length === 0) return null;

  return React.createElement(
    dmc.Paper,
    {
      px: "md",
      py: "sm",
      withBorder: true,
      shadow: "md",
      radius: "md",
    },
    [
      React.createElement(
        dmc.Text,
        {
          key: "tooltip-label",
          fw: 500,
          mb: 5,
        },
        label
      ),
      ...payload.map((item, index) =>
        React.createElement(
          dmc.Text,
          {
            key: `item-${index}`,
            c: item.color,
            fz: "sm",
          },
          `${item.name}: ${item.value}`
        )
      ),
    ]
  );
};
```



### Customize dots
Use `dotProps` to pass props down to recharts dot in regular state and `activeDotProps` to pass props down to recharts
dot in active state (when cursor is over the current series).

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    dotProps={"r": 6, "strokeWidth": 2, "stroke": "#fff"},
    activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"},
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ]
)
```
### Stroke width
Use `strokeWidth` prop to control the stroke width of all areas/lines:



### Sync multiple charts
You can pass props down to recharts [ComposedChart](https://recharts.org/en-US/api/ComposedChart) component with
`composedChartProps` prop. For example, setting the following will sync tooltip of multiple `CompositeChart` components
with the same `syncId` prop.

```python 
composedChartProps={"syncId": "any-id"}
```

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [

        dmc.Text("Apples sales:", mb="md", pl="md"),
        dmc.CompositeChart(
            h=180,
            data=data,
            dataKey="date",
            series=[{"name": "Apples", "color": "indigo.6", "type": "area"}],
            composedChartProps={"syncId": "groceries"}
        ),
        dmc.Text("Tomatoes sales:", mb="md", pl="md", mt="xl"),
        dmc.CompositeChart(
            h=180,
            data=data,
            dataKey="date",
            series=[{"name": "Tomatoes", "color": "cyan.6", "type": "bar"}],
            composedChartProps={"syncId": "groceries"}
        )
    ]
)
```
### Dashed lines
Set `strokeDasharray` property in series to change line style to dashed:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    strokeWidth=1,
    dotProps={"r": 2},
    activeDotProps={"r": 3, "strokeWidth": 1},
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line", "strokeDasharray": "5 5"},
        {"name": "Oranges", "color": "yellow.8", "type": "area", "strokeDasharray": "5 5"},
    ]
)
```
### Reference lines

Use `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    yAxisProps={"domain": [0, 100]},
    referenceLines=[
        {"y": 1200, "label": "Average sales", "color": "red.6"},
        {"x": "Mar 25", "label": "Report out", "color": "blue.7"},
    ],
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
    ]
)
```
### Reference areas
Use the `referenceAreas` prop to highlight a rectangular region of the chart. Each area is bounded by x1/x2 (horizontal)
and y1/y2 (vertical) data values – omit one pair to span the full opposite axis, for example provide only x1/x2 to
highlight a time range across the entire height of the chart. Set `color` to any theme color or CSS color and label
to display text inside the area. Reference areas are rendered behind the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
    ],
    referenceAreas=[
        {"x1": "Mar 24", "x2": "Mar 26", "color": "blue.6", "label": "Promotion"},
    ],
)
```
### Reference dots
Use the `referenceDots` prop to mark individual points on the chart – a peak, an event, a record value or an anomaly. 
Each dot is positioned by x and y data coordinates and supports `r` (radius), `color` (any theme color or CSS color) and
`label`. Reference dots are rendered on top of the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
    ],
    referenceDots=[
        {"x": "Mar 25", "y": 2764, "color": "red.8", "label": "Peak"},
    ],
)
```
### Brush (Range Slider)
Set the `withBrush` prop to display a brush (range slider) under the chart. Drag the brush handles to
zoom into a subset of the data. The chart updates to show only the selected range. The brush border and background are
themed to match the chart grid and adapt to the color scheme. `withBrush` is `False` by default and is supported by
`AreaChart`, `BarChart`, `LineChart` and `CompositeChart` components with `horizontal` orientation.

Use the `brushDragEnd` prop to get the `startIndex` and `endIndex` of the selected range when dragging ends. 

Use the `brushProps` prop to pass props down to the underlying [recharts Brush](https://recharts.github.io/en-US/api/Brush/) component. For example, you can set the
initially selected range with `startIndex`/`endIndex`, change the brush height and more:


```python
import dash_mantine_components as dmc
from dash import callback, Input, Output
from .data import data2

component = dmc.Stack([
    dmc.CompositeChart(
        h=300,
        data=data2,
        dataKey="date",
        maxBarWidth=30,
        withBrush=True,
        series=[
            {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
            {"name": "Apples", "color": "red.8", "type": "line"},
            {"name": "Oranges", "color": "yellow.8", "type": "area"},
        ],
        id="compositechart-brush",
    ),
    dmc.Text(id="compositechart-brush-dragend"),
])


@callback(
    Output("compositechart-brush-dragend", "children"),
    Input("compositechart-brush", "brushDragEnd"),
)
def update_brush_range(brush_drag_end):
    return f"Brush range selected: {brush_drag_end}"
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event.
To get the name of the clicked series, use the `clickSeriesName` property.

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

component = dmc.Group(
    [
        dmc.CompositeChart(
            id="figure-compositechart",
            h=300,
            data=data,
            dataKey="date",
            withLegend=True,
            maxBarWidth=30,
            series=[
                {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
                {"name": "Apples", "color": "red.8", "type": "line"},
                {"name": "Oranges", "color": "yellow.8", "type": "area"},
            ]
        ),
        dmc.Text(id="clickdata-compositechart1"),
        dmc.Text(id="clickdata-compositechart2"),
    ]
)

@callback(
    Output("clickdata-compositechart1", "children"),
    Output("clickdata-compositechart2", "children"),
    Input("figure-compositechart", "clickData"),
    Input("figure-compositechart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event.
To get the name of the hovered series, use the `hoverSeriesName` property.

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

component = dmc.Group(
    [
        dmc.CompositeChart(
            id="figure-compositechart-hover",
            h=300,
            data=data,
            dataKey="date",
            withLegend=True,
            maxBarWidth=30,
            series=[
                {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
                {"name": "Apples", "color": "red.8", "type": "line"},
                {"name": "Oranges", "color": "yellow.8", "type": "area"},
            ]
        ),
        dmc.Text(id="hoverdata-compositechart1"),
        dmc.Text(id="hoverdata-compositechart2"),
    ]
)

@callback(
    Output("hoverdata-compositechart1", "children"),
    Output("hoverdata-compositechart2", "children"),
    Input("figure-compositechart-hover", "hoverData"),
    Input("figure-compositechart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### highlightHover

Set `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.CompositeChart(
    h=300,
    data=data,
    dataKey="date",
    withLegend=True,
    maxBarWidth=30,
    series=[
        {"name": "Tomatoes", "color": "rgba(18, 120, 255, 0.2)", "type": "bar"},
        {"name": "Apples", "color": "red.8", "type": "line"},
        {"name": "Oranges", "color": "yellow.8", "type": "area"},
    ],
    withTooltip=False,
    highlightHover=True
)
```
### 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.


#### CompositeChart selectors 

| Selector           | Static selector                           | Description                                   |
|--------------------|-------------------------------------------|-----------------------------------------------|
| root               | .mantine-CompositeChart-root              | Root element                                  |
| area               | .mantine-CompositeChart-area              | Area of the chart                             |
| line               | .mantine-CompositeChart-line              | Line of the chart                             |
| bar                | .mantine-CompositeChart-bar               | Bar of the chart                              |
| axis               | .mantine-CompositeChart-axis              | X and Y axis of the chart                     |
| container          | .mantine-CompositeChart-container         | Recharts ResponsiveContainer component        |
| grid               | .mantine-CompositeChart-grid              | Recharts CartesianGrid component              |
| legend             | .mantine-CompositeChart-legend            | Legend root element                           |
| legendItem         | .mantine-CompositeChart-legendItem        | Legend item representing data series          |
| legendItemColor    | .mantine-CompositeChart-legendItemColor   | Legend item color                             |
| legendItemName     | .mantine-CompositeChart-legendItemName    | Legend item name                              |
| tooltip            | .mantine-CompositeChart-tooltip           | Tooltip root element                          |
| tooltipBody        | .mantine-CompositeChart-tooltipBody       | Tooltip wrapper around all items              |
| tooltipItem        | .mantine-CompositeChart-tooltipItem       | Tooltip item representing data series         |
| tooltipItemBody    | .mantine-CompositeChart-tooltipItemBody   | Tooltip item wrapper around item color and name |
| tooltipItemColor   | .mantine-CompositeChart-tooltipItemColor  | Tooltip item color                            |
| tooltipItemName    | .mantine-CompositeChart-tooltipItemName   | Tooltip item name                             |
| tooltipItemData    | .mantine-CompositeChart-tooltipItemData   | Tooltip item data                             |
| tooltipLabel       | .mantine-CompositeChart-tooltipLabel      | Label of the tooltip                          |
| referenceLine      | .mantine-CompositeChart-referenceLine     | Reference line                                |
| axisLabel          | .mantine-CompositeChart-axisLabel         | X and Y axis labels                           |


### Composite CSS variables

| Selector         | Variable             | Description                                      |
|:-----------------|:---------------------|:-------------------------------------------------|
| root             | --chart-grid-color   | Controls color of the grid and cursor lines      |
|                  | --chart-text-color   | Controls color of the axis labels                |




### Keyword Arguments
#### CompositeChart

- children (a list of or a singular dash component, string or number; optional):
    Additional components that are rendered inside `Composite`
    component.

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

- accessibilityLayer (boolean; optional):
    Determines whether the chart should be keyboard-navigable with the
    recharts accessibility layer, `True` by default.

- activeDotProps (boolean | number | string | dict | list; optional):
    Props passed down to all active dots. Ignored if
    `withDots={False}` is set.

- areaProps (dict; optional):
    Props passed down to recharts `Area` component.

- 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.

- barProps (dict; optional):
    Props passed down to recharts `Bar` component.

- brushDragEnd (dict with strings as keys and values of type number; optional):
    The startIndex and endIndex  of the selected brush range when
    dragging ends. Read only.

- brushProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Brush` component.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data for entire dataKey.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

- composedChartProps (dict; optional):
    Props passed down to recharts `Composite` component.

- connectNulls (boolean; optional):
    Determines whether points with `None` values should be connected,
    `True` by default.

- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):
    Controls how curve of lines and area series are displayed,
    `'montone'` by default.

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

- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):
    Data used to display chart.

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

- dataKey (string; required):
    Key of the `data` object for x-axis values.

- dotProps (boolean | number | string | dict | list; optional):
    Props passed down to all dots. Ignored if `withDots={False}` is
    set.

- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which lines should be displayed in the grid, `'x'` by
    default.

- gridColor (optional):
    Color of the grid and cursor lines, by default depends on color
    scheme.

- gridProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `CartesianGrid` component.

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

- highlightHover (boolean; optional):
    Determines whether a hovered series is highlighted. False by
    default. Mirrors the behaviour when hovering about chart legend
    items.

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data for entire dataKey.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- legendProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Legend` component.

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

- lineProps (dict; optional):
    Props passed down to recharts `Line` component.

- 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:

- maxBarWidth (number; optional):
    Maximum bar width in px.

- minBarSize (number; optional):
    Sets minimum height of the bar in px, `0` by default.

- 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.

- referenceAreas (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference areas that should be displayed on the chart.

- referenceDots (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference dots that should be displayed on the chart.

- referenceLines (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference lines that should be displayed on the chart.

- rightYAxisLabel (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- rightYAxisProps (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- series (list of dicts; required):
    An array of objects with `name`, `color` and `type` keys.
    Determines which data should be consumed from the `data` array.

    `series` is a list of dicts with keys:

- strokeDasharray (string | number; optional):
    Dash array for the grid lines and cursor, `'5 5'` by default.

- strokeWidth (number; optional):
    Stroke width for the chart lines, `2` 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.

- textColor (optional):
    Color of the text displayed inside the chart, `'dimmed'` by
    default.

- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which axis should have tick line, `'y'` by default.

- tooltipAnimationDuration (number; optional):
    Tooltip position animation duration in ms, `0` by default.

- tooltipProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Tooltip` component.

- unit (string; optional):
    Unit displayed next to each tick in y-axis.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format values on Y axis and inside the tooltip. See
    https://www.dash-mantine-components.com/functions-as-props.

- variant (string; optional):
    variant.

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

- withBarValueLabel (boolean; optional):
    Determines whether a label with bar value should be displayed on
    top of each bar, incompatible with `type="stacked"` and
    `type="percent"`, `False` by default.

- withBrush (boolean; optional):
    Determines whether a brush (range selector) should be displayed
    under the chart, `False` by default.

- withDots (boolean; optional):
    Determines whether dots should be displayed, `True` by default.

- withLegend (boolean; optional):
    Determines whether chart legend should be displayed, `False` by
    default.

- withPointLabels (boolean; optional):
    Determines whether a label with value should be displayed on top
    of a curve, This feature is supported only for Line and Area
    series.

- withRightYAxis (boolean; optional):
    Determines whether additional y-axis should be displayed on the
    right side of the chart, False by default.

- withTooltip (boolean; optional):
    Determines whether chart tooltip should be displayed, `True` by
    default.

- withXAxis (boolean; optional):
    Determines whether x-axis should be hidden, `True` by default.

- withYAxis (boolean; optional):
    Determines whether y-axis should be hidden, `True` by default.

- xAxisLabel (string; optional):
    A label to display below the x-axis.

- xAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `XAxis` recharts component.

- yAxisLabel (string; optional):
    A label to display next to the y-axis.

- yAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `YAxis` recharts component.

## DonutChart  
Donut chart component  
Category: Charts  

### Usage

`DonutChart` is based on [PieChart recharts component](https://recharts.org/en-US/api/PieChart):

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.DonutChart(data=data)
```
### Data

Here is the data imported for the examples on this page:

```python

data = [
  { "name": "USA", "value": 400, "color": "indigo.6" },
  { "name": "India", "value": 300, "color": "yellow.6" },
  { "name": "Japan", "value": 100, "color": "teal.6" },
  { "name": "Other", "value": 200, "color": "gray.6" }
]

```
    

### Legend
To display the legend, set the `withLegend` prop. The legend displays the name and color of each segment. Hover over
a legend item to highlight the corresponding segment.

You can pass props down to the recharts Legend component with the `legendProps` prop. For example, set
`legendProps={"verticalAlign": 'top'}` to display the legend above the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.DonutChart(data=data, withLegend=True)
```
### Segments labels

Set `withLabels` prop to display labels next to each segment:

```python
import dash_mantine_components as dmc
from .data import data

dmc.DonutChart(
    data=data,   
    withLabels=True,
    withLabelsLine=True
)
```



### Size and thickness 

Set `size` prop to control width and height of the chart. Note that if `withLabels` prop is set, the chart height is
automatically increased by 80px to make room for labels. You can override this behavior by setting `h` style prop.


```python
import dash_mantine_components as dmc
from .data import data

dmc.DonutChart(
    data=data,
    size=160,
    thickness=30
)
```


### Padding angle 

Use `paddingAngle` prop to control the space between segments:

```python

import dash_mantine_components as dmc
from .data import data

dmc.DonutChart(
    data=data,
    paddingAngle=30,
)
```


### Segment color

You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. 
Any valid CSS color value is also accepted.

```python
import dash_mantine_components as dmc

data = [
    {"name": "USA", "value": 400, "color": "blue"},
    {"name": "Other", "value": 200, "color": "gray.6"},
]

component = dmc.DonutChart(data=data)
```
### Tooltip data source

By default, the tooltip displays data for all segments when hovered over any segment. To display data only for the hovered segment, set tooltipDataSource="segment":

```python
import dash_mantine_components as dmc
from dash import html
from .data import data

component = dmc.Group(
    [
        html.Div(
            [
                dmc.Text(
                    "Data only for hovered segment", fz="xs", mb="sm", ta="center"
                ),
                dmc.DonutChart(
                    data=data,
                    withTooltip=True,
                    tooltipDataSource="segment",
                    mx="auto",
                ),
            ]
        ),
        html.Div(
            [
                dmc.Text("Data only for all segments", fz="xs", mb="sm", ta="center"),
                dmc.DonutChart(
                    data=data,
                    withTooltip=True,
                    mx="auto",
                ),
            ]
        ),
    ],
    gap=50,
)
```
### Without tooltip

To remove the tooltip, set `withTooltip=False`:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.DonutChart(data=data, withTooltip=False)
```
### Chart label

To display a label in the center of the chart, use `chartLabel` prop. It accepts a string or a number:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.DonutChart(data=data, chartLabel="Users by country")
```
### Start and end angle

Use `startAngle` and `endAngle` props to control the start and end angle of the chart. For example, to display a
half-circle chart, set `startAngle=180` and `endAngle=0`:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.DonutChart(data=data, startAngle=180, endAngle=0)
```
### Segments stroke

Use `strokeWidth` prop to control the width of the stroke around each segment.


```python
import dash_mantine_components as dmc
from .data import data

dmc.DonutChart(
    data=data,
    strokeWidth=1.8  
)
```

To change color of the stroke, use `strokeColor` prop. You can reference colors from theme the same way as in other
components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.

```python
dmc.DonutChart(
    data=data,
    strokeColor="red.5"
)
```

By default, segments stroke color is the same as the background color of the body element
(`--mantine-color-body` CSS variable). If you want to change it depending on the color scheme, define CSS variable
and pass it to the `strokeColor` prop:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.DonutChart(data=data, strokeColor="var(--card-bg)")
```
```css
.root {
  --card-bg: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));

  background-color: var(--card-bg);
  padding: var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-md);
}

```


### Donut animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `pieProps` to pass properties to the Recharts `Pie` component.


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


def get_data(values):
    return [
        {"name": "A", "value": values[0], "color": "indigo.6"},
        {"name": "B", "value": values[1], "color": "yellow.6"},
        {"name": "C", "value": values[2], "color": "teal.6"},
        {"name": "C", "value": values[3], "color": "gray.6"},
    ]


component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-donutchart-animation", n_clicks=0, mb="md"),
        dmc.DonutChart(
            id="donutchart-animation",
            data=get_data([100, 0, 0, 0]),
            pieProps={"isAnimationActive": True},
        ),
    ]
)


@callback(
    Output("donutchart-animation", "data"),
    Input("btn-donutchart-animation", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return get_data([400, 300, 600, 100])
    return get_data([100, 0, 0, 0])
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the
clicked series, use the `clickSeriesName` property.
```python
from dash import callback, Input, Output
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [
        dmc.DonutChart(id="figure-donutchart", data=data, withTooltip=False),
        dmc.Text(id="clickdata-donutchart1"),
        dmc.Text(id="clickdata-donutchart2"),
    ]
)



@callback(
    Output("clickdata-donutchart1", "children"),
    Output("clickdata-donutchart2", "children"),
    Input("figure-donutchart", "clickData"),
    Input("figure-donutchart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the 
hovered series, use the `hoverSeriesName` property.

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

component = dmc.Stack(
    [
        dmc.DonutChart(id="figure-donutchart-hover", data=data, withTooltip=False),
        dmc.Text(id="hoverdata-donutchart1"),
        dmc.Text(id="hoverdata-donutchart2"),
    ]
)


@callback(
    Output("hoverdata-donutchart1", "children"),
    Output("hoverdata-donutchart2", "children"),
    Input("figure-donutchart-hover", "hoverData"),
    Input("figure-donutchart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### 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.


#### DonutChart selectors

| Selector    | Static selector              | Description                             |
|:------------|:-----------------------------|:----------------------------------------|
| root        | .mantine-DonutChart-root    | Root element                            |
| label       | .mantine-DonutChart-label   | Chart label, controlled by chartLabel prop |

#### DonutChart CSS variables

| Selector         | Variable               | Description                              |
|:-----------------|:-----------------------|:-----------------------------------------|
| root             | --chart-labels-color   | Controls color of the chart labels       |
|                  | --chart-size           | Controls size of the chart               |
|                  | --chart-stroke-color   | Controls color of the chart stroke       |


### Keyword Arguments
#### DonutChart

- children (a list of or a singular dash component, string or number; optional):
    Additional elements rendered inside `PieChart` component.

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

- accessibilityLayer (boolean; optional):
    Determines whether the chart should be keyboard-navigable with the
    recharts accessibility layer, `True` by default.

- 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.

- chartLabel (string | number; optional):
    Chart label, displayed in the center of the chart.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

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

- data (list of dicts; required):
    Data used to render chart.

    `data` is a list of dicts with keys:

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

- endAngle (number; optional):
    Controls angle at which charts ends, `360` by default. Set to `0`
    to render the chart as semicircle.

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

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- labelColor (optional):
    Controls text color of all labels, by default depends on color
    scheme.

- labelsType (a value equal to: 'percent', 'value', 'name'; optional):
    Type of labels to display, `'value'` by default.

- legendProps (dict; optional):
    Props passed down to recharts `Legend` component.

- 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.

- paddingAngle (number; optional):
    Controls padding between segments, `0` by default.

- pieChartProps (dict; optional):
    Props passed down to recharts `PieChart` component.

- pieProps (dict; optional):
    Props passed down to recharts `Pie` component.

- size (number; optional):
    Controls chart width and height, height is increased by 40 if
    `withLabels` prop is set. Cannot be less than `thickness`. `80` by
    default.

- startAngle (number; optional):
    Controls angle at which chart starts, `0` by default. Set to `180`
    to render the chart as semicircle.

- strokeColor (optional):
    Controls color of the segments stroke, by default depends on color
    scheme.

- strokeWidth (number; optional):
    Controls width of segments stroke, `1` 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.

- thickness (number; optional):
    Controls thickness of the chart segments, `20` by default.

- tooltipAnimationDuration (number; optional):
    Tooltip animation duration in ms, `0` by default.

- tooltipDataSource (a value equal to: 'segment', 'all'; optional):
    Determines which data is displayed in the tooltip. `'all'` –
    display all values, `'segment'` – display only hovered segment.
    `'all'` by default.

- tooltipProps (dict; optional):
    Props passed down to `Tooltip` recharts component.

- variant (string; optional):
    variant.

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

- withLabels (boolean; optional):
    Determines whether each segment should have associated label,
    `False` by default.

- withLabelsLine (boolean; optional):
    Determines whether segments labels should have lines that connect
    the segment with the label, `True` by default.

- withLegend (boolean; optional):
    Determines whether the legend should be displayed default False.

- withTooltip (boolean; optional):
    Determines whether the tooltip should be displayed when one of the
    section is hovered, `True` by default.

## FunnelChart  
FunnelChart component  
Category: Charts  

### Usage

`FunnelChart` is based on the [FunnelChart recharts component](https://recharts.org/en-US/api/FunnelChart):


```python
import dash_mantine_components as dmc
from .data import data

component=dmc.FunnelChart(data=data)
```
### Data

Here is the data imported for the examples on this page:

```python
data = [
    {"name": "USA", "value": 400, "color": "indigo.6"},
    {"name": "India", "value": 300, "color": "yellow.6"},
    {"name": "Japan", "value": 100, "color": "teal.6"},
    {"name": "Other", "value": 200, "color": "gray.6"},
]

```


### Legend
To display the legend, set the `withLegend` prop. The legend displays the name and color of each segment. Hover over
a legend item to highlight the corresponding segment.

You can pass props down to the recharts Legend component with the `legendProps` prop. For example, set
`legendProps={"verticalAlign": 'top'}` to display the legend above the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.FunnelChart(data=data, withLegend=True)
```
### Segments labels

Set the `withLabels` prop to display labels next to each segment.
Use the `labelPosition` prop to control the position of labels relative to the corresponding segment. Supported values are 'left', 'right', and 'inside'.


### Size and thickness

Set the `size` prop to control the width and height of the chart.
You can override this behavior by setting the `h` [style prop](/style-props).

### Segment color

You can reference colors from [theme](/theme-object) the same way as in
other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS
color value is also accepted.

```python
import dash_mantine_components as dmc

component = dmc.FunnelChart(
    data=[
        { 'name': 'USA', 'value': 400, 'color': 'blue' },
        { 'name': 'Other', 'value': 200, 'color': 'gray.6' },
      ]
)
```
### Without tooltip

To remove the tooltip, set `withTooltip=False`:


```python
import dash_mantine_components as dmc
from .data import data

component=dmc.FunnelChart(
    data=data,
    withTooltip=False
)
```
### Segments stroke

Use the `strokeWidth` prop to control the width of the stroke around each segment:


To change the color of the stroke, use the `strokeColor` prop. You can reference colors from the [theme](/colors) the same way as in
other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.

```python
import dash_mantine_components as dmc

dmc.FunnelChart(data=data, strokeColor="red.5")

```



### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the
clicked series, use the `clickSeriesName` property.
```python
import dash_mantine_components as dmc
from dash import Input, Output, callback
from .data import data

component = dmc.Stack(
    [
        dmc.FunnelChart(
            id="figure-funnelchart-click",
            data=data,
        ),
        dmc.Text(id="clickdata-funnelchart1"),
        dmc.Text(id="clickdata-funnelchart2"),
    ]
)

@callback(
    Output("clickdata-funnelchart1", "children"),
    Output("clickdata-funnelchart2", "children"),
    Input("figure-funnelchart-click", "clickData"),
    Input("figure-funnelchart-click", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the 
hovered series, use the `hoverSeriesName` property.

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

component = dmc.Stack(
    [
        dmc.FunnelChart(
            id="figure-funnelchart",
            data=data,
        ),
        dmc.Text(id="hoverdata-funnelchart1"),
        dmc.Text(id="hoverdata-funnelchart2"),
    ]
)

@callback(
    Output("hoverdata-funnelchart1", "children"),
    Output("hoverdata-funnelchart2", "children"),
    Input("figure-funnelchart", "hoverData"),
    Input("figure-funnelchart", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### 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.


#### FunnelChart selectors


| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-FunnelChart-root | Root element |
| tooltip | .mantine-FunnelChart-tooltip | Tooltip root element |
| tooltipBody | .mantine-FunnelChart-tooltipBody | Tooltip wrapper around all items |
| tooltipItem | .mantine-FunnelChart-tooltipItem | Tooltip item representing data series |
| tooltipItemBody | .mantine-FunnelChart-tooltipItemBody | Tooltip item wrapper around item color and name |
| tooltipItemColor | .mantine-FunnelChart-tooltipItemColor | Tooltip item color |
| tooltipItemName | .mantine-FunnelChart-tooltipItemName | Tooltip item name |
| tooltipItemData | .mantine-FunnelChart-tooltipItemData | Tooltip item data |
| tooltipLabel | .mantine-FunnelChart-tooltipLabel | Label of the tooltip |

#### FunnelChart CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --chart-labels-color | Controls color of the chart labels |
| root | --chart-size | Controls size of the chart |
| root | --chart-stroke-color | Controls color of the chart stroke |





### Keyword Arguments
#### FunnelChart

- children (a list of or a singular dash component, string or number; optional):
    Additional elements rendered inside `FunnelChart` component.

- 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.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

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

- data (list of dicts; required):
    Data used to render chart.

    `data` is a list of dicts with keys:

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

- funnelChartProps (dict; optional):
    Props passed down to recharts `FunnelChart` component.

- funnelProps (dict; optional):
    Props passed down to recharts `Funnel` component.

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

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- labelColor (optional):
    Controls text color of all labels Default 'white'.

- labelsPosition (a value equal to: 'left', 'right', 'inside'; optional):
    Controls labels position relative to the segment.Default 'right'.

- legendProps (dict; optional):
    Props passed down to recharts `Legend` component.

- 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.

- size (number; optional):
    Controls chart width and height Default 300.

- strokeColor (optional):
    Controls color of the segments stroke, by default depends on color
    scheme.

- strokeWidth (number; optional):
    Controls width of segments stroke Default 1.

- 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.

- tooltipAnimationDuration (number; optional):
    Tooltip animation duration in ms Default 0.

- tooltipDataSource (a value equal to: 'segment', 'all'; optional):
    Determines which data is displayed in the tooltip. `'all'` –
    display all values, `'segment'` – display only hovered segment.
    Default 'all'.

- tooltipProps (dict; optional):
    Props passed down to `Tooltip` recharts component.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format values inside the tooltip and labels.

- variant (string; optional):
    variant.

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

- withLabels (boolean; optional):
    Determines whether each segment should have associated label.
    Default False.

- withLegend (boolean; optional):
    Determines whether the legend should be displayed default False.

- withTooltip (boolean; optional):
    Determines whether the tooltip should be displayed when a section
    is hovered Default True.

## Heatmap  
Heatmap component  
Category: Charts  

### Usage

`Heatmap` is used to display data in a table where each column represents a week.
The only required prop is `data`, a dictionary where keys are dates in `YYYY-MM-DD` format and values are numbers.

The `startDate` and `endDate` props are optional; they are used to define the heatmap range.
If not set, the heatmap will display data for the last year.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16"
)
```
## Data format

`Heatmap` expects data in the following format:

```python
data = {
  '2025-02-14': 2,
  '2025-02-11': 3,
  '2025-02-06': 4,
  '2025-02-05': 1,
  '2025-02-03': 2,
  '2025-02-01': 2,
  '2025-01-31': 4,
  '2025-01-30': 2,
  # ...
}
```

### With tooltip


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

Set the `withTooltip` and `getTooltipLabel` props to display a tooltip when
`Heatmap` cells are hovered. `getTooltipLabel` is called with date and value
and must return a string to display in the tooltip.



This example uses [dayjs](https://day.js.org/) to simplify working with dates in JavaScript.

To use `dayjs` in your Dash app, load it as an external script:

```python
app = Dash(external_scripts=[
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"
])
```

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    withTooltip=True,
    withWeekdayLabels=True,
    withMonthLabels=True,
    getTooltipLabel={"function": "heatmapTooltip"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dayjs = window.dayjs;

dmcfuncs.heatmapTooltip = ({ date, value }) =>
    `${dayjs(date).format('DD MMM, YYYY')} – ${value === null || value === 0 ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
```



### Change colors

`Heatmap` colors can be changed with the `colors` prop. It should be an array of any
valid CSS color values (hex, rgba, CSS variables, etc.). By default, `Heatmap`
uses 4 colors to indicate heat level, but you can pass any number of colors.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    colors=[
        'var(--mantine-color-orange-4)',
        'var(--mantine-color-orange-6)',
        'var(--mantine-color-orange-7)',
        'var(--mantine-color-orange-9)',
      ]
)
```
### Colors depending on color scheme

If you want to change colors depending on the color scheme,
you should define those colors in `.css` file:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    className="heatmap-light-dark",
)
```

```css
/* applied in light color-scheme */
.heatmap-light-dark {
    --heatmap-level-1: var(--mantine-color-blue-2);
    --heatmap-level-2: var(--mantine-color-blue-4);
    --heatmap-level-3: var(--mantine-color-blue-6);
    --heatmap-level-4: var(--mantine-color-blue-9);
}

/* applied in dark color-scheme */
 [data-mantine-color-scheme='dark'] .heatmap-light-dark {
    --heatmap-level-1: rgba(253, 126, 20, 0.35);
    --heatmap-level-2:  rgba(253, 126, 20, 0.65);
    --heatmap-level-3: var(--mantine-color-orange-6);
    --heatmap-level-4: var(--mantine-color-yellow-4);
}
```


Note that in this case, you can only use 4 colors without passing the `colors` prop.
If you need more colors, you should pass them manually to the component:

```python
dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    colors=[
        'var(--heatmap-level-1)',
        'var(--heatmap-level-2)',
        'var(--heatmap-level-3)',
        'var(--heatmap-level-4)',
        'var(--heatmap-level-5)',
        'var(--heatmap-level-6)',
      ]
)
```

### Values domain

By default, `Heatmap` calculates domain based on data values, for example, for
the following data, the domain will be `[1, 4]`:

```python
data = {
  '2025-02-14': 2,
  '2025-02-11': 3,
  '2025-02-06': 4,
  '2025-02-05': 1,
}
```

Based on the domain, `Heatmap` calculates colors for each rect: 1 (min heat level),
4 (max heat level). To specify the domain manually, use the `domain` prop. It is useful
when your data does not cover the whole range of possible values. For example,
the subset of data passed to the heatmap has values from 1 to 4, but the actual
range is from 1 to 10. In this case, you can pass `[1, 10]` to the `domain` prop:

```python
data = {
  '2025-02-14': 2,
  '2025-02-11': 3,
  '2025-02-06': 4,
  '2025-02-05': 1,
}

dmc.Heatmap(data=data, domain=[1, 10])

```

### Weekdays and months labels

Set  `withMonthLabels=True` and `withWeekdayLabels=True` to display chart labels:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    withWeekdayLabels=True,
    withMonthLabels=True,
)
```
### Month labels position
Set monthLabelsPosition="bottom" to display month labels below the heatmap:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    withWeekdayLabels=True,
    withMonthLabels=True,
    monthLabelsPosition="bottom"
)
```
### Change labels text

To change labels, use the `weekdayLabels` and `monthLabels` props.
The `weekdayLabels` prop must be an array of 7 strings with weekday names starting from Sunday.
The `monthLabels` prop must be an array of 12 strings with month names starting from January.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    withWeekdayLabels=True,
    withMonthLabels=True,
    weekdayLabels=["Dim", "Lun", "", "Mer", "", "Ven", ""],
    monthLabels=[
        "Jan",
        "Fév",
        "Mar",
        "Avr",
        "Mai",
        "Jun",
        "Jul",
        "Aoû",
        "Sep",
        "Oct",
        "Nov",
        "Déc",
    ]
)
```
### Rect size, gap and radius

### hoverData and clickData 


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


component = dmc.Box([
        dmc.Heatmap(
        id="heatmap-chart",
        data=data,
        startDate="2024-02-16",
        endDate="2025-02-16"
    ),
    dmc.Text(id="heatmap-clickdata"),
    dmc.Text(id="heatmap-hoverdata")
])


@callback(
  Output("heatmap-clickdata", "children"),
  Input("heatmap-chart", "clickData")
)
def update_clickdata(clickData):
    return f"You clicked on: {clickData}"


@callback(
  Output("heatmap-hoverdata", "children"),
  Input("heatmap-chart", "hoverData")
)
def update_hoverdata(hoverData):
  return f"You hovered over: {hoverData}"
```
### Hide outside dates


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2024-04-16",
    withWeekdayLabels=True,
    withMonthLabels=True,
    withOutsideDates=False
)
```
### First day of week

The default first day of the week is Monday; you can change it with the `firstDayOfWeek` prop:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2024-04-26",
    withWeekdayLabels=True,
    withMonthLabels=True,
    firstDayOfWeek=0,
    weekdayLabels=['', 'Mon', '', 'Wed', '', 'Fri', '']
)
```
### Split months

Use `splitMonths` to separate months visually with a spacer column and show only days that belong to the current month in each column. Month labels will be shifted by one column when `splitMonths` is enabled and months with fewer than 2 weeks are not labeled.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-26",
    withMonthLabels=True,
    splitMonths=True
)
```
### Legend
Set `withLegend=True` to display a color legend below the heatmap. Use `legendLabels` prop to customize the labels
(default: `['Less', 'More']`):

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    withWeekdayLabels=True,
    withMonthLabels=True,
    withLegend=True,
)
```
### 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.


#### Heatmap selectors


| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Heatmap-root | Root element |
| weekdayLabel | .mantine-Heatmap-weekdayLabel | Weekday text element |
| monthLabel | .mantine-Heatmap-monthLabel | Month text element |
| rect | .mantine-Heatmap-rect | Rect that represents date |
| legend | .mantine-Heatmap-legend | Legend group element |
| legendLabel | .mantine-Heatmap-legendLabel | Legend text label (Less/More) |
| legendRect | .mantine-Heatmap-legendRect | Legend color rect |



### Keyword Arguments
#### Heatmap

- 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.

- 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.

- clickData (dict with strings as keys and values of type number; optional):
    Clicked heatmap cell data containing date and value.

- colors (list of strings; optional):
    Colors array, used to calculate color for each value, by default 4
    shades of green colors are used.

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

- data (dict with strings as keys and values of type number; required):
    Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a
    UTC calendar day).

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

- domain (list of 2 elements: [number, number]; optional):
    Heatmap domain, array of 2 numbers, min and max values, calculated
    from data by default.

- endDate (string; optional):
    Heatmap end date. Current date by default. Date is normalized to
    UTC midnight of the intended calendar day.

- firstDayOfWeek (a value equal to: 0, 2, 1, 3, 4, 5, 6; optional):
    First day of week, 0 – Sunday, 1 – Monday. Default 1 – Monday.

- fontSize (number; optional):
    Font size of month and weekday labels. Default 12.

- gap (number; optional):
    Gap between rects in px. Default 1.

- getTooltipLabel (boolean | number | string | dict | list; optional):
    A function to generate tooltip label based on the hovered rect
    date and value, required for the tooltip to be visible.

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

- hoverData (dict with strings as keys and values of type number; optional):
    Hovered heatmap cell data containing date and value.

- legendLabels (list of 2 elements: [string, string]; optional):
    Legend labels, array of 2 elements: [min label, max label] default
    ['Less', 'More'].

- 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.

- monthLabels (list of strings; optional):
    Month labels, array of 12 elements, can be used for localization.

- monthLabelsPosition (a value equal to: 'top', 'bottom'; optional):
    Month labels position relative to the heatmap default 'top'.

- monthsLabelsHeight (number; optional):
    Height of month labels row. Default 30.

- rectRadius (number; optional):
    Rect radius in px. Default 2.

- rectSize (number; optional):
    Size of day rect in px. Default 10.

- splitMonths (boolean; optional):
    If set, inserts a spacer column between months. Default False.

- startDate (string; optional):
    Heatmap start date. Current date - 1 year by default. Date is
    normalized to UTC midnight of the intended calendar day.

- 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.

- tooltipProps (boolean | number | string | dict | list; optional):
    Props passed down to the `Tooltip.Floating` component.

- variant (string; optional):
    variant.

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

- weekdayLabels (list of strings; optional):
    Weekday labels, array of 7 elements, can be used for localization.

- weekdaysLabelsWidth (number; optional):
    Width of weekday labels column. Default 30.

- withLegend (boolean; optional):
    If set, legend with color levels is displayed below the heatmap
    default False.

- withMonthLabels (boolean; optional):
    If set, month labels are displayed. Default False.

- withOutsideDates (boolean; optional):
    If set, trailing dates that do not fall into the given `startDate`
    – `endDate` range are displayed to fill empty space. Default True.

- withTooltip (boolean; optional):
    If set, tooltip is displayed on rect hover. Default False.

- withWeekdayLabels (boolean; optional):
    If set, weekday labels are displayed. Ddefault False.

## LineChart  
Line chart component  
Category: Charts  

### Introduction

```python
import dash_mantine_components as dmc
from .data import data

dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    series = [
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ],
    curveType="linear",
    tickLine="xy",
    withXAxis=False,
    withDots=False,
)
```


### Data
Here is the data imported for the examples on this page:

```python

data = [
  {"date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452},
  {"date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402},
  {"date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": 1821},
  {"date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809},
  {"date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}
]
```

### Gradient type
Set `type="gradient"` to render a line chart with gradient fill. To customize gradient colors, use `gradientStops` prop.
It accepts an array of objects with `offset` and `color` properties. `offset` is a number between 0 and 100 that defines
the position of the color in the gradient, `color` is a reference to `theme.colors` or any valid CSS color.

```python
import dash_mantine_components as dmc


data = [
    {"date": "Jan", "temperature": -25},
    {"date": "Feb", "temperature": -10},
    {"date": "Mar", "temperature": 5},
    {"date": "Apr", "temperature": 15},
    {"date": "May", "temperature": 30},
    {"date": "Jun", "temperature": 15},
    {"date": "Jul", "temperature": 30},
    {"date": "Aug", "temperature": 40},
    {"date": "Sep", "temperature": 15},
    {"date": "Oct", "temperature": 20},
    {"date": "Nov", "temperature": 0},
    {"date": "Dec", "temperature": -10},
]

component = dmc.LineChart(
    h=300,
    data=data,
    series=[{"name": "temperature", "label": "Avg. Temperature"}],
    dataKey="date",
    type="gradient",
    valueFormatter={"function": "celsiusLabel"},
    gradientStops=[
        {"offset": 0, "color": "red.6"},
        {"offset": 20, "color": "orange.6"},
        {"offset": 40, "color": "yellow.5"},
        {"offset": 70, "color": "lime.5"},
        {"offset": 80, "color": "cyan.5"},
        {"offset": 100, "color": "blue.5"},
    ],
    strokeWidth=5,
    curveType="natural",
    yAxisProps={"domain": [-25, 40]},
    p="lg"
)
```
### Value formatter
To format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value`
as an argument and returns formatted value:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    valueFormatter={"function": "formatNumberIntl"},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatNumberIntl = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
};
```


### Legend
To display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data
series is highlighted in the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    withLegend=True,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Legend position
You can pass props down to recharts Legend component with `legendProps` prop. For example, setting the following will
render the legend at the bottom of the chart and set its height to 50px:
```python
legendProps={'verticalAlign': 'bottom', 'height': 50} 
```

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    withLegend=True,
    legendProps={"verticalAlign": "bottom", "height": 50},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Series labels
By default, series `name` is used as a label. To change it, set `label` property in `series` object:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    withLegend=True,
    legendProps={"verticalAlign": "bottom"},
    series=[
        {"name": "Apples", "label": "Apples sales", "color": "indigo.6"},
        {"name": "Oranges", "label": "Oranges sales", "color": "blue.6"},
        {"name": "Tomatoes", "label": "Tomatoes sales", "color": "teal.6"},
    ],
)
```
### Connect nulls
Use `connectNulls` prop to specify whether to connect a data point across null points. By default, `connectNulls` is true.


```python
import dash_mantine_components as dmc

data = [
  {"date": "Mar 22", "Apples": 110},
  {"date": "Mar 23", "Apples": 60},
  {"date": "Mar 24", "Apples": -80},
  {"date": "Mar 25", "Apples": 40},
  {"date": "Mar 26", "Apples": None},
  {"date": "Mar 27", "Apples": 80}
]

dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    connectNulls=True,
    series=[{"name": "Apples", "color": "indigo.6"}],
    curveType="linear",
)

```

### X and Y axis props
Use `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these props can
be used to change orientation of axis:

```python
import dash_mantine_components as dmc
from .data import data


component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    tickLine="xy",
    yAxisProps={"tickMargin": 15, "orientation": "right"},
    xAxisProps={"tickMargin": 15, "orientation": "top"},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Axis labels
Use `xAxisLabel` and `yAxisLabel` props to display axis labels:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    xAxisLabel="Date",
    yAxisLabel="Amount",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### X axis offset
Use xAxisProps to set padding between the charts ends and the x-axis:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    xAxisProps={"padding": {"left": 30, "right": 30}},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Y axis scale
Use `yAxisProps` to change domain of the Y axis. For example, if you know that your data will always be in the range
of 0 to 100, you can set domain to `[0, 100]`:

```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 22", "Apples": 50},
    {"date": "Mar 23", "Apples": 60},
    {"date": "Mar 24", "Apples": 40},
    {"date": "Mar 25", "Apples": 30},
    {"date": "Mar 26", "Apples": 0},
    {"date": "Mar 27", "Apples": 20},
    {"date": "Mar 28", "Apples": 20},
    {"date": "Mar 29", "Apples": 10},
]

component = dmc.LineChart(
    h=300,
    dataKey="date",
    yAxisProps={"domain": [0, 100]},
    data=data,
    connectNulls=True,
    series=[{"name": "Apples", "color": "indigo.6"}],
)
```
### Right Y axis
To display additional Y axis on the right side of the chart, set `withRightYAxis` prop. You can pass props down to
recharts `YAxis` component with `rightYAxisProps` prop and assign a label to the right Y axis with `rightYAxisLabel` prop.
Note that you need to bind data series to the right Y axis by setting `yAxisId` in the series object.


```python
import dash_mantine_components as dmc

data = biaxial_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398},
    {"name": "Page C", "uv": 2000, "pv": 9800},
    {"name": "Page D", "uv": 2780, "pv": 3908},
    {"name": "Page E", "uv": 1890, "pv": 4800},
    {"name": "Page F", "uv": 2390, "pv": 3800},
    {"name": "Page G", "uv": 3490, "pv": 4300},
]

component = dmc.LineChart(
    h=300,
    data=data,
    dataKey="name",
    withRightYAxis=True,
    yAxisLabel="uv",
    rightYAxisLabel="pv",
    series=[
        {"name": "uv", "color": "pink.6"},
        {"name": "pv", "color": "cyan.6", "yAxisId": "right"},
    ],
)
```
### Rotate x-axis labels
To rotate x-axis labels, set `xAxisProps.angle` to a number of degrees to rotate:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    tickLine="xy",
    xAxisProps={"angle": -20},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Line color
You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. 
Any valid CSS color value is also accepted.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    series=[{"name": "Apples", "color": "orange.7"}],
)
```
### Change line color depending on color scheme
You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

Example of line color that is dark orange in light mode and lime in dark mode:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    series=[{"name": "Apples", "color": "var(--chart-color)"}],
)
```

```css
:root {
   --chart-color: var(--mantine-color-orange-8)
}

:root[data-mantine-color-scheme="dark"] {
  --chart-color: var(--mantine-color-lime-4);
}
```



### Stroke dash array
Set `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the
lengths of alternating dashes and gaps. For example, strokeDasharray="10 5" will render a dashed line with 10px dashes
and 5px gaps.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    strokeDasharray="15 15",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Grid and text colors
Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. 
With CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)



```python
import dash_mantine_components as dmc
from .data import data



component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    className="chart-grid-text-colors",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```

```css

.chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-5);
  --chart-text-color: var(--mantine-color-blue-8);
}

[data-mantine-color-scheme='dark'] .chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-3);
  --chart-text-color: var(--mantine-color-blue-2);
}
```

If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:

```python
dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    gridColor="gray.5",
    textColor = "gray.9",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)

```

### Tooltip animation
By default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of
milliseconds to animate the tooltip position change.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    tooltipAnimationDuration=200,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Line animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `lineProps` to pass properties to the Recharts `Line` component.

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

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-linechart-animation"),
        dmc.LineChart(
            id="linechart-animation",
            h=300,
            dataKey="date",
            data=[{}],
            tooltipAnimationDuration=500,
            lineProps={
                "isAnimationActive": True,
                "animationDuration": 500,
                "animationEasing": "ease-in-out",
                "animationBegin": 500,
            },
            series=[
                {"name": "Apples", "color": "indigo.6"},
                {"name": "Oranges", "color": "blue.6"},
                {"name": "Tomatoes", "color": "teal.6"},
            ],
        ),
    ]
)


@callback(
    Output("linechart-animation", "data"), Input("btn-linechart-animation", "n_clicks")
)
def update(n):
    return [
        {
            "date": "Mar 22",
            "Apples": 2890,
            "Oranges": 2338,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 23",
            "Apples": 2756,
            "Oranges": 2103,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 24",
            "Apples": 3322,
            "Oranges": 986,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 25",
            "Apples": 3470,
            "Oranges": 2108,
            "Tomatoes": randint(1000, 4000),
        },
        {
            "date": "Mar 26",
            "Apples": 3129,
            "Oranges": 1726,
            "Tomatoes": randint(1000, 4000),
        },
    ]
```
### Units
Set `unit` prop to render a unit label next to the y-axis ticks and tooltip values:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    unit="$",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Remove tooltip
To remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    withTooltip=False,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Custom tooltip
Use the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:
```python
 tooltipProps={'content': {'functon': 'myFunction'}}
```


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    tooltipProps={"content":  {"function": "chartTooltip"}}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.chartTooltip = ({ label, payload }) => {

  if (!payload || payload.length === 0) return null;

  return React.createElement(
    dmc.Paper,
    {
      px: "md",
      py: "sm",
      withBorder: true,
      shadow: "md",
      radius: "md",
    },
    [
      React.createElement(
        dmc.Text,
        {
          key: "tooltip-label",
          fw: 500,
          mb: 5,
        },
        label
      ),
      ...payload.map((item, index) =>
        React.createElement(
          dmc.Text,
          {
            key: `item-${index}`,
            c: item.color,
            fz: "sm",
          },
          `${item.name}: ${item.value}`
        )
      ),
    ]
  );
};
```


### Customize dots
Use `dotProps` to pass props down to recharts dot in regular state and `activeDotProps` to pass props down to recharts dot in active state (when cursor is over the current series).

```python
import dash_mantine_components as dmc
from .data import data


component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    dotProps={"r": 6, "strokeWidth": 2, "stroke": "#fff"},
    activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Stroke width
Use `strokeWidth` prop to control the stroke width of all areas:

```python
import dash_mantine_components as dmc
from .data import data

dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ],
    strokeWidth=2,
)

```

### Sync multiple LineCharts
You can pass props down to recharts LineChart component with `lineChartProps` prop. For example, setting the following 
will sync tooltip of multiple `LineChart` components with the same `syncId` prop.

```python
lineChartProps={"syncId": "any-id"}
```
```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [
        dmc.Text("Apples sales:"),
        dmc.LineChart(
            h=180,
            dataKey="date",
            data=data,
            series=[{"name": "Apples", "color": "indigo.6"}],
            lineChartProps={"syncId": "groceries"},
        ),
        dmc.Text("Tomatoes sales"),
        dmc.LineChart(
            h=180,
            dataKey="date",
            data=data,
            series=[{"name": "Tomatoes", "color": "teal.6"}],
            lineChartProps={"syncId": "groceries"},
        ),
    ]
)
```
### Vertical orientation
Set orientation="vertical" to render a vertical area chart:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    orientation="vertical",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
)
```
### Dashed area line
Set `strokeDasharray` property in series to change line style to dashed:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    strokeWidth=1,
    dotProps={"r": 2},
    activeDotProps={"r": 3, "strokeWidth": 1},
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6", "strokeDasharray": "5 5"},
    ],
)
```
### Reference lines
Use `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.

```python
import dash_mantine_components as dmc

data = [
    {"date": "Mar 22", "Apples": 50},
    {"date": "Mar 23", "Apples": 60},
    {"date": "Mar 24", "Apples": 40},
    {"date": "Mar 25", "Apples": 30},
    {"date": "Mar 26", "Apples": 0},
    {"date": "Mar 27", "Apples": 20},
    {"date": "Mar 28", "Apples": 20},
    {"date": "Mar 29", "Apples": 10},
]


component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    yAxisProps={"domain": [0, 100]},
    referenceLines=[
        {"y": 40, "label": "Average sales", "color": "red.6"},
        {"x": "Mar 25", "label": "Report out"},
    ],
    series=[{"name": "Apples", "color": "indigo.6"}],
)
```
### Reference areas
Use the `referenceAreas` prop to highlight a rectangular region of the chart. Each area is bounded by x1/x2 (horizontal)
and y1/y2 (vertical) data values – omit one pair to span the full opposite axis, for example provide only x1/x2 to
highlight a time range across the entire height of the chart. Set `color` to any theme color or CSS color and label
to display text inside the area. Reference areas are rendered behind the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    data=data,
    dataKey="date",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    referenceAreas=[
        {"y1": 2000, "y2": 3000, "color": "teal.6", "label": "Target range"},
    ],
)
```
### Reference dots
Use the `referenceDots` prop to mark individual points on the chart – a peak, an event, a record value or an anomaly. 
Each dot is positioned by x and y data coordinates and supports `r` (radius), `color` (any theme color or CSS color) and
`label`. Reference dots are rendered on top of the chart series.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    data=data,
    dataKey="date",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    referenceDots=[
        {"x": "Mar 25", "y": 3470, "color": "indigo.6", "label": "Peak"},
        {"x": "Mar 24", "y": 986, "color": "red.6", "label": "Low"},
    ],
)
```
### Brush (Range Slider)
Set the `withBrush` prop to display a brush (range slider) under the chart. Drag the brush handles to
zoom into a subset of the data. The chart updates to show only the selected range. The brush border and background are
themed to match the chart grid and adapt to the color scheme. `withBrush` is `False` by default and is supported by
`AreaChart`, `BarChart`, `LineChart` and `CompositeChart` components with `horizontal` orientation.

Use the `brushDragEnd` prop to get the `startIndex` and `endIndex` of the selected range when dragging ends. 

Use the `brushProps` prop to pass props down to the underlying [recharts Brush](https://recharts.github.io/en-US/api/Brush/) component. For example, you can set the
initially selected range with `startIndex`/`endIndex`, change the brush height and more.

```python
import dash_mantine_components as dmc
from dash import callback, Input, Output
from .data import data2

component = dmc.Stack([
    dmc.LineChart(
        h=300,
        data=data2,
        dataKey="month",
        withBrush=True,
        series=[
            {"name": "Smartphones", "color": "violet.6"},
            {"name": "Laptops", "color": "blue.6"},
        ],
        id="linechart-brush",
    ),
    dmc.Text(id="linechart-brush-dragend"),
])

@callback(
    Output("linechart-brush-dragend", "children"),
    Input("linechart-brush", "brushDragEnd"),
)
def update_brush_range(brush_drag_end):
    return f"Brush range selected: {brush_drag_end}"
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event.
To get the name of the clicked series, use the `clickSeriesName` property.

Note: To enable `clickSeriesName` when clicking on the dots,  set `withTooltip=True`.

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

component = dmc.Group(
    [
        dmc.LineChart(
            id="figure-linechart",
            h=300,
            dataKey="date",
            data=data,
            withLegend=True,
            series=[
                {"name": "Apples", "color": "indigo.6"},
                {"name": "Oranges", "color": "blue.6"},
                {"name": "Tomatoes", "color": "teal.6"},
            ],
            activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"},
            strokeWidth=4
        ),
        dmc.Text(id="clickdata-linechart1"),
        dmc.Text(id="clickdata-linechart2"),
    ]
)



@callback(
    Output("clickdata-linechart1", "children"),
    Output("clickdata-linechart2", "children"),
    Input("figure-linechart", "clickData"),
    Input("figure-linechart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event.
To get the name of the hovered series, use the `hoverSeriesName` property.

Note: To enable `hoverSeriesName` when hovering on the dots,  set `withTooltip=True`.

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

import dash_mantine_components as dmc
from .data import data

component = dmc.Group(
    [
        dmc.LineChart(
            id="figure-linechart-hover",
            h=300,
            dataKey="date",
            data=data,
            series=[
                {"name": "Apples", "color": "indigo.6"},
                {"name": "Oranges", "color": "blue.6"},
                {"name": "Tomatoes", "color": "teal.6"},
            ],
            activeDotProps={"r": 8, "strokeWidth": 1, "fill": "#fff"},
            strokeWidth=4
        ),
        dmc.Text(id="hoverdata-linechart1"),
        dmc.Text(id="hoverdata-linechart2"),
    ]
)


@callback(
    Output("hoverdata-linechart1", "children"),
    Output("hoverdata-linechart2", "children"),
    Input("figure-linechart-hover", "hoverData"),
    Input("figure-linechart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### highlightHover

Set `highlightHover=True` to highlight the series when hovered, mirroring the behavior of hovering over chart legend items.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.LineChart(
    h=300,
    dataKey="date",
    data=data,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    withLegend=True,
    highlightHover=True,
    withTooltip=False,
    strokeWidth=4
)
```
### 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.


#### LineChart selectors

| Selector         | Static selector                    | Description                                      |
|:-----------------|:----------------------------------|:-------------------------------------------------|
| root             | .mantine-LineChart-root           | Root element                                    |
| line             | .mantine-LineChart-line           | Line of the chart                               |
| axis             | .mantine-LineChart-axis           | X and Y axis of the chart                       |
| container        | .mantine-LineChart-container      | Recharts ResponsiveContainer component          |
| grid             | .mantine-LineChart-grid           | Recharts CartesianGrid component                |
| legend           | .mantine-LineChart-legend         | Legend root element                             |
| legendItem       | .mantine-LineChart-legendItem     | Legend item representing data series            |
| legendItemColor  | .mantine-LineChart-legendItemColor| Legend item color                               |
| legendItemName   | .mantine-LineChart-legendItemName | Legend item name                                |
| tooltip          | .mantine-LineChart-tooltip        | Tooltip root element                            |
| tooltipBody      | .mantine-LineChart-tooltipBody    | Tooltip wrapper around all items                |
| tooltipItem      | .mantine-LineChart-tooltipItem    | Tooltip item representing data series           |
| tooltipItemBody  | .mantine-LineChart-tooltipItemBody| Tooltip item wrapper around item color and name|
| tooltipItemColor | .mantine-LineChart-tooltipItemColor| Tooltip item color                             |
| tooltipItemName  | .mantine-LineChart-tooltipItemName | Tooltip item name                              |
| tooltipItemData  | .mantine-LineChart-tooltipItemData | Tooltip item data                              |
| tooltipLabel     | .mantine-LineChart-tooltipLabel   | Label of the tooltip                            |
| referenceLine    | .mantine-LineChart-referenceLine  | Reference line                                  |
| axisLabel        | .mantine-LineChart-axisLabel      | X and Y axis labels                             |


#### LineChart CSS variables

| Selector         | Variable             | Description                                      |
|:-----------------|:---------------------|:-------------------------------------------------|
| root             | --chart-grid-color   | Controls color of the grid and cursor lines      |
|                  | --chart-text-color   | Controls color of the axis labels                |



### Keyword Arguments
#### LineChart

- children (a list of or a singular dash component, string or number; optional):
    Additional components that are rendered inside recharts
    `AreaChart` component.

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

- accessibilityLayer (boolean; optional):
    Determines whether the chart should be keyboard-navigable with the
    recharts accessibility layer, `True` by default.

- activeDotProps (boolean | number | string | dict | list; optional):
    Props passed down to all active dots. Ignored if
    `withDots={False}` is set.

- 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.

- brushDragEnd (dict with strings as keys and values of type number; optional):
    The startIndex and endIndex  of the selected brush range when
    dragging ends. Read only.

- brushProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Brush` component.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

- connectNulls (boolean; optional):
    Determines whether points with `None` values should be connected,
    `True` by default.

- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):
    Type of the curve, `'monotone'` by default.

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

- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):
    Data used to display chart.

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

- dataKey (string; required):
    Key of the `data` object for x-axis values.

- dotProps (boolean | number | string | dict | list; optional):
    Props passed down to all dots. Ignored if `withDots={False}` is
    set.

- fillOpacity (number; optional):
    Controls fill opacity of all lines, `1` by default.

- gradientStops (list of dicts; optional):
    Data used to generate gradient stops, [{ offset: 0, color: 'red'
    }, { offset: 100, color: 'blue' }] by default.

    `gradientStops` is a list of dicts with keys:

- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which lines should be displayed in the grid, `'x'` by
    default.

- gridColor (optional):
    Color of the grid and cursor lines, by default depends on color
    scheme.

- gridProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `CartesianGrid` component.

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

- highlightHover (boolean; optional):
    Determines whether a hovered series is highlighted. False by
    default. Mirrors the behaviour when hovering about chart legend
    items.

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- legendProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Legend` component.

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

- lineChartProps (boolean | number | string | dict | list; optional):
    Props passed down to recharts `LineChart` component.

- lineProps (boolean | number | string | dict | list; optional):
    Props passed down to recharts `Line` component.

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Chart orientation, `'horizontal'` by default.

- referenceAreas (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference areas that should be displayed on the chart.

- referenceDots (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference dots that should be displayed on the chart.

- referenceLines (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference lines that should be displayed on the chart.

- rightYAxisLabel (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- rightYAxisProps (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- series (list of dicts; required):
    An array of objects with `name` and `color` keys. Determines which
    data should be consumed from the `data` array.

    `series` is a list of dicts with keys:

- strokeDasharray (string | number; optional):
    Dash array for the grid lines and cursor, `'5 5'` by default.

- strokeWidth (number; optional):
    Stroke width for the chart lines, `2` 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.

- textColor (optional):
    Color of the text displayed inside the chart, `'dimmed'` by
    default.

- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which axis should have tick line, `'y'` by default.

- tooltipAnimationDuration (number; optional):
    Tooltip position animation duration in ms, `0` by default.

- tooltipProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Tooltip` component.

- type (a value equal to: 'default', 'gradient'; optional):
    Controls styles of the line 'default' | 'gradient'.   'default' by
    default.

- unit (string; optional):
    Unit displayed next to each tick in y-axis.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format values on Y axis and inside the tooltip. See
    https://www.dash-mantine-components.com/functions-as-props.

- variant (string; optional):
    variant.

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

- withBrush (boolean; optional):
    Determines whether a brush (range selector) should be displayed
    under the chart, `False` by default.

- withDots (boolean; optional):
    Determines whether dots should be displayed, `True` by default.

- withLegend (boolean; optional):
    Determines whether chart legend should be displayed, `False` by
    default.

- withPointLabels (boolean; optional):
    Determines whether each point should have associated label, False
    by default.

- withRightYAxis (boolean; optional):
    Determines whether additional y-axis should be displayed on the
    right side of the chart, False by default.

- withTooltip (boolean; optional):
    Determines whether chart tooltip should be displayed, `True` by
    default.

- withXAxis (boolean; optional):
    Determines whether x-axis should be hidden, `True` by default.

- withYAxis (boolean; optional):
    Determines whether y-axis should be hidden, `True` by default.

- xAxisLabel (string; optional):
    A label to display below the x-axis.

- xAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `XAxis` recharts component.

- yAxisLabel (string; optional):
    A label to display next to the y-axis.

- yAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `YAxis` recharts component.

## PieChart  
Pie chart component  
Category: Charts  

### Introduction

PieChart is based on [PieChart recharts](https://recharts.org/en-US/api/PieChart) component:

### Usage

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data)
```
### Data
Here is the data imported for the examples on this page:

```python

data = [
  { "name": "USA", "value": 400, "color": "indigo.6" },
  { "name": "India", "value": 300, "color": "yellow.6" },
  { "name": "Japan", "value": 100, "color": "teal.6" },
  { "name": "Other", "value": 200, "color": "gray.6" }
]
```

### Legend
To display the legend, set the `withLegend` prop. The legend displays the name and color of each segment. Hover over
a legend item to highlight the corresponding segment.

You can pass props down to the recharts Legend component with the `legendProps` prop. For example, set
`legendProps={"verticalAlign": 'top'}` to display the legend above the chart.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data, withLegend=True)
```
### Segment labels

Set `withLabels` prop to display labels next to each segment. Use `labelPosition` prop to control the position of labels
relative to the corresponding segment. Note that if your chart has a lot of segments and labelPosition="inside" is
set, labels might overlap. In this case, use labelPosition="outside".

```python
import dash_mantine_components as dmc
from .data import data

dmc.PieChart(
    data=data,
    withLabelsLine=True,
    labelsPosition="inside",
    labelsType="percent",
    withLabels=True,
)
```

### Size

Set `size` prop to control width and height of the chart. Note that if `withLabels` and labelPosition="outside" prop
are set, the chart height is automatically increased by 80px to make room for labels. You can override this behavior
by setting `h` and `w` style prop.


```python
import dash_mantine_components as dmc
from .data import data

dmc.PieChart(
    data=data,
    size=275  
)
```
### Segment color

You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. 
Any valid CSS color value is also accepted.

```python
import dash_mantine_components as dmc

data = [
    {"name": "USA", "value": 400, "color": "blue"},
    {"name": "Other", "value": 200, "color": "gray.6"},
]

component = dmc.PieChart(data=data)
```
### Enable Tooltip

To enable the tooltip, set `withTooltip` prop:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data, withTooltip=True)
```
### Tooltip data source

By default, the tooltip displays data for all segments when hovered over any segment. To display data only for the hovered segment, set tooltipDataSource="segment":

```python
import dash_mantine_components as dmc
from dash import html
from .data import data

component = dmc.Group(
    [
        html.Div(
            [
                dmc.Text(
                    "Data only for hovered segment", fz="xs", mb="sm", ta="center"
                ),
                dmc.PieChart(
                    data=data,
                    withTooltip=True,
                    tooltipDataSource="segment",
                    mx="auto",
                ),
            ]
        ),
        html.Div(
            [
                dmc.Text("Data only for all segments", fz="xs", mb="sm", ta="center"),
                dmc.PieChart(
                    data=data,
                    withTooltip=True,
                    mx="auto",
                ),
            ]
        ),
    ],
    gap=50,
)
```
### Start and end angle

Use `startAngle` and `endAngle` props to control the start and end angle of the chart. For example, to display a
half-circle chart, set `startAngle=180` and `endAngle=0`:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data, startAngle=180, endAngle=0)
```
### Segments stroke

Use `strokeWidth` prop to control the width of the stroke around each segment.

```python
import dash_mantine_components as dmc
from .data import data

dmc.PieChart(
    data=data,
    strokeWidth=1
)
```

To change color of the stroke, use `strokeColor` prop. You can reference colors from theme the same way as in other
components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.

```python
dmc.PieChart(
    data=data,
    strokeWidth=1.8,
    strokeColor="red.5"
)
```

By default, segments stroke color is the same as the background color of the body element
(`--mantine-color-body` CSS variable). If you want to change it depending on the color scheme, define CSS variable
and pass it to the `strokeColor` prop:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data, strokeColor="var(--card-bg)")
```
```css
.root {
  --card-bg: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));

  background-color: var(--card-bg);
  padding: var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-md);
}

```



### Pie animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `pieProps` to pass properties to the Recharts `Pie` component.


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


def get_data(values):
    return [
        {"name": "A", "value": values[0], "color": "indigo.6"},
        {"name": "B", "value": values[1], "color": "yellow.6"},
        {"name": "C", "value": values[2], "color": "teal.6"},
        {"name": "C", "value": values[3], "color": "gray.6"},
    ]


component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-piechart-animation", n_clicks=0, mb="md"),
        dmc.PieChart(
            id="piechart-animation",
            data=get_data([100, 0, 0, 0]),
            pieProps={"isAnimationActive": True},
        ),
    ]
)


@callback(
    Output("piechart-animation", "data"), Input("btn-piechart-animation", "n_clicks")
)
def update(n):
    if n % 2 == 0:
        return get_data([400, 300, 600, 100])
    return get_data([100, 0, 0, 0])
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the
clicked series, use the `clickSeriesName` property.
```python
from dash import callback, Input, Output
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [
        dmc.PieChart(
            id="figure-piechart",
            data=data,
        ),
        dmc.Text(id="clickdata-piechart1"),
        dmc.Text(id="clickdata-piechart2"),
    ]
)


@callback(
    Output("clickdata-piechart1", "children"),
    Output("clickdata-piechart2", "children"),
    Input("figure-piechart", "clickData"),
    Input("figure-piechart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the 
hovered series, use the `hoverSeriesName` property.

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

component = dmc.Stack(
    [
        dmc.PieChart(
            id="figure-piechart-hover",
            data=data,
        ),
        dmc.Text(id="hoverdata-piechart1"),
        dmc.Text(id="hoverdata-piechart2"),
    ]
)


@callback(
    Output("hoverdata-piechart1", "children"),
    Output("hoverdata-piechart2", "children"),
    Input("figure-piechart-hover", "hoverData"),
    Input("figure-piechart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### 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.


#### PieChart selectors

| Selector    | Static selector           | Description                             |
|:------------|:--------------------------|:----------------------------------------|
| root        | .mantine-PieChart-root    | Root element                            |


#### PieChart CSS variables

| Selector         | Variable               | Description                              |
|:-----------------|:-----------------------|:-----------------------------------------|
| root             | --chart-labels-color   | Controls color of the chart labels       |
|                  | --chart-size           | Controls size of the chart               |
|                  | --chart-stroke-color   | Controls color of the chart stroke       |


### Keyword Arguments
#### PieChart

- children (a list of or a singular dash component, string or number; optional):
    Additional elements rendered inside `PieChart` component.

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

- accessibilityLayer (boolean; optional):
    Determines whether the chart should be keyboard-navigable with the
    recharts accessibility layer, `True` by default.

- 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.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

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

- data (list of dicts; required):
    Data used to render chart.

    `data` is a list of dicts with keys:

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

- endAngle (number; optional):
    Controls angle at which charts ends, `360` by default. Set to `0`
    to render the chart as semicircle.

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

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- labelColor (optional):
    Controls text color of all labels, white by default.

- labelsPosition (a value equal to: 'inside', 'outside'; optional):
    Controls labels position relative to the segment, `'outside'` by
    default.

- labelsType (a value equal to: 'percent', 'value', 'name'; optional):
    Type of labels to display, `'value'` by default.

- legendProps (dict; optional):
    Props passed down to recharts `Legend` component.

- 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.

- paddingAngle (number; optional):
    Controls padding between segments, `0` by default.

- pieChartProps (dict; optional):
    Props passed down to recharts `PieChart` component.

- pieProps (boolean | number | string | dict | list; optional):
    Props passed down to recharts `Pie` component.

- size (number; optional):
    Controls chart width and height, height is increased by 40 if
    `withLabels` prop is set. Cannot be less than `thickness`. `80` by
    default.

- startAngle (number; optional):
    Controls angle at which chart starts, `0` by default. Set to `180`
    to render the chart as semicircle.

- strokeColor (optional):
    Controls color of the segments stroke, by default depends on color
    scheme.

- strokeWidth (number; optional):
    Controls width of segments stroke, `1` 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.

- tooltipAnimationDuration (number; optional):
    Tooltip animation duration in ms, `0` by default.

- tooltipDataSource (a value equal to: 'segment', 'all'; optional):
    Determines which data is displayed in the tooltip. `'all'` –
    display all values, `'segment'` – display only hovered segment.
    `'all'` by default.

- tooltipProps (boolean | number | string | dict | list; optional):
    Props passed down to `Tooltip` recharts component.

- variant (string; optional):
    variant.

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

- withLabels (boolean; optional):
    Determines whether each segment should have associated label,
    `False` by default.

- withLabelsLine (boolean; optional):
    Determines whether segments labels should have lines that connect
    the segment with the label, `True` by default.

- withLegend (boolean; optional):
    Determines whether the legend should be displayed default False.

- withTooltip (boolean; optional):
    Determines whether the tooltip should be displayed when one of the
    section is hovered, `True` by default.

## RadarChart  
Radar chart component  
Category: Charts  

### Usage

RadarChart is based on recharts [RadarChart](https://recharts.org/en-US/api/RadarChart) component:

```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales": 120},
    {"product": "Oranges", "sales": 98},
    {"product": "Tomatoes", "sales": 86},
    {"product": "Grapes", "sales": 99},
    {"product": "Bananas", "sales": 85},
    {"product": "Lemons", "sales": 65},
]


component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    series=[{"name": "sales", "color": "blue.4", "opacity": 0.2}],
)
```
### Multiple series 

You can display multiple series on the same radar chart:

```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales_january": 120, "sales_february": 100},
    {"product": "Oranges", "sales_january": 98, "sales_february": 90},
    {"product": "Tomatoes", "sales_january": 86, "sales_february": 70},
    {"product": "Grapes", "sales_january": 99, "sales_february": 80},
    {"product": "Bananas", "sales_january": 85, "sales_february": 120},
    {"product": "Lemons", "sales_january": 65, "sales_february": 150},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
)
```
### Change Color

You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.

```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales": 120},
    {"product": "Oranges", "sales": 98},
    {"product": "Tomatoes", "sales": 86},
    {"product": "Grapes", "sales": 99},
    {"product": "Bananas", "sales": 85},
    {"product": "Lemons", "sales": 65},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    series=[{"name": "sales", "color": "green", "strokeColor": "blue"}],
)
```
### Hide/show chart parts


```python
import dash_mantine_components as dmc

data = [
  {"product": "Apples", "sales_january": 120, "sales_february": 100},
  {"product": "Oranges", "sales_january": 98, "sales_february": 90},
  {"product": "Tomatoes", "sales_january": 86, "sales_february": 70},
  {"product": "Grapes", "sales_january": 99, "sales_february": 80},
  {"product": "Bananas", "sales_january": 85, "sales_february": 120},
  {"product": "Lemons", "sales_january": 65, "sales_february": 150}
]

component = dmc.RadarChart(
    h=300,
    data=data,    
    dataKey="product",
    series=[
      {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
      {"name": "sales_february", "color": "cyan.4", "opacity": 0.1}
    ],
    withPolarGrid=True,
    withPolarAngleAxis=False,
    withPolarRadiusAxis=True,
    withTooltip=False,
    withDots=False,
)


```


### With tooltip and dots


```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales_january": 120, "sales_february": 100},
    {"product": "Oranges", "sales_january": 98, "sales_february": 90},
    {"product": "Tomatoes", "sales_january": 86, "sales_february": 70},
    {"product": "Grapes", "sales_january": 99, "sales_february": 80},
    {"product": "Bananas", "sales_january": 85, "sales_february": 120},
    {"product": "Lemons", "sales_january": 65, "sales_february": 150},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
    withTooltip=True,
    withDots=True,
)
```
### Rechart props

To pass props down to the underlying Recharts components, use the following props:
- `radarProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component
- `radarChartProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component
- `polarGridProps` passed props to [PolarGrid](https://recharts.org/en-US/api/PolarGrid) component
- `polarAngleAxisProps` passed props to [PolarAngleAxis](https://recharts.org/en-US/api/PolarAngleAxis) component
- `polarRadiusAxisProps` passed props to [PolarRadiusAxis](https://recharts.org/en-US/api/PolarRadiusAxis) component
- Also available:  `legendProps`, `dotProps`, `activeDotProps`, `tooltipProps`

It's also possible to pass functions to the Recharts component.  This example passes props to `PolarRadiusAxis` component.  


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  


```python
import dash_mantine_components as dmc


data = [
    {"product": "Apples", "sales_january": 12000, "sales_february": 10000},
    {"product": "Oranges", "sales_january": 9800, "sales_february": 9000},
    {"product": "Tomatoes", "sales_january": 8600, "sales_february": 7000},
    {"product": "Grapes", "sales_january": 9900, "sales_february": 8000},
    {"product": "Bananas", "sales_january": 8500, "sales_february": 12000},
    {"product": "Lemons", "sales_january": 6500, "sales_february": 15000},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    polarRadiusAxisProps={"angle": 30, "tickFormatter": {"function": "formatNumberIntl"}},
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatNumberIntl = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
};
```


### Radar animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `radarProps` to pass properties to the Recharts `Radar` component.


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

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-radarchart-animation"),
        dmc.RadarChart(
            id="radarchart-animation",
            h=300,
            data=[{}],
            dataKey="product",
            withPolarRadiusAxis=True,
            radarProps={
                "isAnimationActive": True,
            },
            series=[{"name": "sales", "color": "blue.4", "opacity": 0.2}],
        ),
    ]
)


@callback(
    Output("radarchart-animation", "data"),
    Input("btn-radarchart-animation", "n_clicks"),
)
def update(n):
    return [
        {"product": "Apples", "sales": randint(20, 100)},
        {"product": "Oranges", "sales": randint(20, 100)},
        {"product": "Tomatoes", "sales": randint(20, 100)},
        {"product": "Grapes", "sales": randint(20, 100)},
        {"product": "Bananas", "sales": randint(20, 100)},
        {"product": "Lemons", "sales": randint(20, 100)},
    ]
```
### Legend

Set the `withLegend` prop to display the legend:


```python
import dash_mantine_components as dmc

data = [
    {
        "product": "Apples",
        "Sales January": 120,
        "Sales February": 100,
    },
    {
        "product": "Oranges",
        "Sales January": 98,
        "Sales February": 90,
    },
    {
        "product": "Tomatoes",
        "Sales January": 86,
        "Sales February": 70,
    },
    {
        "product": "Grapes",
        "Sales January": 99,
        "Sales February": 80,
    },
    {
        "product": "Bananas",
        "Sales January": 85,
        "Sales February": 120,
    },
    {
        "product": "Lemons",
        "Sales January": 65,
        "Sales February": 150,
    },
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    withLegend=True,
    series=[
        {
            "name": "Sales January",
            "color": "blue.6",
            "opacity": 0.2,
        },
        {
            "name": "Sales February",
            "color": "orange.6",
            "opacity": 0.2,
        },
    ],
)
```
### 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.


#### RadarChart selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-RadarChart-root | Root element |
| container | .mantine-RadarChart-container | Recharts ResponsiveContainer component |
| tooltip | .mantine-RadarChart-tooltip | Tooltip root element |
| tooltipBody | .mantine-RadarChart-tooltipBody | Tooltip wrapper around all items |
| tooltipItem | .mantine-RadarChart-tooltipItem | Tooltip item representing data series |
| tooltipItemBody | .mantine-RadarChart-tooltipItemBody | Tooltip item wrapper around item color and name |
| tooltipItemColor | .mantine-RadarChart-tooltipItemColor | Tooltip item color |
| tooltipItemName | .mantine-RadarChart-tooltipItemName | Tooltip item name |
| tooltipItemData | .mantine-RadarChart-tooltipItemData | Tooltip item data |
| tooltipLabel | .mantine-RadarChart-tooltipLabel | Label of the tooltip |
| legend | .mantine-RadarChart-legend | Legend root element |
| legendItem | .mantine-RadarChart-legendItem | Legend item representing data series |
| legendItemColor | .mantine-RadarChart-legendItemColor | Legend item color |
| legendItemName | .mantine-RadarChart-legendItemName | Legend item name |


#### RadarChart CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --chart-grid-color | Controls color of the chart grid |
| root | --chart-text-color | Controls color of all text elements in the chart |


### Keyword Arguments
#### RadarChart

- children (a list of or a singular dash component, string or number; optional):
    Additional components that are rendered inside recharts
    `RadarChart` component.

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

- activeDotProps (dict; optional):
    Props passed down to all active dots. Ignored if `withDots=False`
    is set.

- 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.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

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

- data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required):
    Data used in the chart.

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

- dataKey (string; required):
    Key of the `data` object for axis values.

- dotProps (dict; optional):
    Props passed down to all dots. Ignored if `withDots=False` is set.

- gridColor (optional):
    Controls color of the grid lines. By default, color depends on the
    color scheme.

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

- legendProps (dict; optional):
    Props passed down to recharts Legend component.

- 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.

- polarAngleAxisProps (dict; optional):
    Props passed down to recharts PolarAngleAxis component.

- polarGridProps (dict; optional):
    Props passed down to recharts PolarGrid component.

- polarRadiusAxisProps (dict; optional):
    Props passed down to recharts PolarRadiusAxis component.

- radarChartProps (dict; optional):
    Props passed down to recharts RadarChart component.

- radarProps (boolean | number | string | dict | list; optional):
    Props passed down to recharts Radar component in a dict.

- series (list of dicts; required):
    Determines which data should be consumed from the `data` array.

    `series` is a list of dicts with keys:

- 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.

- textColor (optional):
    Controls color of all text elements. By default, color depends on
    the color scheme.

- tooltipAnimationDuration (number; optional):
    Tooltip position animation duration in ms.  Default 0.

- tooltipProps (dict; optional):
    Props passed down to recharts Tooltip component.

- variant (string; optional):
    variant.

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

- withDots (boolean; optional):
    Determines whether dots should be displayed. Default False.

- withLegend (boolean; optional):
    Determines whether chart legend should be displayed, `False` by
    default.

- withPolarAngleAxis (boolean; optional):
    Determines whether PolarAngleAxis component should be displayed,
    `True` by default.

- withPolarGrid (boolean; optional):
    Determines whether PolarGrid component should be displayed, `True`
    by default.

- withPolarRadiusAxis (boolean; optional):
    Determines whether PolarRadiusAxisProps component should be
    displayed, `False` by default.

- withTooltip (boolean; optional):
    Determines whether Tooltip component should be displayed. Default
    False.

## ScatterChart  
Scatter chart component  
Category: Charts  

### Usage

ScaltterChart is based on recharts [ScatterChart](https://recharts.org/en-US/api/ScatterChart) component:

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
)
```
### Data

There are two datasets imported on this page.  A single series `data1` and a multiple series `data2`:

```python

data1 = [
    {
        "color": "blue.5",
        "name": "Group 1",
        "data": [
            {"age": 25, "BMI": 20},
            {"age": 30, "BMI": 22},
            {"age": 35, "BMI": 18},
            {"age": 40, "BMI": 25},
            {"age": 45, "BMI": 30},
            {"age": 28, "BMI": 15},
            {"age": 22, "BMI": 12},
            {"age": 50, "BMI": 28},
            {"age": 32, "BMI": 19},
            {"age": 48, "BMI": 31},
            {"age": 26, "BMI": 24},
            {"age": 38, "BMI": 27},
            {"age": 42, "BMI": 29},
            {"age": 29, "BMI": 16},
            {"age": 34, "BMI": 23},
            {"age": 44, "BMI": 33},
            {"age": 23, "BMI": 14},
            {"age": 37, "BMI": 26},
            {"age": 49, "BMI": 34},
            {"age": 27, "BMI": 17},
            {"age": 41, "BMI": 32},
            {"age": 31, "BMI": 21},
            {"age": 46, "BMI": 35},
            {"age": 24, "BMI": 13},
            {"age": 33, "BMI": 22},
            {"age": 39, "BMI": 28},
            {"age": 47, "BMI": 30},
            {"age": 36, "BMI": 25},
            {"age": 43, "BMI": 29},
            {"age": 21, "BMI": 11}
        ]
    }
]

```

```python

data2 = [
    {
        "color": "blue.5",
        "name": "Group 1",
        "data": [
            {"age": 25, "BMI": 20},
            {"age": 30, "BMI": 22},
            {"age": 35, "BMI": 18},
            {"age": 40, "BMI": 25},
            {"age": 45, "BMI": 30},
            {"age": 28, "BMI": 15},
            {"age": 22, "BMI": 12},
            {"age": 50, "BMI": 28},
            {"age": 32, "BMI": 19},
            {"age": 48, "BMI": 31},
            {"age": 26, "BMI": 24},
            {"age": 38, "BMI": 27},
            {"age": 42, "BMI": 29},
            {"age": 29, "BMI": 16},
            {"age": 34, "BMI": 23},
            {"age": 44, "BMI": 33},
            {"age": 23, "BMI": 14},
            {"age": 37, "BMI": 26},
            {"age": 49, "BMI": 34},
            {"age": 27, "BMI": 17},
            {"age": 41, "BMI": 32},
            {"age": 31, "BMI": 21},
            {"age": 46, "BMI": 35},
            {"age": 24, "BMI": 13},
            {"age": 33, "BMI": 22},
            {"age": 39, "BMI": 28},
            {"age": 47, "BMI": 30},
            {"age": 36, "BMI": 25},
            {"age": 43, "BMI": 29},
            {"age": 21, "BMI": 11}
        ]
    },
    {
        "color": "red.5",
        "name": "Group 2",
        "data": [
            {"age": 26, "BMI": 21},
            {"age": 31, "BMI": 24},
            {"age": 37, "BMI": 19},
            {"age": 42, "BMI": 27},
            {"age": 29, "BMI": 32},
            {"age": 35, "BMI": 18},
            {"age": 40, "BMI": 23},
            {"age": 45, "BMI": 30},
            {"age": 27, "BMI": 15},
            {"age": 33, "BMI": 20},
            {"age": 38, "BMI": 25},
            {"age": 43, "BMI": 29},
            {"age": 30, "BMI": 16},
            {"age": 36, "BMI": 22},
            {"age": 41, "BMI": 28},
            {"age": 46, "BMI": 33},
            {"age": 28, "BMI": 17},
            {"age": 34, "BMI": 22},
            {"age": 39, "BMI": 26},
            {"age": 44, "BMI": 31},
            {"age": 32, "BMI": 18},
            {"age": 38, "BMI": 23},
            {"age": 43, "BMI": 28},
            {"age": 48, "BMI": 35},
            {"age": 25, "BMI": 14},
            {"age": 31, "BMI": 20},
            {"age": 36, "BMI": 25},
            {"age": 41, "BMI": 30},
            {"age": 29, "BMI": 16}
        ]
    }
]

```

### Multiple Series


```python
import dash_mantine_components as dmc
from .data import data2

component = dmc.ScatterChart(
    h=300,
    data=data2,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
)
```
### Legend
To display chart legend, set `withLegend` prop. When one of the items in the legend is hovered, the corresponding data
series is highlighted in the chart.

```python
import dash_mantine_components as dmc
from .data import data2

component = dmc.ScatterChart(
    h=300,
    data=data2,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    withLegend=True,
)
```
### Legend position
You can pass props down to recharts Legend component with `legendProps` prop. For example, setting the following will
render the legend at the bottom of the chart and set its height to 50px:
```python
legendProps={'verticalAlign': 'bottom', 'height': 50} 
```

```python
import dash_mantine_components as dmc
from .data import data2

component = dmc.ScatterChart(
    h=300,
    data=data2,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    withLegend=True,
    legendProps={"verticalAlign": "bottom", "height": 20},
)
```
### X and Y axis props
Use `xAxisProps` and `yAxisProps` to pass props down to recharts `XAxis` and `YAxis` components. For example, these props can
be used to change orientation of axis:

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    tickLine="xy",
    yAxisProps={"tickMargin": 15, "orientation": "right"},
    xAxisProps={"tickMargin": 15, "orientation": "top"},
)
```
### Right Y axis
To display an additional Y axis on the right side of the chart, set the `withRightYAxis` prop. You can pass props down
to the recharts `YAxis` component with the `rightYAxisProps` prop and assign a label to the right Y axis with the
`rightYAxisLabel` prop. Note that you need to bind data series to the right Y axis by setting `yAxisId: 'right'` in the
data object. Series that do not have `yAxisId` are bound to the left Y axis. Both axes use the same `dataKey.y` value,
but their scales are calculated independently from the series assigned to them.


```python
import dash_mantine_components as dmc
from .data import data3

component = dmc.ScatterChart(
    h=350,
    data=data3,
    dataKey={"x": "month", "y": "value"},
    withLegend=True,
    withRightYAxis=True,
    xAxisLabel="Month",
    yAxisLabel="Revenue",
    rightYAxisLabel="Conversion rate",
    rightYAxisProps={"unit": "%"},
)
```
### Point labels
Set `pointLabels` prop to `x` or `y` to display labels on data points for the corresponding axis:


```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    tickLine="xy",
    xAxisLabel="Age",
    yAxisLabel="BMI",
    pointLabels="x",
)
```
### Stroke dash array
Set `strokeDasharray` prop to control the stroke dash array of the grid and cursor lines. The value represent the
lengths of alternating dashes and gaps. For example, strokeDasharray="10 5" will render a dashed line with 10px dashes
and 5px gaps.

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    strokeDasharray="15, 15",
)
```
### Grid and text colors
Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. 
With CSS , you can change colors depending on color scheme.  Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)



```python
import dash_mantine_components as dmc

from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    tickLine="xy",
    xAxisLabel="Age",
    yAxisLabel="BMI",
    className="chart-grid-text-colors",
)
```

```css

.chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-5);
  --chart-text-color: var(--mantine-color-blue-8);
}

[data-mantine-color-scheme='dark'] .chart-grid-text-colors {
  --chart-grid-color: var(--mantine-color-blue-3);
  --chart-text-color: var(--mantine-color-blue-2);
}
```

If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables:

```python

dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    tickLine="xy",
    xAxisLabel="Age",
    yAxisLabel="BMI",
    gridColor="gray.5",
    textColor = "gray.9",
)

```

### Units
Set `unit` prop to render a unit label next to the y-axis ticks and tooltip values:

```python
import dash_mantine_components as dmc

spending_data = [
    {
        "color": "cyan",
        "name": "Average monthly spending",
        "data": [
            {"age": a, "average_monthly_spending": b}
            for a, b in zip(
                [
                    25,
                    30,
                    35,
                    40,
                    45,
                    28,
                    22,
                    50,
                    32,
                    48,
                    26,
                    38,
                    42,
                    29,
                    34,
                    44,
                    23,
                    37,
                    49,
                    27,
                    41,
                    31,
                    46,
                    24,
                    33,
                    39,
                    47,
                    36,
                    43,
                    21,
                ],
                [
                    1400,
                    2100,
                    1800,
                    2400,
                    2300,
                    1600,
                    1200,
                    3200,
                    1900,
                    2700,
                    1700,
                    2200,
                    2600,
                    1500,
                    2000,
                    2500,
                    1300,
                    2100,
                    2900,
                    1600,
                    2500,
                    1800,
                    2700,
                    1400,
                    2100,
                    2400,
                    2800,
                    2200,
                    2600,
                    1100,
                ],
            )
        ],
    }
]

component = dmc.ScatterChart(
    h=300,
    data=spending_data,
    dataKey={"x": "age", "y": "average_monthly_spending"},
    yAxisProps={"domain": [800, 3500]},
    unit={"y": "$"},
    labels={"x": "Age", "y": "Spending"},
)
```
### Value formatter

To format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number value
as an argument and returns formatted value.  Use two functions to format x and y values separately:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

spending_data = [
    {
        "color": "cyan",
        "name": "Average monthly spending",
        "data": [
            {"age": a, "average_monthly_spending": b}
            for a, b in zip(
                [
                    25,
                    30,
                    35,
                    40,
                    45,
                    28,
                    22,
                    50,
                    32,
                    48,
                    26,
                    38,
                    42,
                    29,
                    34,
                    44,
                    23,
                    37,
                    49,
                    27,
                    41,
                    31,
                    46,
                    24,
                    33,
                    39,
                    47,
                    36,
                    43,
                    21,
                ],
                [
                    1400,
                    2100,
                    1800,
                    2400,
                    2300,
                    1600,
                    1200,
                    3200,
                    1900,
                    2700,
                    1700,
                    2200,
                    2600,
                    1500,
                    2000,
                    2500,
                    1300,
                    2100,
                    2900,
                    1600,
                    2500,
                    1800,
                    2700,
                    1400,
                    2100,
                    2400,
                    2800,
                    2200,
                    2600,
                    1100,
                ],
            )
        ],
    }
]

component = dmc.ScatterChart(
    h=300,
    data=spending_data,
    dataKey={"x": "age", "y": "average_monthly_spending"},
    yAxisProps={"domain": [800, 3500]},
    valueFormatter={
        "x": {"function": "formatYears"},
        "y": {"function": "formatCurrency"}
    }
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};


dmcfuncs.formatCurrency = (value) => {
  return `$${new Intl.NumberFormat('en-US').format(value)}`;
};


dmcfuncs.formatYears = (value) => {
  return `${value} years`
};
```


### Tooltip labels
To customize labels displayed in the tooltip, use `labels` prop:

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=350,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    labels={"x": "Age", "y": "Body Mass Index"},
)
```
### Custom tooltip
Use the `tooltipProps` `content` prop to  to pass custom tooltip renderer to recharts Tooltip component.  For example:
```python
 tooltipProps={'content': {'functon': 'myFunction'}}
```


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=350,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    tooltipProps={"content":  {"function": "chartTooltip"}}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.chartTooltip = ({ label, payload }) => {

  if (!payload || payload.length === 0) return null;

  return React.createElement(
    dmc.Paper,
    {
      px: "md",
      py: "sm",
      withBorder: true,
      shadow: "md",
      radius: "md",
    },
    [
      React.createElement(
        dmc.Text,
        {
          key: "tooltip-label",
          fw: 500,
          mb: 5,
        },
        label
      ),
      ...payload.map((item, index) =>
        React.createElement(
          dmc.Text,
          {
            key: `item-${index}`,
            c: item.color,
            fz: "sm",
          },
          `${item.name}: ${item.value}`
        )
      ),
    ]
  );
};
```

### Remove tooltip
To remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart.


```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    withTooltip=False,
)
```
### Tooltip animation
By default, tooltip animation is disabled. To enable it, set `tooltipAnimationDuration` prop to a number of
milliseconds to animate the tooltip position change.

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    tooltipAnimationDuration=200,
)
```
### Points animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `scatterProps` to pass properties to the Recharts `Scatter` component.

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

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-scatterchart-animation"),
        dmc.ScatterChart(
            h=300,
            data=[{"color": "blue.5", "name": "Group 1", "data": [{}]}],
            scatterProps={
                "isAnimationActive": True,
                "animationDuration": 500,
                "animationEasing": "ease-in-out",
                "animationBegin": 500,
            },
            dataKey={"x": "x", "y": "y"},
            xAxisLabel="X data",
            yAxisLabel="Y data",
            id="scatterchart-animation",
        ),
    ]
)


@callback(
    Output("scatterchart-animation", "data"),
    Input("btn-scatterchart-animation", "n_clicks"),
)
def update(n):
    return [
        {
            "color": "blue.5",
            "name": "Group 1",
            "data": [
                {"x": randint(1000, 4000), "y": randint(1000, 4000)} for _ in range(20)
            ],
        }
    ]
```
### Reference lines
Use `referenceLines` prop to render reference lines. Reference lines are always rendered behind the chart.

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=300,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    referenceLines=[
        {"y": 14, "label": "Underweight ↓", "color": "red.7"},
        {"y": 19, "label": "Normal weight", "color": "teal.7"},
        {"y": 30, "label": "Overweight ↑", "color": "red.7"},
    ],
)
```
### Reference areas
Use the `referenceAreas` prop to highlight a rectangular region of the chart. Each area is bounded by x1/x2 (horizontal)
and y1/y2 (vertical) data values – omit one pair to span the full opposite axis, for example provide only x1/x2 to
highlight a time range across the entire height of the chart. Set `color` to any theme color or CSS color and label
to display text inside the area. Reference areas are rendered behind the chart series.

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=350,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    referenceAreas=[
        {"y1": 18.5, "y2": 25, "color": "teal.7", "label": "Normal weight"},
    ],
)
```
### Reference dots
Use the `referenceDots` prop to mark individual points on the chart – a peak, an event, a record value or an anomaly. 
Each dot is positioned by x and y data coordinates and supports `r` (radius), `color` (any theme color or CSS color) and
`label`. Reference dots are rendered on top of the chart series.

```python
import dash_mantine_components as dmc
from .data import data1

component = dmc.ScatterChart(
    h=350,
    data=data1,
    dataKey={"x": "age", "y": "BMI"},
    xAxisLabel="Age",
    yAxisLabel="BMI",
    referenceDots=[{"x": 46, "y": 35, "color": 'red.6', "label": 'Max BMI'}]
)
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the
clicked series, use the `clickSeriesName` property.
```python
from dash import callback, Input, Output
import dash_mantine_components as dmc
from .data import data2

component = dmc.Group(
    [
        dmc.ScatterChart(
            id="figure-scatterchart",
            h=300,
            data=data2,
            dataKey={"x": "age", "y": "BMI"},
            xAxisLabel="Age",
            yAxisLabel="BMI",
        ),
        dmc.Text(id="clickdata-scatterchart1"),
        dmc.Text(id="clickdata-scatterchart2"),
    ]
)

@callback(
    Output("clickdata-scatterchart1", "children"),
    Output("clickdata-scatterchart2", "children"),
    Input("figure-scatterchart", "clickData"),
    Input("figure-scatterchart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the 
hovered series, use the `hoverSeriesName` property.

```python
from dash import callback, Input, Output
import dash_mantine_components as dmc
from .data import data2

component = dmc.Group(
    [
        dmc.ScatterChart(
            id="figure-scatterchart-hover",
            h=300,
            data=data2,
            dataKey={"x": "age", "y": "BMI"},
            xAxisLabel="Age",
            yAxisLabel="BMI",
            withTooltip=False,
        ),
        dmc.Text(id="hoverdata-scatterchart1"),
        dmc.Text(id="hoverdata-scatterchart2"),
    ]
)

@callback(
    Output("hoverdata-scatterchart1", "children"),
    Output("hoverdata-scatterchart2", "children"),
    Input("figure-scatterchart-hover", "hoverData"),
    Input("figure-scatterchart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### 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.


#### ScatterChart selectors

| Selector          | Static selector                  | Description                                     |
|-------------------|---------------------------------|-------------------------------------------------|
| root              | .mantine-ScatterChart-root      | Root element                                    |
| scatter           | .mantine-ScatterChart-scatter   | Recharts Scatter component                      |
| axis              | .mantine-ScatterChart-axis      | X and Y axis of the chart                       |
| container         | .mantine-ScatterChart-container | Recharts ResponsiveContainer component          |
| grid              | .mantine-ScatterChart-grid      | Recharts CartesianGrid component                |
| legend            | .mantine-ScatterChart-legend    | Legend root element                             |
| legendItem        | .mantine-ScatterChart-legendItem | Legend item representing data series          |
| legendItemColor   | .mantine-ScatterChart-legendItemColor | Legend item color                        |
| legendItemName    | .mantine-ScatterChart-legendItemName | Legend item name                          |
| tooltip           | .mantine-ScatterChart-tooltip   | Tooltip root element                            |
| tooltipBody       | .mantine-ScatterChart-tooltipBody | Tooltip wrapper around all items              |
| tooltipItem       | .mantine-ScatterChart-tooltipItem | Tooltip item representing data series        |
| tooltipItemBody   | .mantine-ScatterChart-tooltipItemBody | Tooltip item wrapper around item color and name |
| tooltipItemColor  | .mantine-ScatterChart-tooltipItemColor | Tooltip item color                         |
| tooltipItemName   | .mantine-ScatterChart-tooltipItemName | Tooltip item name                           |
| tooltipItemData   | .mantine-ScatterChart-tooltipItemData | Tooltip item data                           |
| tooltipLabel      | .mantine-ScatterChart-tooltipLabel | Label of the tooltip                           |
| referenceLine     | .mantine-ScatterChart-referenceLine | Reference line                                 |
| axisLabel         | .mantine-ScatterChart-axisLabel | X and Y axis labels                            |


#### ScatterChart CSS variables
| Selector       | Variable           | Description                              |
|----------------|--------------------|------------------------------------------|
| root           | --chart-grid-color | Controls color of the grid and cursor lines |
|                | --chart-text-color | Controls color of the axis labels         |



### Keyword Arguments
#### ScatterChart

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

- accessibilityLayer (boolean; optional):
    Determines whether the chart should be keyboard-navigable with the
    recharts accessibility layer, `True` by default.

- 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.

- brushDragEnd (dict with strings as keys and values of type number; optional):
    The startIndex and endIndex  of the selected brush range when
    dragging ends. Read only.

- 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.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

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

- data (list of dicts; required):
    Data that is used to build the chart.

    `data` is a list of dicts with keys:

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

- dataKey (dict; required):
    Keys that should be used to retrieve data from the data array on x
    and y axis.

    `dataKey` is a dict with keys:

- gridAxis (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which lines should be displayed in the grid, `'x'` by
    default.

- gridColor (optional):
    Color of the grid and cursor lines, by default depends on color
    scheme.

- gridProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `CartesianGrid` component.

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

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- labels (dict; optional):
    Labels that should be used instead of keys names in the tooltip.

    `labels` is a dict with keys:

- legendProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Legend` component.

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Chart orientation, `'horizontal'` by default.

- pointLabels (a value equal to: 'x', 'y'; optional):
    If set, displays labels next to points for the given axis.

- referenceAreas (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference areas that should be displayed on the chart.

- referenceDots (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference dots that should be displayed on the chart.

- referenceLines (list of dicts with strings as keys and values of type boolean | number | string | dict | list; optional):
    Reference lines that should be displayed on the chart.

- rightYAxisLabel (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- rightYAxisProps (boolean | number | string | dict | list; optional):
    Props passed down to the YAxis recharts component rendered on the
    right side.

- scatterChartProps (dict; optional):
    Props passed down to recharts `ScatterChart` component.

- scatterProps (dict; optional):
    Props passed down to recharts `Scatter` component.

- strokeDasharray (string | number; optional):
    Dash array for the grid lines and cursor, `'5 5'` 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.

- textColor (optional):
    Color of the text displayed inside the chart, `'dimmed'` by
    default.

- tickLine (a value equal to: 'none', 'x', 'y', 'xy'; optional):
    Specifies which axis should have tick line, `'y'` by default.

- tooltipAnimationDuration (number; optional):
    Tooltip position animation duration in ms, `0` by default.

- tooltipProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Tooltip` component.

- unit (dict; optional):
    Units displayed after value on axis and inside the tooltip.

    `unit` is a dict with keys:

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format values on Y axis and inside the tooltip. See
    https://www.dash-mantine-components.com/functions-as-props.

- variant (string; optional):
    variant.

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

- withLegend (boolean; optional):
    Determines whether chart legend should be displayed, `False` by
    default.

- withRightYAxis (boolean; optional):
    Determines whether additional y-axis should be displayed on the
    right side of the chart, False by default.

- withTooltip (boolean; optional):
    Determines whether chart tooltip should be displayed, `True` by
    default.

- withXAxis (boolean; optional):
    Determines whether x-axis should be hidden, `True` by default.

- withYAxis (boolean; optional):
    Determines whether y-axis should be hidden, `True` by default.

- xAxisLabel (string; optional):
    A label to display below the x-axis.

- xAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `XAxis` recharts component.

- yAxisLabel (string; optional):
    A label to display next to the y-axis.

- yAxisProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `YAxis` recharts component.

## Sparkline  
Simplified area chart to show trends  
Category: Charts  

### Introduction

Sparkline is a simplified version of AreaChart. It can be used to display a single series of data in a small space.

### Trend Colors

Use `trendColors` prop instead of `color` to change chart color depending on the trend. The prop accepts an object with `positive`, `negative` and `neutral` properties:

- `positive` - color for positive trend (first value is less than the last value in data array)
- `negative` - color for negative trend (first value is greater than the last value in data array)
- `neutral` - color for neutral trend (first and last values are equal)

`neutral` is optional, if not provided, the color will be the same as `positive`.


```python
import dash_mantine_components as dmc
from dash import html

positive_trend = [10, 20, 40, 20, 40, 10, 50]
negative_trend = [50, 40, 20, 40, 20, 40, 10]
neutral_trend = [10, 20, 40, 20, 40, 10, 50, 5, 10]


def make_sparkline(trend):
    return dmc.Sparkline(
        w=200,
        h=60,
        data=trend,
        trendColors={"positive": "teal.6", "negative": "red.6", "neutral": "gray.5"},
        fillOpacity=0.2,
    )


component = dmc.Stack(
    [
        dmc.Text("Positive Trend"),
        make_sparkline(positive_trend),
        dmc.Text("Negative Trend", mt="md"),
        make_sparkline(negative_trend),
        dmc.Text("Neutral Trend", mt="md"),
        make_sparkline(neutral_trend),
    ],
    gap="md",
)
```
### Change area color depending on color scheme
You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode)

Example of area color that is dark orange in light mode and lime in dark mode:


```python
import dash_mantine_components as dmc

component = dmc.Sparkline(w=200, h=60, data=[10, 20, 40, 20, 40, 10, 50], className="chart-color")
```

```css
:root {
   --chart-color: var(--mantine-color-orange-8)
}

:root[data-mantine-color-scheme="dark"] {
  --chart-color: var(--mantine-color-lime-4);
}
```


### Sparkline animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `areaProps` to pass properties to the Recharts `Area` component.


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

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-spark-animation", n_clicks=0),
        dmc.Sparkline(
            w=200,
            h=60,
            data=[],
            areaProps={"isAnimationActive": True},
            color="blue",
            id="spark-animation",
        ),
    ]
)


@callback(Output("spark-animation", "data"), Input("btn-spark-animation", "n_clicks"))
def update(n):
    if n % 2 == 0:
        return [10, 20, 40, 20, 40, 10, 50]
    return [50, 10, 30, 10, 40, 50, 10]
```
### 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.


#### Sparkline selectors

| Selector    | Static selector         | Description                             |
|:------------|:------------------------|:----------------------------------------|
| root        | .mantine-Sparkline-root | Root element                            |


#### Sparkline CSS variables

| Selector         | Variable             | Description                        |
|:-----------------|:---------------------|:-----------------------------------|
| root             | --chart-color        | Controls stroke and fill colors    |


### Keyword Arguments
#### Sparkline

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

- areaProps (dict; optional):
    Props passed down to recharts `Area` component.

- 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.

- 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, `theme.primaryColor`
    by default.

- connectNulls (boolean; optional):
    Determines whether points with `None` values should be connected,
    `True` by default.

- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):
    Type of the curve, `'linear'` by default.

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

- data (list of numbers; required):
    Data used to render the chart.

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

- fillOpacity (number; optional):
    Controls fill opacity of the area, `0.6` 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.

- strokeWidth (number; optional):
    Area stroke width, `2` 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.

- trendColors (dict; optional):
    If set, `color` prop is ignored and chart color is determined by
    the difference between first and last value.

    `trendColors` is a dict with keys:

- variant (string; optional):
    variant.

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

- withGradient (boolean; optional):
    Determines whether the chart fill should be a gradient, `True` by
    default.

## Autocomplete  
Autocomplete user input with any list of options.  
Category: Combobox  

> Need users to select multiple items? See `MultiSelect` or `TagsInput`.


Use `Autocomplete` component in the following cases:

- You want to allow user to enter any value
- You want to display suggestions to the user based on the input value
- You want to preserve user input on blur if option was not selected from the dropdown
- `value` and `label` of the option are the same.


### Not a searchable select

`Autocomplete` is not a searchable select, it is a text input with suggestions. Values are not enforced to be one of
the suggestions, user can type anything. If you need a searchable select, use `Select` component instead.
 To learn more about the differences between Autocomplete and Select, check [help center article](https://help.mantine.dev/q/select-autocomplete-difference).


### Made with Combobox

`Autocomplete` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend
its functionality, you can create your own custom `Autocomplete` component.  See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.

### Simple Example

`Autocomplete` provides user a list of suggestions based on the input, however user is not limited to suggestions and can type anything.


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

component = html.Div(
    [
        dmc.Autocomplete(
            label="Your favorite library",
            placeholder="Pick value or enter anything",
            id="framework-autocomplete",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            mb=10,
        ),
        dmc.Text(id="autocomplete-value"),
    ]
)


@callback(Output("autocomplete-value", "children"), Input("framework-autocomplete", "value"))
def select_value(value):
    return f" You selected {value}"
```
### Select first option on change

Set the `selectFirstOptionOnChange` prop to automatically select the first option in the dropdown when the input value
changes. This feature allows users to type a value and immediately press Enter to select the first matching option,
without needing to press the arrow down key first.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Select your favorite library",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    placeholder="Pick value or enter anything",
    selectFirstOptionOnChange=True,
)
```
### autoSelectOnBlur

Set `autoSelectOnBlur=True` to automatically select the highlighted option when the input loses focus. To see this
feature in action: select an option with up/down arrows, then click outside the input:


```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    autoSelectOnBlur=True,
    clearable=True,
)
```
### Data Format

`Autoselect` `data` prop accepts data in one of the following formats:

```python
data = ["Pandas", "NumPy", "TensorFlow", "PyTorch"]

# or

data = [
    {"group": "US", "items": ["New York", "Seattle"]},
    {"group": "Canada", "items": ["Montreal", "Vancouver"]}
]
```

### Options filtering

By default, `Autocomplete` filters options by checking if the option label contains input value. You can change this behavior 
with `filter`. The filter function receives an object with the following properties as a single argument:
 - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format
 - `search` – current search query
 - `limit` – value of limit prop passed to `Autocomplete`



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


Example of a custom filter function that matches options by words instead of letters sequence:

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your country",
    placeholder="Pick value or enter anything",
    data=[
        "Great Britain",
        "Canada",
        "United States",
    ],
    filter={"function": "filterCountries"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterCountries = function ({ options, search }) {
  const queryWords = search.toLowerCase().trim().split(" ");
  return options.filter((option) => {
    const words = option.label.toLowerCase().trim().split(" ");
    return queryWords.every((word) =>
      words.some((labelWord) => labelWord.includes(word))
    );
  });
};
```


### Sort options

By default, options are sorted by their position in the data array. You can change this behavior with `filter` function:


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite Python library",
    placeholder="Pick value or enter anything",
    data=[
        "4 – NumPy",
        "1 – Pandas",
        "3 – Scikit-learn",
        "2 – Plotly",
    ],
    filter={"function": "filterPythonLibs"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterPythonLibs = function ({ options, search }) {
  const query = search.toLowerCase().trim();
  const result = options.filter((option) =>
    option.label.toLowerCase().trim().includes(query)
  );
  result.sort((a, b) => a.label.localeCompare(b.label));
  return result;
};
```


### Large Data Sets

The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can
do it with limit prop. 

Note that if you use a custom `filter` function, you need to implement your own logic to limit the number of options in filter

Example of `Autocomplete` with 100 000 options, 10 options are rendered at the same time:

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="100,000 options",
    data=[f"Option {i}" for i in range(100000)],
    placeholder="use limit to optimize performance",
    limit=10,
)
```
### renderOption

`renderOption` function allows you to customize option rendering.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.



```python

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Autocomplete(
    label="Select with renderOption",
    placeholder="Select text align",
    data=[
      { "value": 'left', "label": 'left' },
      { "value": 'center', "label": 'center' },
      { "value": 'right', "label": 'right' },
      { "value": 'justify', "label": 'justify' },
    ],
    renderOption={"function": "renderOptionSelect"},
    clearable=True
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var iconify = window.dash_iconify;


dmcfuncs.renderOptionSelect = function ({ option, checked }) {

  const icons = {
   left: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-left", width: 24 }),
   center: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-center", width: 24 }),
   right: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-right", width: 24 }),
   justify: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-justify", width: 24 }),
  };

  const checkedIcon = React.createElement(iconify.DashIconify, {
    icon: "mdi:check",
    width: 24,
  });

  return React.createElement(
    dmc.Group,
    { flex: "1", gap: "xs" },
    icons[option.value],
    option.label,
    checked ? checkedIcon : null
  );
};
```


### Nothing found message

`Autocomplete` component does not support nothing found message. It is designed to accept any string as a value, so it
does not make sense to show nothing found message. If you want to limit user input to suggestions, you can use
searchable `Select` component instead. To learn more about the differences between `Autocomplete` and `Select`, check this [help center article](https://help.mantine.dev/q/select-autocomplete-difference).


### Scrollable dropdown

By default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with 
`maxDropdownHeight` prop if you do not change the default settings.

If you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change 
dropdown styles with `Styles API`.


```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.Autocomplete(
            label="Scrollable dropdown",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value or enter anything",
            maxDropdownHeight=300,
        ),
        dmc.Autocomplete(
            label="With native scroll",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value or enter anything",
            withScrollArea=False,
            styles={"dropdown": {"maxHeight": 200, "overflowY": "auto"}},
            mt="md",
        ),
    ]
)
```
### Fit dropdown to viewport height
Set `floatingHeight="viewport"` to make the dropdown grow to fill the available vertical space in the viewport. The
flip middleware is disabled in this mode – the dropdown always opens in the configured direction and is constrained
to the viewport edges instead of flipping to the other side. Useful when working with large option lists:

```python
import dash_mantine_components as dmc

data = [f"Option {i}" for i in range(100)]

component = dmc.Autocomplete(
    label="Fits viewport height",
    placeholder="Pick value",
    data=data,
    floatingHeight="viewport",
)
```
### Group options

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    data=[
        {
            "group": "Data Analysis",
            "items": ["Pandas", "NumPy"],
        },
        {
            "group": "Deep Learning",
            "items": ["TensorFlow", "PyTorch"],
        },
    ],
)
```
### Disabled options

When option is disabled, it cannot be selected and is ignored in keyboard navigation.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library:",
    data=[
        {"value":"Pandas"},
        {"value": "NumPy"},
        {"value":"TensorFlow",  "disabled": True},
        {"value":"PyTorch", "disabled": True}
    ],
)
```
### Combobox props
You can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are
not exposed by `Autocomplete`, for example `withinPortal`:

```python
dmc.Autocomplete(comboboxProps={"withinPortal": False})
```


### Change dropdown z-index

```python
dmc.Autocomplete(comboboxProps={"zIndex": 1000})
```

### Inside Popover

To use `Autocomplete` inside popover, you need to set `withinPortal=False`:

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    position="bottom",
    withArrow=True,
    shadow="md",
    children=[
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(
            dmc.Autocomplete(
                label="Your favorite library",
                placeholder="Pick value or enter anything",
                data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
                comboboxProps={"withinPortal": False},
            )
        ),
    ],
)
```
### Clearable

Set `clearable` prop to display the clear button in the right section. The button is not displayed when:

- The component does not have a value
- The component is disabled
- The component is read only

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    value="Pandas",
    clearable=True,
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

data = ["Mercury", "Venus", "Earth", "Mars"]

component = dmc.Stack([
    dmc.Autocomplete(
        label="clearSectionMode='both' (default)",
        placeholder="Pick a planet",
        data=data,
        value="Earth",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.Autocomplete(
        label="clearSectionMode='rightSection'",
        placeholder="Pick a planet",
        data=data,
        value="Earth",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.Autocomplete(
        label="clearSectionMode='clear'",
        placeholder="Pick a planet",
        data=data,
        value="Earth",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Dropdown open in a callback

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

component = html.Div(
    [
        dmc.Button("Toggle dropdown", id="btn-autocomplete-opened", n_clicks=0),
        dmc.Autocomplete(
            label="Select your favorite library",
            placeholder="Select value",
            id="autocomplete-opened",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            comboboxProps={"position": "bottom", "middlewares": {"flip": False, "shift": False}},
            mb=10,
        ),
    ]
)


@callback(
    Output("autocomplete-opened", "dropdownOpened"), Input("btn-autocomplete-opened", "n_clicks")
)
def select_value(n):
    if n % 2 == 0:
        return False
    return True
```
### Dropdown position

By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the
input. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the
underlying `Popover` component.

Example of dropdown that is always displayed above the input:

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}},
)
```
### Dropdown width

To change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "bottom-start", "width": 200},
)
```
### Dropdown offset

To change dropdown offset, set `offset` prop in `comboboxProps`:  

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={
        "position": "bottom",
        "middlewares": {"flip": False, "shift": False},
        "offset": 0,
    },
)
```
### Dropdown animation
By default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed
down to the underlying `Transition` component.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}},
)
```
### Dropdown padding

```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.Autocomplete(
            label="Zero padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anything",
            comboboxProps={"dropdownPadding": 0},
        ),
        dmc.Autocomplete(
            label="10px padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anything",
            comboboxProps={"dropdownPadding": 10},
            mt="md",
        ),
    ]
)
```
### Dropdown shadow

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"shadow": "md"},
)
```
### Left and right sections

`Autocomplete` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position
inside the input wrapper. You can use them to display icons, input controls or any other elements.

You can use the following props to control sections styles and content:

- `rightSection`/`leftSection` – component to render on the corresponding side of input
- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.
- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Paper(
    [
        dmc.Autocomplete(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anythings",
            leftSectionPointerEvents="none",
            leftSection=DashIconify(icon="bi-book"),
        ),
        dmc.Autocomplete(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anything",
            rightSectionPointerEvents="none",
            rightSection=DashIconify(icon="bi-book"),
            mt="md",
        ),
    ]
)
```
### Input Props
`Autocomplete` component supports `Input` and Input Wrapper components features and all input element props.
`Autocomplete` documentation does not include all features supported by the component – see Input documentation to learn about all available features.


### Read only
Set `readOnly` to make the input read only. When readOnly is set, `Autocomplete` will not show suggestions and will not
call onChange function.


```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    readOnly=True,
)
```
###  Error State


Note: Dash adds some css by default which can lead you to see a red box when setting the `required` or `error` 
prop to True. Use the below css snippet to counteract it.

```css
input:invalid {
    outline: none !important;
}
```

You can let the user know if the selected value is invalid. In the example below, you will get an error message if you
select less than 2 currency pairs.

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

component = dmc.Autocomplete(
    data=["USDINR", "EURUSD", "USDTWD", "USDJPY"],
    id="autocomplete-error",
    value="USDJPY",
)


@callback(Output("autocomplete-error", "error"), Input("autocomplete-error", "value"))
def select_value(value):
    return "JPY is not allowed!" if value == "USDJPY" else ""
```
### Success State

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    success="Looks good"
)
```
### 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.


### Autocomplete Selectors

| Selector     | Static selector                        | Description                                              |
|--------------|----------------------------------------|----------------------------------------------------------|
| `wrapper`    | `.mantine-Autocomplete-wrapper`        | Root element of the Input                                |
| `input`      | `.mantine-Autocomplete-input`          | Input element                                            |
| `section`    | `.mantine-Autocomplete-section`        | Left and right sections                                  |
| `root`       | `.mantine-Autocomplete-root`           | Root element                                             |
| `label`      | `.mantine-Autocomplete-label`          | Label element                                            |
| `required`   | `.mantine-Autocomplete-required`       | Required asterisk element, rendered inside label         |
| `description`| `.mantine-Autocomplete-description`    | Description element                                      |
| `error`      | `.mantine-Autocomplete-error`          | Error element                                            |
| `dropdown`   | `.mantine-Autocomplete-dropdown`       | Dropdown root element                                    |
| `options`    | `.mantine-Autocomplete-options`        | Options wrapper                                          |
| `option`     | `.mantine-Autocomplete-option`         | Option                                                   |
| `group`      | `.mantine-Autocomplete-group`          | Options group wrapper                                    |
| `groupLabel` | `.mantine-Autocomplete-groupLabel`     | Options group label                                      |


### Keyword Arguments
#### Autocomplete

- 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.

- autoSelectOnBlur (boolean; optional):
    If set, the highlighted option is selected when the input loses
    focus @,default,`False`.

- 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.

- clearButtonProps (dict; optional):
    Props passed down to the clear button.

    `clearButtonProps` is a dict with keys:

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether the clear button should be displayed in the
    right section when the component has value, `False` by default.

- comboboxProps (dict; optional):
    Props passed down to `Combobox` component.

    `comboboxProps` is a dict with keys:

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

- data (list of strings; optional):
    Data displayed in the dropdown.

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- dropdownOpened (boolean; optional):
    Controlled dropdown opened state.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- filter (boolean | number | string | dict | list; optional):
    A Function based on which items are filtered and sorted. See
    https://www.dash-mantine-components.com/functions-as-props.

- floatingHeight (string; optional):
    If set to `'viewport'`, the dropdown grows to fill the available
    vertical space in the viewport. Disables the `flip` middleware.

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

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- limit (number; optional):
    Maximum number of options displayed at a time, `Infinity` by
    default.

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDropdownHeight (string | number; optional):
    `max-height` of the dropdown, only applicable when
    `withScrollArea` prop is `True`, `250` by default.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- openOnFocus (boolean; optional):
    If set, the dropdown opens when the input receives focus default
    `True`.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- renderOption (boolean | number | string | dict | list; optional):
    A function to render content of the option, replaces the default
    content of the option.  See
    https://www.dash-mantine-components.com/functions-as-props.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- scrollAreaProps (dict; optional):
    Props passed down to the underlying `ScrollArea` component in the
    dropdown.

    `scrollAreaProps` is a dict with keys:

- selectFirstOptionOnChange (boolean; optional):
    Determines whether the first option should be selected when value
    changes, `False` by default.

- selectFirstOptionOnDropdownOpen (boolean; optional):
    If set, the first option is selected when dropdown opens, `False`
    by default.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (string; default ''):
    Controlled component value.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withScrollArea (boolean; optional):
    Determines whether the options should be wrapped with
    `ScrollArea.AutoSize`, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:

## MultiSelect  
MultiSelect enables users to select multiple options in a dropdown.  
Category: Combobox  

### Made with Combobox

`MultiSelect` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend
its functionality, you can create your own custom `MultiSelect` component. See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.


### Simple Example

MultiSelect component allows user to pick any number of option from the given data.
If you would like users to be able to enter custom values, see `TagsInput`.

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

component = html.Div(
    [
        dmc.MultiSelect(
            label="Select your favorite libraries",
            placeholder="Select all you like!",
            id="framework-multi-select",
            value=["pd", "torch"],
            data=[
                {"value": "pd", "label": "Pandas"},
                {"value": "np", "label": "NumPy"},
                {"value": "tf", "label": "TensorFlow"},
                {"value": "torch", "label": "PyTorch"},
            ],
            w=400,
            mb=10,
        ),
        dmc.Text(id="multi-selected-value"),
    ]
)


@callback(
    Output("multi-selected-value", "children"), Input("framework-multi-select", "value")
)
def select_value(value):
    return ", ".join(value)
```
### Data Format

The data can be provided as either:
* a list of primitive values (strings, numbers, booleans): - use when label and value are same.
* a list of dicts with `label` and `value` properties.
* a list of dict with `group` and `items` as keys where items are one of the previous two types.


```python
data = ["Pandas", "NumPy", "TensorFlow", "PyTorch"]

# or

data = [
    {"value": "Pandas", "label": "Pandas"},
    {"value": "NumPy", "label": "NumPy"},
    {"value": "TensorFlow", "label": "TensorFlow"},
    {"value": "PyTorch", "label": "PyTorch"},
]

# or

data = [
    {"group": "Data Analysis", "items": ["Pandas", "NumPy"]},
    {"group": "Deep Learning", "items": ["TensorFlow", "Pytorch"]}
]

# or

data = [
    {
        "group": "Data Analysis",
        "items": [
            {"value": "Pandas", "label": "Pandas"},
            {"value": "NumPy", "label": "NumPy"},
        ],
    },
    {
        "group": "Deep Learning",
        "items": [
            {"value": "TensorFlow", "label": "TensorFlow"},
            {"value": "PyTorch", "label": "PyTorch"},
        ],
    },
]
```

### Clearable

Set `clearable` prop to display the clear button in the right section. The button is not displayed when:

- The component does not have a value
- The component is disabled
- The component is read only


```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Select your favorite library",
    placeholder="Select all you like!",
    value=["Pandas", "TensorFlow"],
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    clearable=True,
    w=400,
    mb=180,
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

data = [f"Option-{i}" for i in range(6)]

component = dmc.Stack([
    dmc.MultiSelect(
        label="clearSectionMode='both' (default)",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.MultiSelect(
        label="clearSectionMode='rightSection'",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.MultiSelect(
        label="clearSectionMode='clear'",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Searchable

Set `searchable` prop to allow filtering options by user input.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Pick your favorite libraries",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    searchable=True,
    w=400,
)
```
### Nothing Found

Set the `nothingFoundMessage` prop to display a given message when no options match the search query or there is 
no data available. If the `nothingFoundMessage` prop is not set, the `MultiSelect` dropdown will be hidden.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Pick your favorite libraries",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    searchable=True,
    nothingFoundMessage="Nothing found...",
    w=400,
)
```
### Clear search on change

Set the `clearSearchOnChange=False` to enable selecting multiple items using the same search query.


```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    data=["aa", "ab", "ac", "ba", "bb", "bc"],
    value=["aa"],
    searchable=True,
    clearSearchOnChange=False
)
```
### Checked option icon

Set `checkIconPosition` prop to `left` or `right` to control position of check icon in active option.
To remove the check icon, set `withCheckIcon=False`.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Control check icon",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    value=["Pandas", "NumPy"],
    checkIconPosition="right",
    dropdownOpened=True,
    w=400,
    pb=150,
    id="multi-select-check-icon",
    comboboxProps={"withinPortal": False}

)
```
### Max Selected Values

You can limit the number of selected values with `maxValues` prop. This will not allow adding more values
once the limit is reached.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Select your favorite",
    description="You can select a maximum of 3 frameworks.",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    maxValues=3,
    w=400,
)
```
### Hide selected options

To remove selected options from the list of available options, set `hidePickedOptions` prop:

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Select your favorite libraries",
    placeholder="Select all you like!",
    hidePickedOptions=True,
    value=["Pandas", "TensorFlow"],
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    w=400,
    mb=140,
    dropdownOpened=True,
    comboboxProps={"withinPortal":False}
)
```
### Large Data Sets

The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can
do it with limit prop. 

Example of `MultiSelect` with 100 000 options, 10 options are rendered at the same time:

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="100,000 options",
    data=[f"Option {i}" for i in range(100000)],
    placeholder="use limit to optimize performance",
    limit=10,
    searchable=True,
    w=400,
)
```
### renderOption

`renderOption` function allows you to customize option rendering.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

users_data = {
    "Emily Johnson": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png",
        "email": "emily92@gmail.com",
    },
    "Ava Rodriguez": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png",
        "email": "ava_rose@gmail.com",
    },
    "Olivia Chen": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
        "email": "livvy_globe@gmail.com",
    },
    "Ethan Barnes": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
        "email": "ethan_explorer@gmail.com",
    },
    "Mason Taylor": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
        "email": "mason_musician@gmail.com",
    },
}

component = dmc.MultiSelect(
    data=list(users_data.keys()),
    label="Employees of the month",
    placeholder="Search for employee",
    maxDropdownHeight=300,
    searchable=True,
    hidePickedOptions=True,
    renderOption={
        "function": "renderUserOption",
        "options": {"users": users_data},
    },
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderUserOption = function ({ option }, { users }) {
  const user = users[option.value];

  return React.createElement(
    dmc.Group,
    { gap: "sm" },
    React.createElement(dmc.Avatar, {
      key: "avatar",
      src: user.image,
      size: 36,
      radius: "xl",
    }),
    React.createElement(
      "div",
      { key: "text-block" },
      React.createElement(dmc.Text, { size: "sm", key: "name" }, option.value),
      React.createElement(dmc.Text, {
        size: "xs",
        opacity: 0.5,
        key: "email",
        children: user.email,
      })
    )
  );
};
```



### renderPill

The `renderPill` function allows you to customize pill rendering. The function receives the `option` (that was passed to data),
`value`, `onRemove` and `disabled` props. It must return a React node.



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.



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

users = [
    {
        "value": "Emily Johnson",
        "label": "Emily Johnson",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png",
    },
    {
        "value": "Ava Rodriguez",
        "label": "Ava Rodriguez",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png",
    },
    {
        "value": "Olivia Chen",
        "label": "Olivia Chen",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
    },
    {
        "value": "Ethan Barnes",
        "label": "Ethan Barnes",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
    },
    {
        "value": "Mason Taylor",
        "label": "Mason Taylor",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
    },
]

component = dmc.Box([
    dmc.MultiSelect(
        id="multi-select-render-pill",
        data=users,
        label="Candidates",
        placeholder="Select candidates",
        value=["Emily Johnson", "Ava Rodriguez"],
        renderPill={ "function": "renderUserPill", "options": {"users": users}},
    ),
    dmc.Text(id="multi-select-render-pill-val")
])

@callback(
    Output("multi-select-render-pill-val", "children"),
    Input("multi-select-render-pill", "value"),
)
def update(value):
    return f"You selected {value}"
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderUserPill = function ({ option, onRemove }, { users }) {
  const usersMap = new Map(
    users.map((user) => [user.value.toString(), user])
  );
  const user = usersMap.get(option?.value.toString());

  return React.createElement(
    dmc.Pill,
    {
      withRemoveButton: true,
      onRemove: onRemove,
    },
    React.createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "center",
          gap: 8,
        },
      },
      React.createElement(dmc.Avatar, {
        src: user?.image,
        size: 16,
      }),
      option?.label
    )
  );
};
```

### Reorder pills
Set the `withPillsReorder` prop to allow reordering pills. Dropping a pill before or after another pill updates the
component `value` accordingly. Reordering is automatically disabled when `disabled` or `readOnly` is set.

You can reorder pills with a mouse (drag-and-drop) or keyboard:

- Pills are not part of the `Tab` order. With focus on the input, press `ArrowLeft` (when the caret is at the start of the input) to move focus to the last pill.
- `ArrowLeft` and `ArrowRight` move focus between pills (RTL-aware). Pressing `ArrowRight` on the last pill returns focus to the input.
- `Alt + ArrowLeft` and `Alt + ArrowRight` reorder the focused pill (RTL-aware).
- 
Focus follows the moved pill so multiple moves can be chained without re-focusing. Reordering is automatically disabled when disabled or readOnly is set. 


```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Select your favorite superpowers",
    description="Drag pills to put them in order of preference.",
    data=["Teleport", "Time Travel", "Fly", "Invisibility", "Mind Reading"],
    value=["Teleport", "Time Travel", "Fly", "Invisibility", "Mind Reading"],
    withPillsReorder=True,
)
```
### Options filtering

By default, `MultiSelect` filters options by checking if the option label contains input value. You can change this behavior 
with `filter`. The filter function receives an object with the following properties as a single argument:
 - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format
 - `search` – current search query
 - `limit` – value of limit prop passed to `Select`



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


Example of a custom filter function that matches options by words instead of letters sequence:

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your country",
    placeholder="Pick value",
    searchable=True,
    data=[
        "Great Britain",
        "Canada",
        "United States",
    ],
    filter={"function": "filterCountries"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterCountries = function ({ options, search }) {
  const queryWords = search.toLowerCase().trim().split(" ");
  return options.filter((option) => {
    const words = option.label.toLowerCase().trim().split(" ");
    return queryWords.every((word) =>
      words.some((labelWord) => labelWord.includes(word))
    );
  });
};
```


### Sort options

By default, options are sorted by their position in the data array. You can change this behavior with `filter` function:


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your favorite Python library",
    placeholder="Pick value",
    searchable=True,
    nothingFoundMessage="Nothing found...",
    data=[
        "4 – NumPy",
        "1 – Pandas",
        "3 – Scikit-learn",
        "2 – Plotly",
    ],
    filter={"function": "filterPythonLibs"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterPythonLibs = function ({ options, search }) {
  const query = search.toLowerCase().trim();
  const result = options.filter((option) =>
    option.label.toLowerCase().trim().includes(query)
  );
  result.sort((a, b) => a.label.localeCompare(b.label));
  return result;
};
```




### Scrollable dropdown

By default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with 
`maxDropdownHeight` prop if you do not change the default settings.

If you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change 
dropdown styles with `Styles API`.


```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.MultiSelect(
            label="Scrollable dropdown",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value",
            maxDropdownHeight=300,
            w=400,
        ),
        dmc.MultiSelect(
            label="With native scroll",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value",
            withScrollArea=False,
            styles={"dropdown": {"maxHeight": 200, "overflowY": "auto"}},
            w=400,
            mt="md",
        ),
    ]
)
```
### Fit dropdown to viewport height
Set `floatingHeight="viewport"` to make the dropdown grow to fill the available vertical space in the viewport. The
flip middleware is disabled in this mode – the dropdown always opens in the configured direction and is constrained
to the viewport edges instead of flipping to the other side. Useful when working with large option lists:

```python
import dash_mantine_components as dmc

data = [f"Option {i}" for i in range(100)]

component = dmc.MultiSelect(
    label="Fits viewport height",
    placeholder="Pick value",
    data=data,
    floatingHeight="viewport",
)
```
### Grouping

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    data=[
        {
            "group": "Data Analysis",
            "items": [
                {"value": "Pandas", "label": "Pandas"},
                {"value": "NumPy", "label": "NumPy"},
            ],
        },
        {
            "group": "Deep Learning",
            "items": [
                {"value": "TensorFlow", "label": "TensorFlow"},
                {"value": "PyTorch", "label": "PyTorch"},
            ],
        },
    ],
    w=400,
)
```
### Combobox props
You can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are
not exposed by `MultiSelect`, for example `withinPortal`:

```python
dmc.MultiSelect(comboboxProps={"withinPortal": False})
```


### Change dropdown z-index


```python
dmc.MultiSelect(comboboxProps={"zIndex": 1000})
```


### Inside Popover

To use MultiSelect inside popover, you need to set `withinPortal=False`:

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    width=300,
    position="bottom",
    withArrow=True,
    shadow="md",
    children=[
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(
            dmc.MultiSelect(
                label="Your favorite libraries",
                placeholder="Pick values",
                data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
                comboboxProps={"withinPortal": False},
            )
        ),
    ],
)
```
### Dropdown open in a callback

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

component = html.Div(
    [
        dmc.Button("Toggle dropdown", id="btn-multi-select-opened", n_clicks=0),
        dmc.MultiSelect(
            label="Select your favorite libraries",
            placeholder="Select all you like!",
            id="multi-select-opened",
            value=["pd", "torch"],
            data=[
                {"value": "pd", "label": "Pandas"},
                {"value": "np", "label": "NumPy"},
                {"value": "tf", "label": "TensorFlow"},
                {"value": "torch", "label": "PyTorch"},
            ],
            comboboxProps={"position": "bottom", "middlewares": {"flip": False, "shift": False}},
            w=400,
            mb=10,
        ),
    ]
)


@callback(
    Output("multi-select-opened", "dropdownOpened"),
    Input("btn-multi-select-opened", "n_clicks"),
)
def select_value(n):
    if n % 2 == 0:
        return False
    return True
```
### Dropdown position

By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the
input. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the
underlying `Popover` component.

Example of dropdown that is always displayed above the input:

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your favorite libraries",
    placeholder="Pick values",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}},
)
```
### Dropdown width

To change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your favorite libraries",
    placeholder="Pick values",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "bottom-start", "width": 200},
)
```
### Dropdown offset

To change dropdown offset, set `offset` prop in `comboboxProps`:  

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your favorite libraries",
    placeholder="Pick values",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={
        "position": "bottom",
        "middlewares": {"flip": False, "shift": False},
        "offset": 0,
    },
)
```
### Dropdown animation
By default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed
down to the underlying `Transition` component.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your favorite libraries",
    placeholder="Pick values",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}},
)
```
### Dropdown padding

```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.MultiSelect(
            label="Zero padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            comboboxProps={"dropdownPadding": 0},
            w=400,
        ),
        dmc.MultiSelect(
            label="10px padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            comboboxProps={"dropdownPadding": 10},
            w=400,
            mt="md",
        ),
    ]
)
```
### Dropdown shadow

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your favorite libraries",
    placeholder="Pick values",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"shadow": "md"},
)
```
### Left and right sections

`MultiSelect` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position
inside the input wrapper. You can use them to display icons, input controls or any other elements.

You can use the following props to control sections styles and content:

- `rightSection`/`leftSection` – component to render on the corresponding side of input
- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.
- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Paper(
    [
        dmc.MultiSelect(
            label="Your favorite libraries",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            leftSectionPointerEvents="none",
            leftSection=DashIconify(icon="bi-book"),
            w=400,
        ),
        dmc.MultiSelect(
            label="Your favorite libraries",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            rightSectionPointerEvents="none",
            rightSection=DashIconify(icon="bi-book"),
            w=400,
            mt="md",
        ),
    ]
)
```
### Error State

You can let the user know if the selected value is invalid. In the example below, you will get an error message if you
select less than 2 currency pairs.

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

component = dmc.MultiSelect(
    data=["USDINR", "EURUSD", "USDTWD", "USDJPY"],
    id="multi-select-error",
    value=["USDJPY"],
    w=400,
)


@callback(Output("multi-select-error", "error"), Input("multi-select-error", "value"))
def select_value(value):
    return "Select at least 2." if len(value) < 2 else ""
```
### Success State

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    success="Looks good"
)
```
### Input Props
`MultiSelect` component supports `Input` and Input Wrapper components features and all input element props.
`MultiSelect` documentation does not include all features supported by the component – see Input documentation to learn about all available features.

 
### Removing placeholder after values selected

`MultiSelect` component uses placeholder to indicate that there are values available for selection. It is different
from `Select` component where placeholder is removed when value is selected – user can select only one value.

You can use CSS to remove the placeholder in the `MultiSelect` component when values are selected:


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Paper(
    [
        dmc.MultiSelect(
            label="Default Placeholder",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            value=["Pandas"],
            w=400,
        ),
        dmc.MultiSelect(
            label="Placeholder removed when values are selected",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            value=["Pandas"],
            className="dmc-docs-demo",
            w=400,
            mt="md",
        ),
    ]
)
```

```css
.dmc-docs-demo .mantine-MultiSelect-inputField {
  &:not(:only-child)::placeholder {
    color: transparent;
  }
}
```


### Dash 4 dcc.Dropdown

The Dash 4 [dcc.Dropdown](https://dash.plotly.com/dash-core-components/dropdown) supports some features that are not 
available in DMC.  For example, virtualization, which renders only the visible options instead of the entire list. This improves performance and responsiveness when working 
with large data sets. It also includes a search input and Select all / Deselect all buttons inside the dropdown menu.
When `multi=True`, it displays a count of selected items, preventing the input from resizing as selections grow.

The `dmc.InputWrapper` can be used to add elements like `label`, `description`, and `error` to the `dcc.Dropdown`,
making it consistent with the other DMC inputs. The `htmlFor` prop links the label to the component for focus and accessibility.

To style the `dcc.Dropdown` with a Mantine theme see the   [Dash 4 components](/dash4-components) section.

```python
from dash import dcc
import dash_mantine_components as dmc

component = dmc.InputWrapper(
    dcc.Dropdown([f"option {i}" for i in range(100)],  value=["option 1", "option 2", "option 3"], multi=True, id="dcc4-dropdown"),
    label="dcc.Dropdown with a dmc.InputWrapper",
    htmlFor="dcc4-dropdown",
    className="dmc"  # styles with Mantine theme
)
```
### 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                                      |
|:------------|:---------------------------------|:-------------------------------------------------|
| wrapper     | .mantine-MultiSelect-wrapper     | Root element of the Input                        |
| input       | .mantine-MultiSelect-input       | Input element                                    |
| section     | .mantine-MultiSelect-section     | Left and right sections                          |
| root        | .mantine-MultiSelect-root        | Root element                                     |
| label       | .mantine-MultiSelect-label       | Label element                                    |
| required    | .mantine-MultiSelect-required    | Required asterisk element, rendered inside label |
| description | .mantine-MultiSelect-description | Description element                              |
| error       | .mantine-MultiSelect-error       | Error element                                    |
| dropdown    | .mantine-MultiSelect-dropdown    | Dropdown root element                            |
| options     | .mantine-MultiSelect-options     | Options wrapper                                  |
| option      | .mantine-MultiSelect-option      | Option                                           |
| empty       | .mantine-MultiSelect-empty       | Nothing found message                            |
| group       | .mantine-MultiSelect-group       | Options group wrapper                            |
| groupLabel  | .mantine-MultiSelect-groupLabel  | Options group label                              |
| pill        | .mantine-MultiSelect-pill        | Value pill                                       |
| inputField  | .mantine-MultiSelect-inputField  | Input field                                      |
| pillsList   | .mantine-MultiSelect-pillsList   | List of pills, also contains input field         |


### Keyword Arguments
#### MultiSelect

- 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.

- checkIconPosition (a value equal to: 'left', 'right'; optional):
    Position of the check icon relative to the option label, `'left'`
    by default.

- 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.

- clearButtonProps (dict; optional):
    Props passed down to the clear button.

    `clearButtonProps` is a dict with keys:

- clearSearchOnChange (boolean; optional):
    Clear search value when item is selected. Default True.

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether the clear button should be displayed in the
    right section when the component has value, `False` by default.

- comboboxProps (dict; optional):
    Props passed down to `Combobox` component.

    `comboboxProps` is a dict with keys:

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

- data (list of strings; optional):
    Data used to generate options.

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- dropdownOpened (boolean; optional):
    Controlled dropdown opened state.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- filter (boolean | number | string | dict | list; optional):
    A Function based on which items are filtered and sorted. See
    https://www.dash-mantine-components.com/functions-as-props.

- floatingHeight (string; optional):
    If set to `'viewport'`, the dropdown grows to fill the available
    vertical space in the viewport. Disables the `flip` middleware.

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

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- hiddenInputValuesDivider (string; optional):
    Divider used to separate values in the hidden input `value`
    attribute, `','` by default.

- hidePickedOptions (boolean; optional):
    Determines whether picked options should be removed from the
    options list, `False` by default.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- limit (number; optional):
    Maximum number of options displayed at a time, `Infinity` by
    default.

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDropdownHeight (string | number; optional):
    `max-height` of the dropdown, only applicable when
    `withScrollArea` prop is `True`, `250` by default.

- maxValues (number; optional):
    Maximum number of values, `Infinity` by default.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- nothingFoundMessage (a list of or a singular dash component, string or number; optional):
    Message displayed when no option matched current search query,
    only applicable when `searchable` prop is set.

- openOnFocus (boolean; optional):
    If set, the dropdown opens when the input receives focus default
    `True`.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- renderOption (boolean | number | string | dict | list; optional):
    A function to render content of the option, replaces the default
    content of the option.  See
    https://www.dash-mantine-components.com/functions-as-props.

- renderPill (boolean | number | string | dict | list; optional):
    A function to render content of the pill.  See
    https://www.dash-mantine-components.com/functions-as-props.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- scrollAreaProps (dict; optional):
    Props passed down to the underlying `ScrollArea` component in the
    dropdown.

    `scrollAreaProps` is a dict with keys:

- searchValue (string; optional):
    Controlled search value.

- searchable (boolean; optional):
    Determines whether the select should be searchable, `False` by
    default.

- selectFirstOptionOnChange (boolean; optional):
    Determines whether the first option should be selected when value
    changes, `False` by default.

- selectFirstOptionOnDropdownOpen (boolean; optional):
    If set, the first option is selected when dropdown opens, `False`
    by default.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (list of strings; optional):
    Controlled component value.

- variant (string; optional):
    variant.

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

- withAlignedLabels (boolean; optional):
    If set, unchecked labels are aligned with the checked one
    @,default,`False`.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withCheckIcon (boolean; optional):
    Determines whether check icon should be displayed near the
    selected option label, `True` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withPillsReorder (boolean; optional):
    If set, selected values can be reordered by dragging pills.
    Disabled when `disabled` or `readOnly` is set. @,default,False.

- withScrollArea (boolean; optional):
    Determines whether the options should be wrapped with
    `ScrollArea.AutoSize`, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## Select  
Select enables users to select an option in a dropdown.  
Category: Combobox  

> Need users to select multiple items? See `MultiSelect`.  Need users to type their own options? See `TagsInput` or `Autocomplete`

### Made with Combobox

`Select` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend
its functionality, you can create your own custom `Select` component. See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.


### Simple Example

`Select` component allows user to pick one option from the given data. Unlike `Autocomplete`, `Select` does not allow entering custom values.


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

component = html.Div(
    [
        dmc.Select(
            label="Select your favorite library",
            placeholder="Select one",
            id="framework-select",
            value="pd",
            data=[
                {"value": "pd", "label": "Pandas"},
                {"value": "np", "label": "NumPy"},
                {"value": "tf", "label": "TensorFlow"},
                {"value": "torch", "label": "PyTorch"},
            ],
            w=200,
            mb=10,
        ),
        dmc.Text(id="selected-value"),
    ]
)


@callback(Output("selected-value", "children"), Input("framework-select", "value"))
def select_value(value):
    return f" You selected {value}"
```
### Data Format

The data can be provided as either:
* a list of primitive values (strings, numbers, booleans): - use when label and value are same.
* a list of dicts with `label` and `value` properties.
* a list of dict with `group` and `items` as keys where items are one of the previous two types.

```python
data = ["Pandas", "NumPy", "TensorFlow", "PyTorch"]

# or

data = [
    {"value": "Pandas", "label": "Pandas"},
    {"value": "NumPy", "label": "NumPy"},
    {"value": "TensorFlow", "label": "TensorFlow"},
    {"value": "PyTorch", "label": "PyTorch"},
]

# or

data = [
    {"group": "Data Analysis", "items": ["Pandas", "NumPy"]},
    {"group": "Deep Learning", "items": ["TensorFlow", "Pytorch"]}
]

# or

data = [
    {
        "group": "Data Analysis",
        "items": [
            {"value": "Pandas", "label": "Pandas"},
            {"value": "NumPy", "label": "NumPy"},
        ],
    },
    {
        "group": "Deep Learning",
        "items": [
            {"value": "TensorFlow", "label": "TensorFlow"},
            {"value": "PyTorch", "label": "PyTorch"},
        ],
    },
]
```
### autoSelectOnBlur

Set `autoSelectOnBlur=True` to automatically select the highlighted option when the input loses focus. To see this
feature in action: select an option with up/down arrows, then click outside the input:


```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    placeholder="Pick value",
    autoSelectOnBlur=True,
    w=400,
)
```
### Searchable

Set `searchable=True` to allow filtering options by user input.

```python
import dash_mantine_components as dmc

component = dmc.Select(
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    searchable=True,
    w=200,
)
```
### clearSearchOnFocus

When `clearSearchOnFocus=True` and the `Select` is in searchable mode, the search input will be cleared each time the
field gains focus.  This is useful when you want the user to start with an empty search box each time, without having 
to manually delete the existing text.


```python
import dash_mantine_components as dmc

component = dmc.Select(
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    value="Pandas",
    searchable=True,
    clearSearchOnFocus=True,
)
```
### Nothing Found

Set the `nothingFoundMessage` prop to display a given message when no options match the search query or there is 
no data available. If the `nothingFoundMessage` prop is not set, the `MultiSelect` dropdown will be hidden.

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Pick your favorite library",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    searchable=True,
    nothingFoundMessage="Nothing found...",
    w=400,
)
```
### Checked option icon
Set `checkIconPosition` prop to left or right to control position of check icon in active option. To remove the 
check icon, set `withCheckIcon=False`.


```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Control check icon",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    value="NumPy",
    checkIconPosition="right",
    dropdownOpened=True,
    comboboxProps={"withinPortal":False},
    w=200,
    pb=150,
    id="select-check-icon",

)
```
### Clearable

Set `clearable` prop to enable clearing selected values.

```python
import dash_mantine_components as dmc

component = dmc.Select(
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    value="Pandas",
    clearable=True,
    w=200,
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

data = ["Mercury", "Venus", "Earth", "Mars"]

component = dmc.Stack([
    dmc.Select(
        label="clearSectionMode='both' (default)",
        placeholder="Pick a planet",
        data=data,
        value="Earth",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.Select(
        label="clearSectionMode='rightSection'",
        placeholder="Pick a planet",
        data=data,
        value="Earth",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.Select(
        label="clearSectionMode='clear'",
        placeholder="Pick a planet",
        data=data,
        value="Earth",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Allow deselect
`allowDeselect` prop determines whether the value should be deselected when user clicks on the selected option. By 
default, `allowDeselect` is True:


```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.Select(
            label="Option cannot be deselected",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            value="Pandas",
            allowDeselect=False,
            w=400,
        ),
        dmc.Select(
            label="Option can be deselected",
            description="This is the default behavior, click 'Pandas' in the dropdown",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            value="Pandas",
            allowDeselect=True,
            w=400,
            mt="md",
        ),
    ]
)
```
### Large Data Sets

The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can
do it with limit prop. 

Note that if you use a custom `filter` function, you need to implement your own logic to limit the number of options in filter

Example of `Select` with 100 000 options, 10 options are rendered at the same time:

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="100,000 options",
    data=[f"Option {i}" for i in range(100000)],
    placeholder="use limit to optimize performance",
    limit=10,
    searchable=True,
    w=400,
)
```
### renderOption

`renderOption` function allows you to customize option rendering.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = ([
    dmc.Select(
      label="Select with renderOption",
      placeholder="Select text align",
      data=[
        { "value": 'left', "label": 'Left' },
        { "value": 'center', "label": 'Center' },
        { "value": 'right', "label": 'Right' },
        { "value": 'justify', "label": 'Justify' },
      ],
      renderOption={"function": "renderOptionSelect"}
    )

])
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var iconify = window.dash_iconify;


dmcfuncs.renderOptionSelect = function ({ option, checked }) {

  const icons = {
   left: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-left", width: 24 }),
   center: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-center", width: 24 }),
   right: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-right", width: 24 }),
   justify: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-justify", width: 24 }),
  };

  const checkedIcon = React.createElement(iconify.DashIconify, {
    icon: "mdi:check",
    width: 24,
  });

  return React.createElement(
    dmc.Group,
    { flex: "1", gap: "xs" },
    icons[option.value],
    option.label,
    checked ? checkedIcon : null
  );
};
```

### Options filtering

By default, `Select` filters options by checking if the option label contains input value. You can change this behavior 
with `filter`. The filter function receives an object with the following properties as a single argument:
 - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format
 - `search` – current search query
 - `limit` – value of limit prop passed to `Select`



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


Example of a custom filter function that matches options by words instead of letters sequence:

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your country",
    placeholder="Pick value",
    searchable=True,
    data=[
        "Great Britain",
        "Canada",
        "United States",
    ],
    filter={"function": "filterCountries"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterCountries = function ({ options, search }) {
  const queryWords = search.toLowerCase().trim().split(" ");
  return options.filter((option) => {
    const words = option.label.toLowerCase().trim().split(" ");
    return queryWords.every((word) =>
      words.some((labelWord) => labelWord.includes(word))
    );
  });
};
```


### Sort options

By default, options are sorted by their position in the data array. You can change this behavior with `filter` function:


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite Python library",
    placeholder="Pick value",
    searchable=True,
    nothingFoundMessage="Nothing found...",
    data=[
        "4 – NumPy",
        "1 – Pandas",
        "3 – Scikit-learn",
        "2 – Plotly",
    ],
    filter={"function": "filterPythonLibs"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterPythonLibs = function ({ options, search }) {
  const query = search.toLowerCase().trim();
  const result = options.filter((option) =>
    option.label.toLowerCase().trim().includes(query)
  );
  result.sort((a, b) => a.label.localeCompare(b.label));
  return result;
};
```



### Scrollable dropdown

By default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with 
`maxDropdownHeight` prop if you do not change the default settings.

If you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change 
dropdown styles with `Styles API`.


```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.Select(
            label="Scrollable dropdown",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value",
            maxDropdownHeight=300,
            w=400,
        ),
        dmc.Select(
            label="With native scroll",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value",
            withScrollArea=False,
            styles={"dropdown": {"maxHeight": 200, "overflowY": "auto"}},
            w=400,
            mt="md",
        ),
    ]
)
```
### Fit dropdown to viewport height
Set `floatingHeight="viewport"` to make the dropdown grow to fill the available vertical space in the viewport. The
flip middleware is disabled in this mode – the dropdown always opens in the configured direction and is constrained
to the viewport edges instead of flipping to the other side. Useful when working with large option lists:

```python
import dash_mantine_components as dmc

data = [f"Option {i}" for i in range(100)]

component = dmc.Select(
    label="Fits viewport height",
    placeholder="Pick value",
    data=data,
    floatingHeight="viewport",
)
```
### Grouping Items

```python
import dash_mantine_components as dmc

component = dmc.Select(
    data=[
        {
            "group": "Data Analysis",
            "items": [
                {"value": "Pandas", "label": "Pandas"},
                {"value": "NumPy", "label": "NumPy"},
            ],
        },
        {
            "group": "Deep Learning",
            "items": [
                {"value": "TensorFlow", "label": "TensorFlow"},
                {"value": "PyTorch", "label": "PyTorch"},
            ],
        },
    ],
    w=400,
)
```
### Combobox props
You can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are
not exposed by `Select`, for example `withinPortal`:

```python
dmc.Select(comboboxProps={"withinPortal": False})
```


### Change dropdown z-index


```python
dmc.Select(comboboxProps={"zIndex": 1000})
```

### Inside Popover

To use `Select` inside popover, you need to set `withinPortal=False`:

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    width=300,
    position="bottom",
    withArrow=True,
    shadow="md",
    children=[
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(
            dmc.Select(
                label="Your favorite library",
                placeholder="Pick value",
                data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
                comboboxProps={"withinPortal": False},
            )
        ),
    ],
)
```
### Dropdown open in a callback

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

component = html.Div(
    [
        dmc.Button("Toggle dropdown", id="btn-select-opened", n_clicks=0),
        dmc.Select(
            label="Select your favorite library",
            placeholder="Select value",
            id="select-opened",
            value="pd",
            data=[
                {"value": "pd", "label": "Pandas"},
                {"value": "np", "label": "NumPy"},
                {"value": "tf", "label": "TensorFlow"},
                {"value": "torch", "label": "PyTorch"},
            ],
            comboboxProps={"position": "bottom", "middlewares": {"flip": False, "shift": False}},
            w=400,
            mb=10,
        ),
    ]
)


@callback(
    Output("select-opened", "dropdownOpened"), Input("btn-select-opened", "n_clicks")
)
def select_value(n):
    if n % 2 == 0:
        return False
    return True
```
### Dropdown position

By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the
input. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the
underlying `Popover` component.

Example of dropdown that is always displayed above the input:

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}},
)
```
### Dropdown width

To change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "bottom-start", "width": 200},
)
```
### Dropdown offset

To change dropdown offset, set `offset` prop in `comboboxProps`:  

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={
        "position": "bottom",
        "middlewares": {"flip": False, "shift": False},
        "offset": 0,
    },
)
```
### Dropdown animation
By default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed
down to the underlying `Transition` component.

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library",
    placeholder="Pick values",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}},
)
```
### Dropdown padding

```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.Select(
            label="Zero padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            comboboxProps={"dropdownPadding": 0},
            w=400,
        ),
        dmc.Select(
            label="10px padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            comboboxProps={"dropdownPadding": 10},
            w=400,
            mt="md",
        ),
    ]
)
```
### Dropdown shadow

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"shadow": "md"},
)
```
### Left and right sections

`Select` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position
inside the input wrapper. You can use them to display icons, input controls or any other elements.

You can use the following props to control sections styles and content:

- `rightSection`/`leftSection` – component to render on the corresponding side of input
- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.
- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Paper(
    [
        dmc.Select(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            leftSectionPointerEvents="none",
            leftSection=DashIconify(icon="bi-book"),
            w=400,
        ),
        dmc.Select(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            rightSectionPointerEvents="none",
            rightSection=DashIconify(icon="bi-book"),
            w=400,
            mt="md",
        ),
    ]
)
```
### Input Props
`Select` component supports `Input` and Input Wrapper components features and all input element props.
`Select` documentation does not include all features supported by the component – see Input documentation to learn about all available features.

 
### Error State


Note: Dash adds some css by default which can lead you to see a red box when setting the `required` or `error` 
prop to True. Use the below css snippet to counteract it.

```css
input:invalid {
    outline: none !important;
}
```

You can let the user know if the selected value is invalid. In the example below, you will get an error message if you
select less than 2 currency pairs.

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

component = dmc.Select(
    data=["USDINR", "EURUSD", "USDTWD", "USDJPY"],
    id="select-error",
    value="USDJPY",
    w=200,
)


@callback(Output("select-error", "error"), Input("select-error", "value"))
def select_value(value):
    return "JPY is not allowed!" if value == "USDJPY" else ""
```
### Success State

```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    success="Looks good"
)
```
### 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                                      |
|:------------|:----------------------------|:-------------------------------------------------|
| wrapper     | .mantine-Select-wrapper     | Root element of the Input                        |
| input       | .mantine-Select-input       | Input element                                    |
| section     | .mantine-Select-section     | Left and right sections                          |
| root        | .mantine-Select-root        | Root element                                     |
| label       | .mantine-Select-label       | Label element                                    |
| required    | .mantine-Select-required    | Required asterisk element, rendered inside label |
| description | .mantine-Select-description | Description element                              |
| error       | .mantine-Select-error       | Error element                                    |
| dropdown    | .mantine-Select-dropdown    | Dropdown root element                            |
| options     | .mantine-Select-options     | Options wrapper                                  |
| option      | .mantine-Select-option      | Option                                           |
| empty       | .mantine-Select-empty       | Nothing found message                            |
| group       | .mantine-Select-group       | Options group wrapper                            |
| groupLabel  | .mantine-Select-groupLabel  | Options group label                              |


### Keyword Arguments
#### Select

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

- allowDeselect (boolean; optional):
    Determines whether it should be possible to deselect value by
    clicking on the selected option, `True` by default.

- 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.

- autoSelectOnBlur (boolean; optional):
    If set, the highlighted option is selected when the input loses
    focus. default `False`.

- checkIconPosition (a value equal to: 'left', 'right'; optional):
    Position of the check icon relative to the option label, `'left'`
    by default.

- 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.

- clearButtonProps (dict; optional):
    Props passed down to the clear button.

    `clearButtonProps` is a dict with keys:

- clearSearchOnFocus (boolean; default False):
    Clears search value when dropdown is opened.  Ignored if
    searchable=False.

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether the clear button should be displayed in the
    right section when the component has value, `False` by default.

- comboboxProps (dict; optional):
    Props passed down to `Combobox` component.

    `comboboxProps` is a dict with keys:

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

- data (list of strings; optional):
    Data used to generate options.

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- dropdownOpened (boolean; optional):
    Controlled dropdown opened state.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- filter (boolean | number | string | dict | list; optional):
    A Function based on which items are filtered and sorted. See
    https://www.dash-mantine-components.com/functions-as-props.

- floatingHeight (string; optional):
    If set to `'viewport'`, the dropdown grows to fill the available
    vertical space in the viewport. Disables the `flip` middleware.

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

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- limit (number; optional):
    Maximum number of options displayed at a time, `Infinity` by
    default.

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDropdownHeight (string | number; optional):
    `max-height` of the dropdown, only applicable when
    `withScrollArea` prop is `True`, `250` by default.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- nothingFoundMessage (a list of or a singular dash component, string or number; optional):
    Message displayed when no option matched current search query,
    only applicable when `searchable` prop is set.

- openOnFocus (boolean; optional):
    If set, the dropdown opens when the input receives focus default
    `True`.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- renderOption (boolean | number | string | dict | list; optional):
    A function to render content of the option, replaces the default
    content of the option.  See
    https://www.dash-mantine-components.com/functions-as-props.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- scrollAreaProps (dict; optional):
    Props passed down to the underlying `ScrollArea` component in the
    dropdown.

    `scrollAreaProps` is a dict with keys:

- searchValue (string; optional):
    Controlled search value.

- searchable (boolean; optional):
    Determines whether the select should be searchable, `False` by
    default.

- selectFirstOptionOnChange (boolean; optional):
    Determines whether the first option should be selected when value
    changes, `False` by default.

- selectFirstOptionOnDropdownOpen (boolean; optional):
    If set, the first option is selected when dropdown opens, `False`
    by default.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (string | number | boolean; optional):
    Controlled component value.

- variant (string; optional):
    variant.

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

- withAlignedLabels (boolean; optional):
    If set, unchecked labels are aligned with the checked one
    @,default,`False`.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withCheckIcon (boolean; optional):
    Determines whether check icon should be displayed near the
    selected option label, `True` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withScrollArea (boolean; optional):
    Determines whether the options should be wrapped with
    `ScrollArea.AutoSize`, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## TagsInput  
Capture a list of values from user with free input and suggestions  
Category: Combobox  

### Made with Combobox

`TagsInput` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend
its functionality, you can create your own custom `TagsInput` component.  See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.



### Simple Example

`TagsInput` provides a way to enter multiple values. It can be used with suggestions or without them.
`TagsInput` is similar to MultiSelect, but it allows entering custom values.

By default, `enter key` and `,` will select the typed value.

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

component = html.Div(
    [
        dmc.TagsInput(
            label="Select frameworks",
            placeholder="Select all you like!",
            id="framework-tags-input",
            value=["ng", "vue"],
            w=400,
            mb=10,
        ),
        dmc.Text(id="tags-input-value"),
    ]
)


@callback(
    Output("tags-input-value", "children"), Input("framework-tags-input", "value")
)
def select_value(value):
    return ", ".join(value)
```
### Data Format

Note that the `data` format is different than components like `Select` and `Multi Select`.  See [Why can I not use value/label data structure with TagsInput?](https://help.mantine.dev/q/autocomplete-value-label)

`TagsInput` `data` prop accepts data in one of the following formats:

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

# or

data = [
    {"group": "Frontend", "items": ["React", "Angular"]},
    {"group": "Backend", "items": ["Express", "Django"]}
]
```

### Loading state

Set `loading` prop to display a loading indicator. By default, the loader is displayed on the right side of the input.
You can change the position with the `loadingPosition` prop to 'left' or 'right'.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    placeholder="Enter tag",
    loading=True,
    w=400,
)
```
### Clearable

Set `clearable` prop to display the clear button in the right section. The button is not displayed when:

* The component does not have a value
* The component is disabled
* The component is read only

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Press Enter to submit a tag",
    value=["React"],
    w=400,
    clearable=True,
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

data = [f"Option-{i}" for i in range(6)]

component = dmc.Stack([
    dmc.TagsInput(
        label="clearSectionMode='both' (default)",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.TagsInput(
        label="clearSectionMode='rightSection'",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.TagsInput(
        label="clearSectionMode='clear'",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Max selected values

You can limit the number of selected values with `maxTags` prop. This will not allow adding more values once the limit is reached.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Select frameworks",
    description="You can select a maximum of 3 frameworks.",
    maxTags=3,
    w=400,
)
```
### Accept value on blur
By default, if the user types a value and blurs the input, the value is added to the list. You can change this behavior
by setting `acceptValueOnBlur` to `False`. In this case, the value is added only when the user presses `Enter` or clicks
on a suggestion.

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

component = html.Div(
    [
        dmc.TagsInput(
            label="Value is accepted on blur",
            placeholder="Select all you like!",
            id="framework-tags-input1",
            value=["Pandas", "NumPy"],
            w=400,
            mb=10,
        ),
        dmc.Text(id="tags-input-value1", mb="xl"),
        dmc.TagsInput(
            label="Value IS NOT accepted on blur",
            placeholder="Select all you like!",
            id="framework-tags-input2",
            value=["Pandas", "NumPy"],
            acceptValueOnBlur=False,
            w=400,
            mb=10,
        ),
        dmc.Text(id="tags-input-value2"),
    ]
)


@callback(
    Output("tags-input-value1", "children"), Input("framework-tags-input1", "value")
)
def select_value(value):
    return f"You selected {value}"


@callback(
    Output("tags-input-value2", "children"), Input("framework-tags-input2", "value")
)
def select_value(value):
    return f"You selected {value}"
```
### Allow duplicates

By default, `TagsInput` does not allow adding duplicate values, but you can change this behavior by setting `allowDuplicates` prop.
Value is considered duplicate if it is already present in the `value` array, regardless of the case and trailing whitespace.


```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Press Enter to submit a tag",
    placeholder="Duplicates are allowed",
    allowDuplicates=True,
    w=400,
)
```
### Split chars

By default, `TagsInput` splits values by comma (`,`), but you can change this behavior by setting `splitChars` prop to an array of strings.
All values from `splitChars` cannot be included in the final value. Values are also split on paste.

Example of splitting by `,`, `|` and `space`:

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Press Enter to submit a tag",
    placeholder="Enter tag",
    splitChars=[",", " ", "|"],
    w=400,
)
```
### With suggestions

`TagsInput` can be used with suggestions, it will render suggestions list under input and allow selecting suggestions 
with keyboard or mouse. Note that user is not limited to suggestions, it is still possible to enter custom values. 
If you want to allow values only from suggestions, use [MultiSelect](/components/multiselect) component instead.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    w=400,
    label="Press Enter to submit a tag",
    placeholder="Pick tag from list",
    data=["React", "Angular", "Svelte"],
)
```
### Grouping

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    data=[
        {
            "group": "Data Analysis",
            "items": [
                {"value": "Pandas", "label": "Pandas"},
                {"value": "NumPy", "label": "NumPy"},
            ],
        },
        {
            "group": "Deep Learning",
            "items": [
                {"value": "TensorFlow", "label": "TensorFlow"},
                {"value": "PyTorch", "label": "PyTorch"},
            ],
        },
    ],
    w=400,
)
```
### Large data sets
The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can do
it with `limit` prop. 

Example of `TagsInput` with 100 000 options, 5 options are rendered at the same time:


```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="100,000 options",
    data=[f"Option {i}" for i in range(100000)],
    placeholder="use limit to optimize performance",
    limit=5,
    w=400,
)
```
### renderOption

`renderOption` function allows you to customize option rendering.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

groceries = {
    "Apples": {
        "emoji": "🍎",
        "description": "Crisp and juicy snacking delight",
    },
    "Bread": {
        "emoji": "🍞",
        "description": "Freshly baked daily essential",
    },
    "Bananas": {
        "emoji": "🍌",
        "description": "Perfect for a healthy breakfast",
    },
    "Eggs": {
        "emoji": "🥚",
        "description": "Versatile protein source for cooking",
    },
    "Broccoli": {
        "emoji": "🥦",
        "description": "Nutrient-rich green vegetable",
    },
}

component = dmc.TagsInput(
    label="Groceries",
    placeholder="Pick tag from list or type to add new",
    data=list(groceries.keys()),
    maxDropdownHeight=300,
    renderOption={
        "function": "renderGroceryOption",
        "options": {"data": groceries},
    },
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderGroceryOption = function ({ option }, { data }) {
  const item = data[option.value];

  return React.createElement(
    dmc.Group,
    null,
    React.createElement(
      dmc.Text,
      { span: true, fz: 24 },
      item.emoji
    ),
    React.createElement(
      "div",
      null,
      React.createElement(dmc.Text, { key: "label"}, option.value, ),
      React.createElement(
        dmc.Text,
        { size: "xs", opacity: 0.5, key: "description" },
        item.description
      )
    )
  );
};
```


### renderPill

The `renderPill` function allows you to customize pill rendering. The function receives the `option` (that was passed to data),
`value`, `onRemove` and `disabled` props. It must return a React node.  Note that since `TagsInput` allows adding custom values,
`option` property might be generated on the fly.



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.



```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Custom pills",
    description="Tags are rendered with a star prefix",
    placeholder="Enter tag",
    value=["React", "Angular"],
    renderPill={"function": "renderTagPill"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderTagPill = function ({ value, onRemove }) {
  return React.createElement(
    dmc.Pill,
    {
      withRemoveButton: true,
      onRemove: onRemove,
    },
    `★ ${value}`
  );
};
```



### Reorder pills

Set the `withPillsReorder` prop to allow reordering pills. Dropping a pill before or after another pill updates the
component `value` accordingly. Reordering is automatically disabled when `disabled` or `readOnly` is set.

You can reorder pills with a mouse (drag-and-drop) or keyboard:

- Pills are not part of the `Tab` order. With focus on the input, press `ArrowLeft` (when the caret is at the start of the input) to move focus to the last pill.
- `ArrowLeft` and `ArrowRight` move focus between pills (RTL-aware). Pressing `ArrowRight` on the last pill returns focus to the input.
- `Alt + ArrowLeft` and `Alt + ArrowRight` reorder the focused pill (RTL-aware).
- 
Focus follows the moved pill so multiple moves can be chained without re-focusing.


```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Drag pills to reorder",
    description="Tags can be reordered by dragging pills",
    placeholder="Enter tag",
    value=["first", "second", "third"],
    w=400,
    withPillsReorder=True
)
```
### Options filtering

By default, `TagsInput` filters options by checking if the option label contains input value. You can change this behavior 
with `filter`. The filter function receives an object with the following properties as a single argument:
 - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format
 - `search` – current search query
 - `limit` – value of limit prop passed to `Select`



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


Example of a custom filter function that matches options by words instead of letters sequence:

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="What countries have you visited?",
    placeholder="Pick value or enter anything",
    data=[
        "Great Britain",
        "Canada",
        "United States",
    ],
    filter={"function": "filterCountries"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterCountries = function ({ options, search }) {
  const queryWords = search.toLowerCase().trim().split(" ");
  return options.filter((option) => {
    const words = option.label.toLowerCase().trim().split(" ");
    return queryWords.every((word) =>
      words.some((labelWord) => labelWord.includes(word))
    );
  });
};
```


### Sort options

By default, options are sorted by their position in the data array. You can change this behavior with `filter` function:


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Your favorite Python library",
    placeholder="Pick value or enter anything",
    data=[
        "4 – NumPy",
        "1 – Pandas",
        "3 – Scikit-learn",
        "2 – Plotly",
    ],
    filter={"function": "filterPythonLibs"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterPythonLibs = function ({ options, search }) {
  const query = search.toLowerCase().trim();
  const result = options.filter((option) =>
    option.label.toLowerCase().trim().includes(query)
  );
  result.sort((a, b) => a.label.localeCompare(b.label));
  return result;
};
```




### Scrollable dropdown

By default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with 
`maxDropdownHeight` prop if you do not change the default settings.

If you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change 
dropdown styles with `Styles API`.


```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.TagsInput(
            label="Scrollable dropdown",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value",
            maxDropdownHeight=300,
            w=400,
        ),
        dmc.TagsInput(
            label="With native scroll",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value",
            withScrollArea=False,
            styles={"dropdown": {"maxHeight": 200, "overflowY": "auto"}},
            w=400,
            mt="md",
        ),
    ]
)
```
### Fit dropdown to viewport height
Set `floatingHeight="viewport"` to make the dropdown grow to fill the available vertical space in the viewport. The
flip middleware is disabled in this mode – the dropdown always opens in the configured direction and is constrained
to the viewport edges instead of flipping to the other side. Useful when working with large option lists:

```python
import dash_mantine_components as dmc

data = [f"Option {i}" for i in range(100)]

component = dmc.TagsInput(
    label="Fits viewport height",
    placeholder="Pick value",
    data=data,
    floatingHeight="viewport",
)
```
### Disabled options  

When an option is disabled, it cannot be selected and is ignored in keyboard navigation. Note that user can still enter
disabled option as a value. If you want to prohibit certain values, use a callback to filter them out.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Enter tags",
    placeholder="Some tags are disabled",
    data = [
        {"value": "Pandas"},
        {"value": "NumPy"},
        {"value": "TensorFlow", "disabled": True},
        {"value": "PyTorch", "disabled": True},
    ],
    w=400,
)
```
### Combobox props
You can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are
not exposed by `TagsInput`, for example `withinPortal`:

```python
dmc.TagsInput(comboboxProps={"withinPortal": False})
```


### Change dropdown z-index

```python
dmc.TagsInput(comboboxProps={"zIndex": 1000})
```

### Inside Popover

To use `TagsInput` inside popover, you need to set `withinPortal=False`:

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    width=300,
    position="bottom",
    withArrow=True,
    shadow="md",
    children=[
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(
            dmc.TagsInput(
                label="Your favorite library",
                placeholder="Pick value",
                data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
                comboboxProps={"withinPortal": False},
            )
        ),
    ],
)
```
### Dropdown open in a callback

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

component = html.Div(
    [
        dmc.Button("Toggle dropdown", id="btn-tags-opened", n_clicks=0),
        dmc.TagsInput(
            label="Select your favorite library",
            placeholder="Select value",
            id="tags-opened",
            value=["pd"],
            data=[
                {"value": "pd", "label": "Pandas"},
                {"value": "np", "label": "NumPy"},
                {"value": "tf", "label": "TensorFlow"},
                {"value": "torch", "label": "PyTorch"},
            ],
            w=400,
            mb=10,
        ),
    ]
)


@callback(
    Output("tags-opened", "dropdownOpened"), Input("btn-tags-opened", "n_clicks")
)
def select_value(n):
    if n % 2 == 0:
        return False
    return True
```
### Dropdown position

By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the
input. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the
underlying `Popover` component.

Example of dropdown that is always displayed above the input:

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}},
)
```
### Dropdown width

To change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "bottom-start", "width": 200},
)
```
### Dropdown offset

To change dropdown offset, set `offset` prop in `comboboxProps`:  

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={
        "position": "bottom",
        "middlewares": {"flip": False, "shift": False},
        "offset": 0,
    },
)
```
### Dropdown animation
By default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed
down to the underlying `Transition` component.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Your favorite library",
    placeholder="Pick values",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}},
)
```
### Dropdown padding

```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.TagsInput(
            label="Zero padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            comboboxProps={"dropdownPadding": 0},
            w=400,
        ),
        dmc.TagsInput(
            label="10px padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value",
            comboboxProps={"dropdownPadding": 10},
            w=400,
            mt="md",
        ),
    ]
)
```
### Dropdown shadow

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Your favorite library",
    placeholder="Pick value",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"shadow": "md"},
)
```
### Left and right sections

`MultiSelect` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position
inside the input wrapper. You can use them to display icons, input controls or any other elements.

You can use the following props to control sections styles and content:

- `rightSection`/`leftSection` – component to render on the corresponding side of input
- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.
- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Paper(
    [
        dmc.TagsInput(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            leftSectionPointerEvents="none",
            leftSection=DashIconify(icon="bi-book"),
            w=400,
        ),
        dmc.TagsInput(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick values",
            rightSectionPointerEvents="none",
            rightSection=DashIconify(icon="bi-book"),
            w=400,
            mt="md",
        ),
    ]
)
```
### Input Props
`TagsInput` component supports `Input` and Input Wrapper components features and all input element props.
`TagsInput` documentation does not include all features supported by the component – see Input documentation to learn about all available features.

 
### Read only
Set `readOnly` to make the input read only. When `readOnly` is set, `TagsInput` will not show suggestions and value
cannot be updated by the user entering data in the input.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Read only",
    placeholder="Enter tag",
    readOnly=True,
    value=["First", "Second"],
    w=400,
)
```
### Disabled
Set `disabled` to disable the input. When `disabled` is set, user cannot interact with the input and `TagsInput` will not show suggestions.

```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Disabled",
    disabled=True,
    value=["First", "Second"],
    w=400,
)
```
### Error state

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.TagsInput(
            label="Boolean error",
            placeholder="Boolean error",
            error=True,
            value=["React", "Angular"],
        ),
        dmc.TagsInput(
            label="With error message",
            placeholder="With error message",
            error="Invalid name",
            value=["React", "Angular"],
        ),
    ]
)
```
### Success state


```python
import dash_mantine_components as dmc

component = dmc.TagsInput(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    success="Looks good"
)
```
### 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.


Refer to the Mantine TagsInput Style API [interactive demo](https://mantine.dev/core/tags-input/#styles-api) for help in identifying each selector.


| Name        | Static selector                | Description                                      |
|:------------|:-------------------------------|:-------------------------------------------------|
| wrapper     | .mantine-TagsInput-wrapper     | Root element of the Input                        |
| input       | .mantine-TagsInput-input       | Input element                                    |
| section     | .mantine-TagsInput-section     | Left and right sections                          |
| root        | .mantine-TagsInput-root        | Root element                                     |
| label       | .mantine-TagsInput-label       | Label element                                    |
| required    | .mantine-TagsInput-required    | Required asterisk element, rendered inside label |
| description | .mantine-TagsInput-description | Description element                              |
| error       | .mantine-TagsInput-error       | Error element                                    |
| dropdown    | .mantine-TagsInput-dropdown    | Dropdown root element                            |
| options     | .mantine-TagsInput-options     | Options wrapper                                  |
| option      | .mantine-TagsInput-option      | Option                                           |
| empty       | .mantine-TagsInput-empty       | Nothing found message                            |
| group       | .mantine-TagsInput-group       | Options group wrapper                            |
| groupLabel  | .mantine-TagsInput-groupLabel  | Options group label                              |
| pill        | .mantine-TagsInput-pill        | Value pill                                       |
| inputField  | .mantine-TagsInput-inputField  | Input field                                      |
| pillsList   | .mantine-TagsInput-pillsList   | List of pills, also contains input field         |


### Keyword Arguments
#### TagsInput

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

- acceptValueOnBlur (boolean; optional):
    Determines whether the value typed in by the user but not
    submitted should be accepted when the input is blurred, True by
    default.

- allowDuplicates (boolean; optional):
    Determines whether duplicate tags are allowed, `False` by default.

- 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.

- 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.

- clearButtonProps (dict; optional):
    Props passed down to the clear button.

    `clearButtonProps` is a dict with keys:

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether the clear button should be displayed in the
    right section when the component has value, `False` by default.

- comboboxProps (dict; optional):
    Props passed down to `Combobox` component.

    `comboboxProps` is a dict with keys:

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

- data (list of strings; optional):
    Data displayed in the dropdown.

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

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- dropdownOpened (boolean; optional):
    Controlled dropdown opened state.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- filter (boolean | number | string | dict | list; optional):
    A Function based on which items are filtered and sorted. See
    https://www.dash-mantine-components.com/functions-as-props.

- floatingHeight (string; optional):
    If set to `'viewport'`, the dropdown grows to fill the available
    vertical space in the viewport. Disables the `flip` middleware.

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

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- hiddenInputValuesDivider (string; optional):
    Divider used to separate values in the hidden input `value`
    attribute, `','` by default.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- limit (number; optional):
    Maximum number of options displayed at a time, `Infinity` by
    default.

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDropdownHeight (string | number; optional):
    `max-height` of the dropdown, only applicable when
    `withScrollArea` prop is `True`, `250` by default.

- maxTags (number; optional):
    Maximum number of tags, `Infinity` by default.

- 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 prop.

- openOnFocus (boolean; optional):
    If set, the dropdown opens when the input receives focus default
    `True`.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- renderOption (boolean | number | string | dict | list; optional):
    A function to render content of the option, replaces the default
    content of the option.  See
    https://www.dash-mantine-components.com/functions-as-props.

- renderPill (boolean | number | string | dict | list; optional):
    A function to render content of the pill.  See
    https://www.dash-mantine-components.com/functions-as-props.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- scrollAreaProps (dict; optional):
    Props passed down to the underlying `ScrollArea` component in the
    dropdown.

    `scrollAreaProps` is a dict with keys:

- searchValue (string; optional):
    Controlled search value.

- selectFirstOptionOnChange (boolean; optional):
    Determines whether the first option should be selected when value
    changes, `False` by default.

- selectFirstOptionOnDropdownOpen (boolean; optional):
    If set, the first option is selected when dropdown opens, `False`
    by default.

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

- splitChars (list of strings; optional):
    Characters that should trigger tags split, `[',']` by default.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (list of strings; optional):
    Controlled component value.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withPillsReorder (boolean; optional):
    If set, selected values can be reordered by dragging pills.
    Disabled when `disabled` or `readOnly` is set. @,default,False.

- withScrollArea (boolean; optional):
    Determines whether the options should be wrapped with
    `ScrollArea.AutoSize`, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## Custom DMC Components  
Create advanced custom Dash components with MantineHooks and MantineCore  
Category: Dash  

*New in dash-mantine-components 2.5.0*

You can now build custom Dash components that use Mantine the same way Dash Mantine Components does.

Previously, custom components built with the standard Dash component template had to bundle their own copy of Mantine.
Because of this, they could not access the `MantineProvider` used by DMC, which meant themes, styles, and context did
not work as expected.

DMC now exports `MantineHooks` and `MantineCore`, allowing custom components to use the same Mantine hooks, utilities,
and context as the built-in components. This enables a wide range of custom components, such as building advanced `Select`
or `MultiSelect` on top of Mantine’s [Combobox](https://mantine.dev/core/combobox/), while keeping theme and behavior consistent inside a Dash app.

For examples and step-by-step instructions, see the custom DMC components in this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components).

## Dash 4 Components  
How to style Dash 4 Core Components with a Mantine theme  
Category: Dash  

Dash 4 completely redesigned its core components for a consistent look and feel and added many new features. For a full 
overview of what changed, see the [Dash 4 release post](https://community.plotly.com/t/dash-core-components-gets-a-design-driven-refresh-with-dash-4/96322).

It's usually best to  stick with DMC components for a consistent design and UI. But some new DCC components such as `dcc.Dropdown` 
and the `dcc.Slider` include features you won’t find in DMC so you might want to mix them in. 

This section shows how to style Dash 4 components to match a Mantine theme in light and dark mode.

### Dash 4 Accent Color

The accent for Dash 4 components is controlled by a CSS variable so it's easy to change. The value can be any valid CSS color.

This example changes the default purple color to your Mantine primary color:

```python
style={
    "--Dash-Fill-Interactive-Strong": "var(--mantine-primary-color-filled)"
}
```


### Dark Mode Support

Dash 4 components do not include built-in dark mode support. You can enable light and dark mode by mapping Dash CSS
variables to Mantine theme variables.  The following is the CSS used in these docs.

Add the following CSS to `assets/`:

```css
.dmc {
    --Dash-Stroke-Strong: var(--mantine-color-default-border);
    --Dash-Stroke-Weak: var(--mantine-color-disabled);
    --Dash-Fill-Interactive-Strong: var(--mantine-primary-color-filled);
    --Dash-Fill-Inverse-Strong: var(--mantine-color-body);
    --Dash-Text-Primary: var(--mantine-color-text);
    --Dash-Text-Strong: var(--mantine-color-text);
    --Dash-Text-Disabled: var(--mantine-color-dimmed);
    --Dash-Text-Weak: var(--mantine-color-dimmed);
}

:root[data-mantine-color-scheme="dark"] .dmc {
    --Dash-Fill-Inverse-Strong: var(--mantine-color-dark-6);
    --Dash-Fill-Weak: rgba(255, 255, 255, 0.06);
    --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.08);
    --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.12);
    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.15);
}
```

Wrap your app layout with  `dmc` class:

```python
app.layout = dmc.MantineProvider(
    dmc.Container(
        [...],
        className="dmc"
    )
)
```

Dash 4 components inside this container will follow the Mantine color scheme and update automatically when the theme changes. 

> Toggle the theme switch in the header to see the examples below update between light and dark mode.





### Example 1: dcc.Dropdown

This example shows how a [dcc.Dropdown](https://dash.plotly.com/dash-core-components/dropdown) works well with other DMC inputs in grids or forms.

For MultiSelect (set `multi=True`) the menu also includes  Select all and Deselect all buttons. When multiple 
items are selected, it displays a count of selected items, preventing the input from resizing as selections grow.

The `dmc.InputWrapper` is used to add elements like `label`, `description`, and `error` to the `dcc.Dropdown`,
making it consistent with the other DMC inputs. The `htmlFor` prop links the label to the component for focus and accessibility.

```python
import dash_mantine_components as dmc
from dash import dcc

component = dmc.Card([
    dmc.SimpleGrid(
        [
            dmc.InputWrapper(
                dcc.Dropdown([f"option {i}" for i in range(100)],  value=["option 1", "option 2", "option 3"], multi=True, id="dcc-dropdown"),
                label="dcc.Dropdown",
                htmlFor="dcc-dropdown"
            ),
            dmc.NumberInput(
                label="dmc.NumberInput",
                value=30712,
                thousandSeparator=True,
                prefix="$ ",

            ),
            dmc.DatePickerInput(label="dmc.DatePickerInput", value="2025-12-05"),
        ],
        cols={"base": 1, "md": 3},
    ),
    ],
    withBorder=True,
    shadow="sm",
    radius="md",
    className="dmc"  # applies Mantine styles
)
```
### Example 2: dcc.Slider

The [dcc.Slider](https://dash.plotly.com/dash-core-components/slider) and `dcc.RangeSlider` includes optional numeric
input fields and automatic mark generation based on range and width.  There is also an option for a vertical slider.

This example shows the `dcc.RandeSlider` styled with a Mantine theme.

```python
import dash_mantine_components as dmc
from dash import dcc

component = dcc.RangeSlider(0, 200, value=[50, 150], className="dmc")
```
### Migrating to Dash v4

All component props remain unchanged, so upgrading should not introduce errors. You may notice layout and style differences due to the redesign.

Custom CSS written for Dash 3 components will not apply to Dash 4. The components were fully rewritten, so selectors have changed. Start with the styling approach shown here and customize as needed for your app.

## Dash Ag Grid  
Build high-performance, interactive data tables with Dash AG Grid and Dash Mantine Components. Learn how to apply light and dark grid themes and use DMC components as custom cell renderers and editors.  
Category: Dash  

### Dash AG Grid quickstart

If you're new to Dash AG Grid, check out the [official Dash AG Grid documentation](https://dash.plotly.com/dash-ag-grid) for detailed information.

Here are just some of the features enabled by default in the quickstart example below:

* Built-in theme pairs well with the Mantine default theme
* Columns are resizable (drag the column header edges)
* Rows are sortable (click header; shift-click for multi-sort)
* Smooth row animations during filtering and sorting
* Boolean values are rendered as checkboxes
* Columns can be reordered by dragging
* Columns can be pinned to either side of the grid



### Quickstart Demo

```bash
pip install dash-ag-grid

```

---

```python
import dash_mantine_components as dmc
import dash_ag_grid as dag
import pandas as pd
from dash import Dash

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv")

app = Dash()

component = dag.AgGrid(
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
)

app.layout=dmc.MantineProvider(component)

app.run(debug=True)


```


### Explore More Grid Features

Be sure to check out the [Dash AG Grid documentation](https://dash.plotly.com/dash-ag-grid) for even more features, such as:

- Column: resizing, reordering, pinning, spanning, and grouping.
- Row: sorting, selection (including with checkboxes), reordering, dragging, spanning, pinned rows, and full width rows.
- Data Manipulation and Display: pagination, cell data types with automatic inference, custom filtering, and cell editing,  value getters and formatters, conditional formatting, and CSV data export.
- Layout and Styling:  themes (Alpine, Material, Quartz) with light/dark options, customizable themes, and conditional styling for various elements. Custom icons and more.
- Other Features: tooltips in cells and headers, keyboard navigation, accessibility support, and localization. 
- Enterprise Features:  All the above features are free in AG Grid Community.  Additional advanced features are available with an AG Grid Enterprise licence.

The next sections show how to apply AG Grid themes that match your Mantine light or dark theme, and how to use DMC
components as custom cell renderers and editors. 


### Theming: Light and Dark Mode

#### Dash AG Grid ≥ v33

Dash AG Grid v33+ introduced a new theming API that makes it much easier to style the grid.

More details and examples are available in the [dash-ag-grid documentation](https://dash.plotly.com/dash-ag-grid/styling-themes).
If you are upgrading from an earlier version, see the [migration guide](https://dash.plotly.com/dash-ag-grid/migration-guide).

In earlier versions of dash-ag-grid, the grid theme was set using the `className` prop. Switching between light and
dark mode typically required updating `className` in a callback, which caused the grid to re-render and often resulted
in visible lag.

With v33+, the same built-in themes are still available, but they are applied through the new `theme` API instead
of `className`. Theme values can be customized using any valid CSS values, and using CSS variables works well for light and
dark mode support.  See also the [Ag Grid documentation](https://www.ag-grid.com/react-data-grid/theming-colors/) for more information.

Below are two simple examples.

Example 1: No callback

This example uses a built-in light theme and applies Mantine CSS variables for background and text colors. When the app 
theme changes, the grid updates automatically. No callback is required.

```python
# dash-ag-grid >= 33.3.3
import dash_ag_grid as dag
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv")

theme =  {
    "function": (
        "themeQuartz.withParams({"        
           "backgroundColor: 'var(--mantine-color-body)', "
           "foregroundColor: 'var(--mantine-color-text)', "
        "})"
    )
}

component = dag.AgGrid(
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in ["athlete", "country", "sport", "year"]],
    defaultColDef={"flex": 1, "filter": True},
    dashGridOptions={
        "theme": theme,
        "rowSelection": {"mode": "multiRow"}
    },
)
```
Example 2: Callback to switch built-in theme

Because the first example is based on a light theme, some elements such as scrollbars may not appear correctly in dark mode.

This example switches between the light and dark variants of the built-in Quartz theme. It also demonstrates additional
customization using the `theme` prop to set fonts and accent colors.

```python
# dash-ag-grid >= 33.3.3
import dash_ag_grid as dag
from dash import clientside_callback, Input, Output, html
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv")

theme =  {
    "function": (
        "themeQuartz.withParams({"        
        "accentColor: 'var(--mantine-primary-color-filled)', "
        "fontFamily: 'var(--mantine-font-family)', "
        "headerFontWeight: 'bold'"
        "})"
    )
}

# Theme switch in the dmc-docs header:
# dmc.ColorSchemeToggle(
#     lightIcon=DashIconify(icon="radix-icons:sun", width=20),
#     darkIcon=DashIconify(icon="radix-icons:moon", width=20),
#     variant="light",
#     color="gray",
#     id="docs-color-scheme-switch",
# )

component = html.Div([
    dag.AgGrid(
        id="theme-color-scheme33",
        rowData=df.to_dict("records"),
        columnDefs=[{"field": i} for i in ["athlete", "country", "sport", "year"]],
        defaultColDef={"flex": 1, "filter": True},
        dashGridOptions={
            "theme": theme,
            "rowSelection": {"mode": "multiRow"}
        },
    ),
])


clientside_callback(
    """
    (colorScheme) => {
        document.documentElement.setAttribute(
            'data-ag-theme-mode',
            colorScheme
        );
        return window.dash_clientside.no_update;
    }
    """,
    Input("docs-color-scheme-switch", "computedColorScheme"),
)
```
#### Dash AG Grid < v33

Before dash-ag-grid v33, the grid theme was set using the `className` prop. Four built-in themes were available, each with light and dark variants.

For example, to apply the Alpine theme:

* Light mode: `className="ag-theme-alpine"` (default)
* Dark mode: `className="ag-theme-alpine-dark"`

Switching between light and dark mode required updating the `className` prop in a callback.

For more details on available themes and customization options, see the [Dash AG Grid styling guide](https://dash.plotly.com/dash-ag-grid/styling-themes) or the [AG Grid v31.3 theme documentation](https://www.ag-grid.com/archive/31.3.0/react-data-grid/themes/).

Here is an example of the callback:

```python
# Example for dash-ag-grid<=33.0.0
import dash_ag_grid as dag
import pandas as pd
from dash import callback, Input, Output

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv")

component = dag.AgGrid(
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
    id="theme-switch-dag31"
)

@callback(
    Output("theme-switch-dag31", "className"),
    Input("docs-color-scheme-switch", "checked")
)
def update_theme(switch_on):
    return "ag-theme-alpine-dark" if switch_on else "ag-theme-alpine"
```

###  Custom Cell Renderers with DMC

For an introduction to [dash-ag-grid Cell Renderers](https://dash.plotly.com/dash-ag-grid/cell-renderer-components) refer to the dash documentation.

A cell renderer is a JavaScript function that returns a component to customize the cell content, rather
than displaying simple text.  You can use DMC components as custom cell renderers.

Key concepts:

* Define the cell renderer function in a `.js` file in  `/assets/` under `window.dashAgGridComponentFunctions` namespace. Dash registers these components with the grid.
* Set `cellRenderer` to the function name.
* Pass extra props to the function with `cellRendererParams`.


```js
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.MyFunction = function (props) {
   // define your cell renderer here
}
```



Want help writing these custom cell render functions? See [Using AI to Generate Functions](/functions-as-props#using-ai-to-generate-javascript-functions) for how to describe the logic in plain English or Python and convert it to JavaScript.



#### Example 1:  Card

This example displays grid data in a DMC `Card` in cells. The card layout is defined in a `.js` file in the `/assets` folder, with
the function named `DMC_Card`.


```python

from dash import callback, Input, Output
import dash_ag_grid as dag
import pandas as pd

data = {
    "stats": ["Revenue", "EBITDA", "Net Income"],
    "results": ['$13,120,000','$1,117,000', '$788,000'],
    "change": [10.1, -22.1, 18.6],
    'comments': ['Enter your comments here...', '', '']
}
df = pd.DataFrame(data)

columnDefs = [
    {
        "headerName": "",
        "cellRenderer": "DMC_Card",
    },
    {
        "field": "comments",
        "editable": True,
        "cellEditorPopup": True,
        "cellEditor": "agLargeTextCellEditor",
        "flex": 1
    },
]

component = dag.AgGrid(
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    dashGridOptions={"rowHeight": 120},
    id="dag-dmc-card-grid",
)


@callback(
    Output("dag-dmc-card-grid", "className"),
    Input("docs-color-scheme-switch", "computedColorScheme")
)
def update_theme(color):
    return "ag-theme-alpine-dark" if color=="dark" else "ag-theme-alpine"
```

```javascript

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.DMC_Card = function (props) {
    return React.createElement(
        window.dash_mantine_components.Card,
        {
            withBorder: true,
            m: 4,
        },
        React.createElement(
            window.dash_mantine_components.Text,
            {c:"dimmed", tt: "uppercase", fw:700},
            props.data.stats
        ),
        React.createElement(
            window.dash_mantine_components.Text,
            {size: "lg"},
            props.data.results
        ),
        React.createElement(
            window.dash_mantine_components.Text,
            {size: "sm", c: (props.data.change > 0) ? "green" : "red"},
            props.data.change + "%"
        )
    );
};
```




#### Example 2: Buttons

This example shows how to place interactive buttons inside grid cells. The `DMC_Button` is defined in a `.js` file in
`/assets` is used in the `cellRenderer` prop. You can pass `Button` props (color, icon, variant, etc.) using 
`cellRendererParams` per column.

Here’s an example for the `"buy"` column:

```python
columnDefs = [
    {
        "field": "buy",
        "cellRenderer": "DMC_Button",
        "cellRendererParams": {
            "variant": "outline",
            "leftIcon": "ic:baseline-shopping-cart",
            "color": "green",
            "radius": "xl"
        },
    },
    #  other columns...

]


```


```python

import json
import dash_ag_grid as dag
from dash import html, dcc, Input, Output, callback
import pandas as pd
import dash_mantine_components as dmc
import dash_iconify

data = {
    "ticker": ["AAPL", "MSFT", "AMZN", "GOOGL"],
    "company": ["Apple", "Microsoft", "Amazon", "Alphabet"],
    "price": [154.99, 268.65, 100.47, 96.75],
    "buy": ["Buy" for _ in range(4)],
    "sell": ["Sell" for _ in range(4)],
    "watch": ["Watch" for _ in range(4)],
}
df = pd.DataFrame(data)

columnDefs = [
    {
        "headerName": "Stock Ticker",
        "field": "ticker",
        "minWidth": 100
    },
    {"headerName": "Company", "field": "company", "filter": True, "minWidth": 50},
    {
        "headerName": "Last Close Price",
        "type": "rightAligned",
        "field": "price",
        "valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
        "minWidth": 100
    },
    {
        "field": "buy",
        "cellRenderer": "DMC_Button",
        "cellRendererParams": {
            "variant": "outline",
            "leftIcon": "ic:baseline-shopping-cart",
            "color": "green",
            "radius": "xl"
        },
        "minWidth": 100
    },
    {
        "field": "sell",
        "cellRenderer": "DMC_Button",
        "cellRendererParams": {
            "variant": "outline",
            "leftIcon": "ic:baseline-shopping-cart",
            "color": "red",
            "radius": "xl"
        },
        "minWidth": 100
    },
    {
        "field": "watch",
        "cellRenderer": "DMC_Button",
        "cellRendererParams": {
            "rightIcon": "ph:eye",
        },
        "minWidth": 100
    },
]

component = html.Div(
    [
        dag.AgGrid(
            id="dag-dmc-btn-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="autoSize",
        ),
        dmc.Text(id="dag-dmc-btn-value-changed"),
    ],
)


@callback(
    Output("dag-dmc-btn-value-changed", "children"),
    Input("dag-dmc-btn-grid", "cellRendererData"),
)
def showChange(n):
    return json.dumps(n)


@callback(
    Output("dag-dmc-btn-grid", "className"),
    Input("docs-color-scheme-switch", "computedColorScheme")
)
def update_theme(color):
    return "ag-theme-alpine-dark" if color=="dark" else "ag-theme-alpine"
```

```javascript

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.DMC_Button = function (props) {
    const {setData, data} = props;

    function onClick() {
        setData();
    }
    let leftIcon, rightIcon;
    if (props.leftIcon) {
        leftIcon = React.createElement(window.dash_iconify.DashIconify, {
            icon: props.leftIcon,
        });
    }
    if (props.rightIcon) {
        rightIcon = React.createElement(window.dash_iconify.DashIconify, {
            icon: props.rightIcon,
        });
    }
    return React.createElement(
        window.dash_mantine_components.Button,
        {
            onClick,
            variant: props.variant,
            color: props.color,
            leftSection: leftIcon,
            rightSection: rightIcon,
            radius: props.radius,
            style: {
                margin: props.margin,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            },
        },
        props.value
    );
};
```



###  Custom Cell editors with DMC

Dash AG Grid includes several [built-in cell editors](https://dash.plotly.com/dash-ag-grid/provided-cell-editors), such as:
- Text Cell Editor
- Large Text Cell Editor
- Select Cell Editor
- Rich Select Cell Editor (AG Grid Enterprise)
- Number Cell Editor
- Date Cell Editor
- Checkbox Cell Editor

These editors are easy to use and require no extra JavaScript. But if you need more control or want to use DMC components
as cell editors, you can create a custom cell editor.

The example below uses a generic editor function that works with any DMC component. Just copy the `.js` file into your app’s `/assets` folder to use it.
(Thanks to Dash community member [@BSd3v](https://github.com/BSd3v) for creating this!)

Then in your dash app you can pass a component written in Python to the function using the `cellEditorParams` prop:

```python
columnDefs = [
    {
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        "cellEditorParams": {
            "component": dmc.Select(data=["A", "B", "C"])
        }
    },
    
]
```


#### Example: DatePickerInput, TagsInput, Select 

This example shows how to use the following DMC components as custom cell editors:

* `dmc.DatePickerInput`
* `dmc.TagsInput`
* `dmc.Select`

Note: Set `cellEditorPopup=True` for any editor that displays dropdowns, popovers, or calendars. This prevents clipping inside the grid.



```python
from dash import callback, Input, Output
import dash_mantine_components as dmc
import dash_ag_grid as dag
import pandas as pd

now = "2025-12-30"

df = pd.DataFrame({
    'Column 1': [1, 2, 3, 4, 5, 6],
    'DatePickerInput': [now, now, now, now, now, now],
    'TagsInput': [['A']] * 6,  # Note TagsInput values must be a list
    'Select': ['A', 'B', 'C', 'A', 'B', 'C']
})

columnDefs = [
    { "field": "Column 1", "headerName": "id", "maxWidth": 50},
    {
        "field": "DatePickerInput",
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component': dmc.DatePickerInput(valueFormat="YYYY-MM-DD")},
        'cellEditorPopup': True,
    },
    {
        "field": "TagsInput",
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component': dmc.TagsInput(data=["A", "B", "C"])},
        'cellEditorPopup': True,
        "flex": 1
    },
    {
        "field": "Select",
        'cellEditor': {'function': 'AllFunctionalComponentEditors'},
        'cellEditorParams': {'component': dmc.Select(data=["A", "B", "C"])},
        'cellEditorPopup': True,
        "flex": 1
    },
]


component = dag.AgGrid(
    id='dag-dmc-cell-editor',
    columnDefs=columnDefs,
    rowData=df.to_dict('records'),
    defaultColDef={'editable': True, "minWidth": 150},
    dashGridOptions={'singleClickEdit': True}
)


@callback(
    Output("dag-dmc-cell-editor", "className"),
    Input("docs-color-scheme-switch", "computedColorScheme")
)
def update_theme(color):
    return "ag-theme-alpine-dark" if color=="dark" else "ag-theme-alpine"
```

```javascript
var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

const {useRef, createElement, useEffect, useCallback, forwardRef, useMemo} = React

// Use this with DMC components
dagfuncs.AllFunctionalComponentEditors = forwardRef(({ value, ...params }, ref) => {
    const comp = params.colDef.cellEditorParams.component;
    const node = useRef(params.api.getRowNode(params.node.id));
    const newValue = useRef(value);
    const escaped = useRef(null);
    const editorRef = useRef(null);

    const handleStop = ({ event, ...params }) => {
        setTimeout(() => {
            if (!escaped.current) {
                node.current.setDataValue(params.column.colId, newValue.current);
            }
        }, 1);
    };

    if (params.colDef.cellEditorPopup) {
        comp['props']['style'] = { ...comp.props?.style, width: params.column.actualWidth - 2 };
    }

    const setProps = (propsToSet) => {
        if ('value' in propsToSet) {
            newValue.current = propsToSet.value;
        }
    };

    const handleKeyDown = ({ key, ...event }) => {
        if (key == "Escape") {
            escaped.current = true;
        }
    };

    useEffect(() => {
        params.api.addEventListener('cellEditingStopped', handleStop);
        document.addEventListener('keydown', handleKeyDown);
        params.colDef.suppressKeyboardEvent = (params) => params.editing && params.event.key != 'Tab';
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
            delete params.colDef.suppressKeyboardEvent;
            params.api.removeEventListener('cellEditingStopped', handleStop);
        };
    }, []);

    useEffect(() => {
        if (editorRef.current) {
            if (editorRef.current.querySelector('input')) {
                editorRef.current.querySelector('input').focus();
            } else {
                editorRef.current.focus()
            }
        }
    }, [editorRef.current]);

    const el = useMemo(() =>
        createElement(
            'div',
            { ref: editorRef, tabIndex: 0 },
            createElement(window[comp['namespace']][comp['type']], { ...comp.props, setProps, value })
        ),
    []);

    return el;
});
```

## Dash Iconify  
Add icons to your dash apps the simplest and the most efficient way.  
Category: Dash  

### Why Use This?

DashIconify fetches only the icons you need. You can use icons from over 100 icon sets without loading all of them.
Search [here](https://icon-sets.iconify.design/) for the desired icon and use DashIconify to use that in your dash app.

[Source Code](https://github.com/snehilvj/dash-iconify)

### Installation

```bash
pip install dash-iconify
```

```bash
poetry add dash-iconify
```

### Simple Usage

DashIconify component can be customized with `width`, `height`, `rotate` and `flip` props.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    [
        DashIconify(icon="ion:logo-github", width=30, rotate=1, flip="horizontal"),
        DashIconify(icon="flat-ui:settings", width=30),
        DashIconify(
            icon="feather:info",
            color=dmc.DEFAULT_THEME["colors"]["yellow"][5],
            width=30,
        ),
    ]
)
```
### Usage With DMC

Although dash-iconify can be used with any dash components library, be it, dash-mantine-components, dash-core-components
or dash-bootstrap-components, DMC provides direct hooks for adding icons to enhance the look and feel of your apps.

```python
from datetime import date

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    [
        dmc.DatePickerInput(
            value=date.today(), leftSection=DashIconify(icon="clarity:date-line")
        ),
        dmc.Alert(
            icon=DashIconify(icon="radix-icons:cross-circled"),
            children="There seems to be an error!",
            color="red",
        ),
        dmc.Button(
            "Open Settings",
            leftSection=DashIconify(icon="carbon:settings-check", width=20),
        ),
    ]
)
```

## Dash Loading States  
Learn how to show loading states in Dash apps using DMC components like Loader, Skeleton, and LoadingOverlay. Includes integration with dcc.Loading and examples of custom CSS-based spinners.  
Category: Dash  

### DMC Loading components

DMC has several components that are often used to indicate a component's loading state:

- [Loader](/components/loader): A basic visual spinner (oval, bars, or dots) for simple loading states. Can be customized with size, color, and type.

- [LoadingOverlay](/components/loadingoverlay): Overlays a parent element with a loader, disabling user interaction to indicate a loading state, commonly used for forms.
- [Progress](/components/progress): A progress bar that shows task status and completion percentage. Customizable with value, color, label, and sections.
- [Button](/components/button) and [ActionIcon](/components/actionicon) (`loading` prop): Integrates a `Loader` into buttons and icons.  Disables Button while `loading=True`.
- [Skeleton](/components/skeleton): Creates placeholders resembling content layout to give users a preview while loading, reducing perceived wait time.


### With dcc.Loading

For greater control over when the DMC loading components are displayed and for how long, use the `dcc.Loading` component from
`dash-core-components`. DMC components such as `Skeleton`, `Loader`, `LoadingOverlay` can be displayed in the `custom_spinner` prop.

You can configure options such as:  

- `delay_show`: Specifies the wait time before displaying the loading component. This helps prevent flickering for fast-loading content.  
- `delay_hide`: Defines how long the loading component remains visible after loading completes, creating a smoother transition between the placeholder and final content.  
- `target_components`: Determines which components trigger the loader to display. This makes the loading effect triggered only by specific components rather than  being triggered by any of the children.

Refer to the [Dash Documentation](https://dash.plotly.com/dash-core-components/loading) for more details.

Here is an example of `delay_hide` prop in `dcc.Loading` to prevent the `Skeleton` from showing for a very short time.

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

component = html.Div(
    [
        dcc.Loading(
            children=html.Div([
                dmc.Text("Initial data", id="dccloading-div"),
                dmc.Text("The data only takes 200ms to update, but `delay_hide` is set to 1000ms to prevent flashing.")
            ]),
            delay_hide=1000,
            custom_spinner = dmc.Skeleton(
                visible=True,
                h="100%"
            ),
        ),
        dmc.Button("Update!", id="dccloading-button"),
    ]
)

@callback(
    Output("dccloading-div", "children"),
    Input("dccloading-button", "n_clicks"),
    prevent_initial_call=True
)
def update_graph(n):
    time.sleep(.2)
    return f"Data updated {n} times"
```
### Custom CSS Loaders Using data-dash-is-loading


Dash automatically adds the attribute `data-dash-is-loading="true"` to components that are being updated in a callback.
You can use this attribute to apply custom loading indicators using CSS — no extra Python code or spinner components needed!


#### Basic Example

You can hide a component’s content and display a custom loader using just CSS:

```css
/* Hide the content while it's loading */
[data-dash-is-loading="true"] {
    visibility: hidden;
    position: relative;
}

/* Show a loader */
[data-dash-is-loading="true"]::before {
    content: "Loading...";
    visibility: visible;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
```


In your Dash layout:

```python
dmc.Text(id="output-id", className="my-output")
```

In your `assets/style.css`:

```css
.my-output[data-dash-is-loading="true"]::before {
    /* Custom loader styles */
}
```

Now, whenever `output-id` is being updated by a callback, your custom loader will appear in place of the original content.

### Example with 3 custom spinners

This example has 3 custom spinner defined in the `.css` file in `/assets`.  The different loaders are applied to the
component based on the `className`.



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


component = dmc.Stack([
    dmc.Title(" Dash Spinner Loader Showcase", order=2),

    dmc.Card([
        dmc.Select(
            label="Pulse Loader",
            placeholder="Choose an option...",
            data=["A", "B", "C"],
            id="dash-is-loading-input-1"
        ),
        dmc.Text(id="dash-is-loading-output-1", className="output-example-loading",  py="lg")
    ],
        className="pulse-loader",
        withBorder=True
    ),

    dmc.Card([
        dmc.Select(
            label="Ring Loader",
            placeholder="Choose an option...",
            data=["A", "B", "C"],
            id="dash-is-loading-input-2"
        ),
        dmc.Text(id="dash-is-loading-output-2", className="output-example-loading", py="lg")
    ], className="ring-loader", withBorder=True),

    dmc.Card([
        dmc.Select(
            label="Bounce Loader",
            placeholder="Choose an option...",
            data=["A", "B", "C"],
            id="dash-is-loading-input-3"
        ),
        dmc.Text(id="dash-is-loading-output-3", className="output-example-loading",  py="xl")
    ], className="bounce-loader"),


])

@callback(Output("dash-is-loading-output-1", "children"), Input("dash-is-loading-input-1", "value"))
def update_output1(value):
    time.sleep(2)
    return f"You selected: {value}"


@callback(Output("dash-is-loading-output-2", "children"), Input("dash-is-loading-input-2", "value"))
def update_output2(value):
    time.sleep(2)
    return f"You selected: {value}"


@callback(Output("dash-is-loading-output-3", "children"), Input("dash-is-loading-input-3", "value"))
def update_output3(value):
    time.sleep(2)
    return f"You selected: {value}"
```

```css

/* Output Base Hidden + Loader Target */
.output-example-loading[data-dash-is-loading="true"] {
    visibility: hidden;
    position: relative;
}
.output-example-loading[data-dash-is-loading="true"]::before {
    visibility: visible;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /* centers the spinner */
    content: "";
}

/* pulse loader */
.pulse-loader .output-example-loading[data-dash-is-loading="true"]::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--mantine-color-blue-filled);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    animation: pulseAnim 1s infinite ease-in-out;
    visibility: visible;
}

@keyframes pulseAnim {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
}

/* Loader: Ring */
.ring-loader .output-example-loading[data-dash-is-loading="true"]::before {
    content: "";
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--mantine-color-green-filled);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: ringSpin 1s linear infinite;
    visibility: visible;
}

@keyframes ringSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}



/* Loader: Bounce Dots */
.bounce-loader .output-example-loading[data-dash-is-loading="true"]::before {
    content: "";
    display: inline-block;
    width: 60px;
    height: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.bounce-loader .output-example-loading[data-dash-is-loading="true"]::before {
    background: transparent;
}

.bounce-loader .output-example-loading[data-dash-is-loading="true"]::before {
    content: "● ● ●";
    color: var(--mantine-color-orange-filled);
    font-size: 22px;
    letter-spacing: 6px;
    animation: dotBounce 1.2s infinite ease-in-out;
}

/* Animation for Dots */
@keyframes dotBounce {
    0%, 80%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.8);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}
```

## Functions as Props  
Introduction to using JavaScript functions with Dash Mantine Components  
Category: Dash  

### How Function Props Work

In JavaScript libraries like [Mantine](https://mantine.dev), some component props accept functions — for example, to
dynamically format a value, render custom content, or control behavior. Here is an example of formating the label of the `Slider`

**In Mantine**
```js
<Slider label={(value) => `${value} °C`}  />
```

However, in a Dash app, you can’t pass a function to the component because functions don't serialize over the network.

To support this safely, Dash Mantine Components allows you to pass named references to JavaScript functions instead.

You write your function in a `.js` file in the `/assets` folder, and refer to it by name in Python:

**app.py**
```python
dmc.Slider(label={"function": "celsiusLabel"}, value=40)
```

**assets/formatCelsius.js**
```js
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.celsiusLabel = function(value) {
  return `${value} °C`;
};
```

DMC knows how to call this function in the browser for props like `label`.


### Example: Formatting a Slider label

See more examples in the [Slider section](/components/slider) section.


```python
import dash_mantine_components as dmc

component = dmc.Slider(label={"function": "celsiusLabel"}, value=40, labelAlwaysOn=True)
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.celsiusLabel = (value) => `${value} °C`;
```



### Function Props in Mantine Components

Not all Mantine props accept functions — only specific ones are designed to.

Here are some examples:

* `Slider`: `label`
* `Select`: `renderOption`
* `BarChart`: `getBarColor`
* `ScatterChart`: `valueFormat`

For a full list of supported function props in Dash Mantine Components, see the table at the bottom of this page.

Each function must match the structure expected by Mantine. To learn what arguments each one receives — and how they’re
used — refer to the [Mantine documentation](https://mantine.dev). You’ll also find complete working examples in the relevant sections of the DMC docs.






### Passing Extra Options

You can pass extra options from Python to customize how the JavaScript function behaves.

In this example, the same function can be used to format the label using either Celsius or Fahrenheit.

.py
```python
dmc.Slider(
    label={
        "function": "formatTemperature",
        "options": {"unit": "F"}
    },
    # other props
)
```

.js
```js
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatTemperature = function (value, { unit }) {
  if (unit === "F") {
    return `${(value * 9 / 5 + 32).toFixed(1)} °F`;
  }
  return `${value.toFixed(1)} °C`;
};
```

###  Returning a Component

Its also possible to return React components.  To do this:

- Use `React.createElement()` (no JSX).
- access DMC components by using  `window.dash_mantine_components`.
- If you've imported other component libraries in your Dash app, you can use them too. For example  `window.dash_iconify`, `window.dash_core_components`, etc.

See examples of including icons in the dropdown data in the `Select` section of the docs.

### Example: Components and passing extra options

This example shows
  - Returning a component.  Note the dropdown data is formated as a `Badge`.
  - Passing extra options to the JavaScript function.  The colors for each badge are passed to the function from the dash app.


```python
import dash_mantine_components as dmc


colors = {
    "Pandas": "grape",
    "NumPy": "blue",
    "Matplotlib": "teal",
    "Plotly": "violet",
}

component = dmc.Select(
    label="Choose a library",
    placeholder="Pick one",
    data=list(colors.keys()),
    renderOption={
        "function": "renderBadge",
        "options": {"colors": colors},
    },
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderBadge = function ({option}, {colors}) {
  return React.createElement(
    dmc.Badge,
    {
      color: colors[option.value] || "gray",
      variant: "light",
      radius: "sm",
    },
    option.value
  );
};
```




### Using Other JavaScript Libraries
You can use third-party JavaScript libraries inside your Dash functions — as long as you include them correctly in your app.

Here is an example of including the `dayjs` library as an external script:

```python
app = Dash(exteral_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])
```

.js
```json
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.excludeDate = function(dateStr) {
   const date = dayjs(dateStr, "YYYY-MM-DD");
   return date.isValid() && date.day() !== 5;
}
```

### Use AI to Help Write JavaScript

Most Dash users are more comfortable writing Python than JavaScript. You can use AI tools like ChatGPT to generate the
JavaScript functions needed for Dash Mantine Components.

While it's possible to describe the logic in plain English, in practice, writing the function in Python and asking the 
AI to translate it tends to produce more accurate and usable results. It gives the model a clear structure and avoids
ambiguity, especially for functions with conditions, formatting rules, or custom output.

#### Prompt Template
When asking AI to generate a function:

1. State the function name.
2. Mention it’s for Dash Mantine Components.
3. Ask it to assign the function to dmcfuncs.functionName.
4. Provide the Python logic (or natural language)
5. Always include this global header:
    ```
    var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
    ```
6. If the function returns a component, mention:
   - Use `React.createElement`
   - Don’t use JSX
   - Use `window.dash_mantine_components`


#### Example 1:  Simple function

AI Prompt:

> Write a JavaScript function for Dash Mantine Components named `formatUsd`. Assign it to `dmcfuncs.formatUsd`. In Python, the function would be:
>
> ```python
> def formatUsd(value):
     return f"${value:,.2f}"
> ```

AI Output:

```js
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatUsd = function (value) {
  return `$${new Intl.NumberFormat("en-US", { minimumFractionDigits: 2 }).format(value)}`;
};
```



#### Example 2 Function with options

AI Prompt:

> Write a JavaScript function for Dash Mantine Components named `formatTemp`. Assign it to `dmcfuncs.formatTemp`. In Python, the function would be:
> ```python
> def formatTemp(value, unit="C"):
>    if unit == "F":
>        return f"{value * 9 / 5 + 32:.1f} °F"
>    return f"{value:.1f} °C"
>```

AI Output:

```js
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatTemp = function (value, { unit }) {
  if (unit === "F") {
    return `${(value * 9 / 5 + 32).toFixed(1)} °F`;
  }
  return `${value.toFixed(1)} °C`;
};
```

---

#### Example 3: Return a Component


AI Prompt

> Write a JavaScript function for Dash Mantine Components named `renderBadge`. Assign it to `dmcfuncs.renderBadge`. 
> This function returns a React component. Use `React.createElement`. Do not use JSX. Use `dmc = window.dash_mantine_components`.
> In Python, the function would be:

> ```python
> def renderBadge(option):
>    return dmc.Badge(
>        option["value"],
>        color= "red" if option["value"] == "A" else "blue",
>        variant="light",
>        radius="sm"        
>    )
> ```


AI Output

```js
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderBadge = function ({ option }) {
  return React.createElement(
    dmc.Badge,
    {
      color: option.value === "A" ? "red" : "blue",
      variant: "light",
      radius: "sm"
    },
    option.value
  );
};

```

Supported props in V2

The following props support JavaScript functions in Dash Mantine Components version >=2.0.0.
If there’s a Mantine prop you’d like to see added, feel free to [open an issue on GitHub.](https://github.com/snehilvj/dash-mantine-components/issues)

| Component        | Props                                     |
|------------------|-------------------------------------------|
| Slider           | label, scale                              |
| RangeSlider      | label, scale                              |
| Select           | renderOption, filter                      |
| MultiSelect      | renderOption, filter                      |
| TagsInput        | renderOption, filter                      |
| DatePickerInput  | disabledDates                             |
| DateInput        | disabledDates                             |
| DateTimePicker   | disabledDates                             |
| MonthPickerInput | disabledDates                             |
| YearPickerInput  | disabledDates                             |
| BarChart         | getBarColor, valueFormatter, tooltipProps |
| AreaChart        | valueFormatter, tooltipProps              |
| LineChart        | valueFormatter, tooltipProps              |
| CompositeChart   | valueFormatter, tooltipProps              |
| BubbleChart      | valueFormatter, tooltipProps              |
| ScatterChart     | valueFormatter, tooltipProps              |





Additional Supported props in V2.1.0


| Component        | Props                                                             |
|------------------|-------------------------------------------------------------------|
| AutoComplete     | renderOption, filter                                              |
| DatePickerInput  | getYearControlProps, getMonthControlProps, getDayProps, renderDay |
| DateInput        | getYearControlProps, getMonthControlProps, getDayProps, renderDay |
| DateTimePicker   | getYearControlProps, getMonthControlProps, getDayProps, renderDay |
| MonthPickerInput | getYearControlProps, getMonthControlProps                         |
| YearPickerInput  | getYearControlProps                                               |
| Tree             | renderNode                                                        |


Additional Supported props in V2.4.0

| Component                                                                 | Props                                              |
| ------------------------------------------------------------------------- | -------------------------------------------------- |
| AreaChart, BarChart, BubbleChart, CompositeChart, LineChart, ScatterChart | xAxisProps, yAxisProps, gridProps, rightYAxisProps |
| BubbleChart                                                               | zAxisProps                                         |

## debounce prop  
Learn how to use the debounce prop in Dash Mantine Components to control when input values update. Reduce callback load and improve performance in text inputs, dropdowns, pickers, and more.  
Category: Dash  

### About the debounce prop


The `debounce` prop delays the update of a component's value until the user stops interacting, reducing callback
frequency for inputs.


To control how often the input's value is updated while the user is typing, use the `debounce` prop:

- `debounce=False` Is the default and it will update as the user interacts with the input.
- Set `debounce=True` to update the value only when the user finishes typing and moves focus away (i.e. on blur).
- Set `debounce=<milliseconds>` to update the value after a specified delay from the user's last keystroke. For example,
`debounce=300` will wait 300 milliseconds after the user stops typing before updating the value.


####  debounce=False
```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(label="Enter a time", id="timepicker-usage"),
        dmc.Text(id="out-timepicker")
    ],
)

@callback(
    Output("out-timepicker", "children"),
    Input("timepicker-usage", "value")
)
def update(value):
    return f"You entered: {value}"
```
####  debounce=True
```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(
            label="Enter a time",
            debounce=True,
            id="timepicker-debounce"
        ),
        dmc.Text(id="out-timepicker-debounce")
    ],
)

@callback(
    Output("out-timepicker-debounce", "children"),
    Input("timepicker-debounce", "value")
)
def update(value):
    return f"You entered: {value}"
```
#### debounce=1000
```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(
            label="Enter a time",
            debounce=1000,
            id="timepicker-debounce-ms"
        ),
        dmc.Text(id="out-timepicker-debounce-ms")
    ],
)

@callback(
    Output("out-timepicker-debounce-ms", "children"),
    Input("timepicker-debounce-ms", "value")
)
def update(value):
    return f"You entered: {value}"
```
### Example with TextInput

This example uses `debounce=True`.  Note that the comments are updated only after the user has
finished entering data.

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

component = dmc.Stack(

    [
        dmc.TextInput(
            id="debounce-text",
            label="Enter your comments",
            debounce=True
        ),
        dmc.Text(id="debounce-text-output"),
    ],
)


@callback(
    Output("debounce-text-output", "children"),
    Input("debounce-text", "value"),
)
def update_output(comments):
    if not comments:
        return ""
    return f"Thank you for your feedback: {comments}"
```
### Supported Components
The `debounce` prop is supported by many DMC input components, including:

- TextInput

- Textarea

- NumberInput

- PasswordInput

- JsonInput

- Select, MultiSelect, Autocomplete

- DateInput, DateTimePicker, DatePickerInput

- MonthPickerInput, YearPickerInput, TimeInput, TimePicker

- RichTextEditor


For the `Slider` and `RangeSlider`  use [updatemode](/components/slider#update-mode)

### Usage Tips

- Use `debounce=True` for forms where you only care about the final value after the user finishes typing, for example, email fields, names, comments.

- Use `debounce=300` or higher for search boxes or filters that trigger live updates (for example,  querying a table or filtering a plot). This prevents the app from firing a callback on every keystroke and keeps things responsive.

- Combine with `n_submit` or `n_blur` if you want finer control over when inputs send updates.

## persistence props  
Dash Mantine Components support Dash’s built-in persistence system, allowing component values to be retained across page reloads, tabs, or user sessions — without writing extra callbacks.  
Category: Dash  

### Overview: Persistence in Dash

When a user interacts with a component (like typing in a `TextInput` or selecting a `Date`), its value is
stored in local memory (or optionally, in localStorage or sessionStorage). If the user refreshes the page, navigates
away and returns, or reopens the tab, that value can be restored automatically.

This helps maintain app state with minimal effort.

### How to Enable Persistence

You can enable persistence on any supported component by setting these props:

```python
persistence=True
persisted_props=["value"]  # or other prop(s) to persist. Typically use the default.
persistence_type="local"   # "local", "session", or "memory" (default is "local")
id="component-id"  # required for persistence to work
```

### Example: Persistent TextInput
Try typing something in each box, then refresh the browser to see which one remembers your input.
    
```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.TextInput(
            id="persisted-input", # id required-  persistence only works on components with an id
            label="With persistence",
            placeholder="This will stick",
            persistence=True,
        ),
        dmc.TextInput(
            id="non-persisted-input",
            label="Without persistence",
            placeholder="This will reset",
        ),
    ],
)
```
### Important Notes

* In DMC, the `persisted_prop` is already set with an appropriate default for each component, so you don’t need to specify it.
* An `id` is required — persistence will not work without one.
* Due to [an open issue in Dash](https://github.com/plotly/dash/issues/3147), persistence does not work if your layout is simply a list of components. The layout must be a single component (or a function returning one).

This **does work**:

```python
app.layout = dmc.MantineProvider(
    dmc.Container([
        dmc.Select(id="select", data=["A", "B", "C"], persistence=True)
    ])
)
```

This **will not work**:

```python
app.layout = dmc.MantineProvider(
    [
        dmc.Select(id="select", data=["A", "B", "C"], persistence=True)
    ]
)
```

### Supported DMC Components

Persistence is available for all stateful inputs in DMC — including:

* `TextInput`, `Textarea`, `PasswordInput`, `NumberInput`
* `Select`, `MultiSelect`, `TagsInput`
* `Checkbox`, `RadioGroup`, `Switch`
* `DateInput`, `DateTimePicker`, `TimeInput`, etc.

To check if a specific component supports persistence, look for the `persistence`, `persisted_props`, and
`persistence_type` props in the Keyword Arguments section of its documentation.



### Reference

For more details see the [Persistence section in the Dash documentation.](https://dash.plotly.com/persistence)

- `persistence` (boolean | string | number; optional): Any truthy value will enable persistence for this component. Persistence is keyed to the combination of component id and this persistence value, so if this value changes you will see different persisted settings. For example, perhaps you have dropdowns for country and city, and you know that your users want to see the same country pre-filled as the last time they used your app - you can just set persistence=True on the country dropdown. But for the city they would like to see the same one as the last time they chose that country - just set persistence=country_name (where country_name is the value of the chosen country) on the city dropdown and we'll save one preferred city for each country.

- `persistence_type` ('local', 'session', or 'memory'; default 'local'): Where persisted user changes will be stored:

  - `memory`: only kept in memory, reset on page refresh. This is useful for example if you have a tabbed app, that deletes the component when a different tab is active, and you want changes persisted as you switch tabs but not after reloading the app.
  - `local`: uses window.localStorage. This is the default, and keeps the data indefinitely within that browser on that computer.
  - `session`: uses window.sessionStorage. Like 'local' the data is kept when you reload the page, but cleared when you close the browser or open the app in a new browser tab.

- `persistence_props` (list of strings; optional): These are the props whose values will persist. Typically this defaults to all user-editable props, which in many cases is just one (ie 'value'). dash-table has many props users can edit, and all of them except 'data' are included here by default. Sometimes only a part of a prop is saved; this happens with table headers, which are only part of the columns prop. The corresponding persistence_props value is 'columns.name'.

## Accordion  
Use the Accordion and AccordionX components to toggle between hiding and showing large amount of content.  
Category: Data Display  

### Introduction

### Multiple Items

Set `multiple=True` to enable opening multiple items.

```python
import dash_mantine_components as dmc

dmc.Accordion(
    children=[...],
    multiple=True
)
```

### Custom Accordion Label

```python
import dash_mantine_components as dmc
from dash import html

characters_list = [
    {
        "id": "bender",
        "image": "https://img.icons8.com/clouds/256/000000/futurama-bender.png",
        "label": "Bender Bending Rodríguez",
        "description": "Fascinated with cooking, though has no sense of taste",
        "content": "Bender Bending Rodríguez, (born September 4, 2996), designated Bending Unit 22, and commonly "
        "known as Bender, is a bending unit created by a division of MomCorp in Tijuana, Mexico, "
        "and his serial number is 2716057. His mugshot id number is 01473. He is Fry's best friend.",
    },
    {
        "id": "carol",
        "image": "https://img.icons8.com/clouds/256/000000/futurama-mom.png",
        "label": "Carol Miller",
        "description": "One of the richest people on Earth",
        "content": "Carol Miller (born January 30, 2880), better known as Mom, is the evil chief executive officer "
        "and shareholder of 99.7% of Momcorp, one of the largest industrial conglomerates in the universe "
        "and the source of most of Earth's robots. She is also one of the main antagonists of the Futurama "
        "series.",
    },
    {
        "id": "homer",
        "image": "https://img.icons8.com/clouds/256/000000/homer-simpson.png",
        "label": "Homer Simpson",
        "description": "Overweight, lazy, and often ignorant",
        "content": "Homer Jay Simpson (born May 12) is the main protagonist and one of the five main characters of "
        "The Simpsons series(or show). He is the spouse of Marge Simpson and father of Bart, "
        "Lisa and Maggie Simpson.",
    },
]


def create_accordion_label(label, image, description):
    return dmc.AccordionControl(
        dmc.Group(
            [
                dmc.Avatar(src=image, radius="xl", size="lg"),
                html.Div(
                    [
                        dmc.Text(label),
                        dmc.Text(description, size="sm", fw=400, c="dimmed"),
                    ]
                ),
            ]
        )
    )


def create_accordion_content(content):
    return dmc.AccordionPanel(dmc.Text(content, size="sm"))


component = dmc.Accordion(
    chevronPosition="right",
    variant="contained",
    children=[
        dmc.AccordionItem(
            [
                create_accordion_label(
                    character["label"], character["image"], character["description"]
                ),
                create_accordion_content(character["content"]),
            ],
            value=character["id"],
        )
        for character in characters_list
    ],
)
```
### Customizing chevron

You can use [dash-iconify](/dash-iconify) to change the chevron icon.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

dmc.Accordion(
    chevron=DashIconify(icon="ant-design:plus-outlined"),
    disableChevronRotation=True,
    children=[...]
)
```

### With icons

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Accordion(
    disableChevronRotation=True,
    children=[
        dmc.AccordionItem(
            [
                dmc.AccordionControl(
                    "Personal Information",
                    icon=DashIconify(
                        icon="tabler:user",
                        color="var(--mantine-color-blue-6)",
                        width=20,
                    ),
                ),
                dmc.AccordionPanel("some content"),
            ],
            value="info",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl(
                    "Shipping Address",
                    icon=DashIconify(
                        icon="tabler:map-pin",
                        color= "var(--mantine-color-red-6)",
                        width=20,
                    ),
                ),
                dmc.AccordionPanel("some content"),
            ],
            value="addr",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl(
                    "Confirmation",
                    icon=DashIconify(
                        icon="tabler:circle-check",
                        color= "var(--mantine-color-green-6)",
                        width=20,
                    ),
                ),
                dmc.AccordionPanel("some content"),
            ],
            value="focus",
        ),
    ],
)
```
### Change transition

```python
import dash_mantine_components as dmc

dmc.Accordion(
    children=[...],
    transitionDuration=1000
)
```

### Default opened items

Provide a default value using the `value` prop.

```python
import dash_mantine_components as dmc

dmc.Accordion(
    children=[...],
    value="flexibility"
)
```

If `multiple` is `True`, then value will be a list:

```python
import dash_mantine_components as dmc

dmc.Accordion(
    children=[...],
    value=["flexibility", ]
)
```

```python
import dash_mantine_components as dmc

component = dmc.Accordion(
    value=["flexibility"],
    multiple=True,
    children=[
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Customization"),
                dmc.AccordionPanel(
                    "Colors, fonts, shadows and many other parts are customizable to fit your design needs"
                ),
            ],
            value="customization",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Flexibility"),
                dmc.AccordionPanel(
                    "Configure temp appearance and behavior with vast amount of settings or overwrite any part of "
                    "component styles "
                ),
            ],
            value="flexibility",
        ),
    ],
)
```
### Callbacks and State Management

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

component = html.Div(
    children=[
        dmc.Accordion(
            id="accordion-simple",
            value="customization",
            children=[
                dmc.AccordionItem(
                    [
                        dmc.AccordionControl("Customization"),
                        dmc.AccordionPanel(
                            "Colors, fonts, shadows and many other parts are customizable to fit your design needs"
                        ),
                    ],
                    value="customization",
                ),
                dmc.AccordionItem(
                    [
                        dmc.AccordionControl("Flexibility"),
                        dmc.AccordionPanel(
                            "Configure temp appearance and behavior with vast amount of settings or overwrite any "
                            "part of component styles "
                        ),
                    ],
                    value="flexibility",
                ),
            ],
        ),
        dmc.Text(id="accordion-state", mt=10),
    ]
)


@callback(Output("accordion-state", "children"), Input("accordion-simple", "value"))
def show_state(value):
    return value
```
### Compose control

You can add any additional elements that will be displayed next to `AccordionControl`, for example, you can add `ActionIcon` or `Menu`.
 This enables interaction with the element without affecting the opening or closing of the accordion item. In this
example, try clicking the heart icon.

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


def make_control(text, action_id):
    return dmc.Flex(
        [
            dmc.AccordionControl(text),
            dmc.ActionIcon(
                children=DashIconify(icon="tabler:heart"),
                color="yellow",
                variant="default",
                n_clicks=0,
                id={"index": action_id},
            ),
        ],
        justify="space-between",
    )


component = dmc.Accordion(
    id="accordion-compose-controls",
    chevronPosition="left",
    children=[
        dmc.AccordionItem(
            [
                make_control(f"Item {i}", f"action-{i}"),
                dmc.AccordionPanel(f"Content for AccordionItem {i}"),
            ],
            value=f"item-{i}",
        )
        for i in range(5)
    ],
)


@callback(Output({"index": MATCH}, "variant"), Input({"index": MATCH}, "n_clicks"))
def update_heart(n):
    if n % 2 == 0:
        return "default"
    return "filled"
```
### Disable collapse
By default, in single mode (`multiple=False`) the open item can always be toggled closed, which leaves the `Accordion`
fully collapsed. Set the `disableCollapse` prop to prevent this: once an item is open, clicking its control again is
a no-op, and the only way to change state is to open a different item. This is useful for settings panels, stepper-style
flows and FAQ pages where one section should always stay visible.

`disableCollapse` only prevents collapsing an already-open item – it does not force an item open on mount. To guarantee
that one item is open from the start, set the `value` prop. 

The prop has no effect when multiple is set, as multiple mode already allows any combination of opened and closed items.

```python
import dash_mantine_components as dmc

data = [
    {
        "emoji": "🍎",
        "value": "Apples",
        "description": "Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.",
    },
    {
        "emoji": "🍌",
        "value": "Bananas",
        "description": "Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.",
    },
    {
        "emoji": "🥦",
        "value": "Broccoli",
        "description": "Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.",
    },
]

component = dmc.Accordion(
    [
        dmc.AccordionItem(
            [
                dmc.AccordionControl(item["value"], icon=item["emoji"]),
                dmc.AccordionPanel(item["description"]),
            ],
            value=item["value"],
        )
        for item in data
    ],
    value="Apples",
    disableCollapse=True,
    order=3,
)
```
### Disabled Item

Set `disabled=True` in dmc.AccordionControl to disable it. 

```python
import dash_mantine_components as dmc

dmc.AccordionControl(children=[...], disabled=True)
```

### 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.



#### Accordion selectors

| Selector   | Static selector                | Description                                    |
|------------|---------------------------------|------------------------------------------------|
| root       | .mantine-Accordion-root         | Root element                                   |
| item       | .mantine-Accordion-item         | Accordion.Item root element                    |
| control    | .mantine-Accordion-control      | Accordion.Control root element                 |
| chevron    | .mantine-Accordion-chevron      | Accordion.Control chevron container element    |
| label      | .mantine-Accordion-label        | Accordion.Control label                        |
| icon       | .mantine-Accordion-icon         | Accordion.Control icon                         |
| itemTitle  | .mantine-Accordion-itemTitle    | Accordion.Control title (h2-h6) tag            |
| panel      | .mantine-Accordion-panel        | Accordion.Panel root element                   |
| content    | .mantine-Accordion-content      | Wrapper element of Accordion.Panel children    |


#### Accordion CSS variables

| Selector | Variable                        | Description                                                    |
|----------|----------------------------------|----------------------------------------------------------------|
| root     | --accordion-chevron-size         | Controls chevron container element width and min-width          |
|          | --accordion-radius               | Controls border-radius in various elements, depending on variant |
|          | --accordion-transition-duration  | Controls all animations' transition-duration                    |


#### Accordion data attributes

| Selector      | Attribute               | Condition               | Value                                   |
|---------------|-------------------------|-------------------------|-----------------------------------------|
| item, control | data-active              | Item is active (opened)  | –                                       |
| control       | data-chevron-position    | –                       | Value of `chevronPosition` prop on Accordion |




### Keyword Arguments
#### Accordion

- children (a list of or a singular dash component, string or number; required):
    Accordion content.

- 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.

- chevron (a list of or a singular dash component, string or number; optional):
    Custom chevron icon that will be used in all items.

- chevronIconSize (string | number; optional):
    Size of the default chevron icon. Ignored when `chevron` prop is
    set. default `16`.

- chevronPosition (a value equal to: 'left', 'right'; optional):
    Position of the chevron relative to the item label, `right` by
    default.

- chevronSize (string | number; optional):
    Size of the chevron icon container, `24` by default.

- 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.

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

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

- disableChevronRotation (boolean; optional):
    Determines whether chevron rotation should be disabled, `False` by
    default.

- disableCollapse (boolean; optional):
    If set, the open item cannot be collapsed by clicking it again, so
    one item always stays open. Only applies when `multiple` is
    `False`. default False.

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

- keepMounted (boolean; optional):
    If set to `False`, panels are unmounted when collapsed. By
    default, panels stay mounted when collapsed. default True.

- keepMountedMode (a value equal to: 'activity', 'display-none'; optional):
    Controls how inactive panels content is hidden when `keepMounted`
    is `True`, `'activity'` – hidden with `Activity` component,
    `'display-none'` – hidden with `display: none` styles default
    'activity'.

- 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:

- loop (boolean; optional):
    Determines whether arrow key presses should loop though items
    (first to last and last to first), `True` by default.

- 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.

- multiple (boolean; optional):
    Determines whether multiple items can be opened at a time, `False`
    by default.

- order (a value equal to: 2, 3, 4, 5, 6; optional):
    Heading order, has no effect on visuals.

- 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.

- 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):
    Transition duration in ms, `200` by default.

- value (string | list of strings; optional):
    Value for controlled component.

- variant (a value equal to: 'default', 'contained', 'filled', 'separated'; optional):
    Controls visuals.

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

- children (a list of or a singular dash component, string or number; optional):
    Control label.

- 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.

- chevron (a list of or a singular dash component, string or number; optional):
    Custom chevron icon.

- 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.

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

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

- disabled (boolean; optional):
    Disables control button.

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

- icon (a list of or a singular dash component, string or number; optional):
    Icon displayed next to the label.

- 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.

- 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- value (string; required):
    Value that is used to manage accordion state.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

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

- keepMounted (boolean; optional):
    If set, overrides the Accordion-level `keepMounted` value. When
    undefined (default), uses Accordion's `keepMounted` setting.

- keepMountedMode (a value equal to: 'activity', 'display-none'; optional):
    If set, overrides the Accordion-level `keepMountedMode` value.
    When undefined (default), uses Accordion's `keepMountedMode`
    setting.

- 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.

- 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.

- variant (string; optional):
    variant.

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

## Avatar  
Use Avatar to display user profile pictures. It supports images, icons, or letters. Use AvatarGroup to display stack Avatar components.  
Category: Data Display  

### Simple Usage

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    children=[
        dmc.Avatar(
            src="https://avatars.githubusercontent.com/u/91216500?v=4", radius="xl"
        ),
        # default placeholder
        dmc.Avatar(radius="xl"),
        # initials
        dmc.Avatar("MK", color="cyan", radius="xl"),
        # icon
        dmc.Avatar(DashIconify(icon="radix-icons:star"), color="blue", radius="xl"),
    ],
)
```
### Initials
To display initials instead of the default placeholder, set name prop to the name of the person, for example,
`name='John Doe'`. If the name is set, you can use `color='initials'` to generate color based on the name:

```python
import dash_mantine_components as dmc



names = [
    "John Doe",
    "Jane Mol",
    "Alex Lump",
    "Sarah Condor",
    "Mike Johnson",
    "Kate Kok",
    "Tom Smith",
]

avatars = [dmc.Avatar(name=name, color="initials") for name in names]

component = dmc.Group(avatars)
```
### Allowed initials colors
By default, all colors from the default theme are allowed for initials, you can restrict them by providing 
`allowedInitialsColors` prop with an array of colors. Note that the default colors array does not include custom
colors defined in the theme, you need to provide them manually if needed.

```python
import dash_mantine_components as dmc

names = [
    "John Doe",
    "Jane Mol",
    "Alex Lump",
    "Sarah Condor",
    "Mike Johnson",
    "Kate Kok",
    "Tom Smith",
]

component = dmc.Group(
    [
        dmc.Avatar(name=n, color="initials", allowedInitialsColors=["blue", "red"])
        for n in names
    ]
)
```
### Size, Radius and Variant

Control Avatar's height and width with `size` prop and border-radius with `radius` prop. Both props have
predefined values: xs, sm, md, lg, xl. Alternatively, a number can be used to set radius or size in px.

You can also use `variant` to style the Avatar.

```python
import dash_mantine_components as dmc

dmc.Avatar(src="/assets/avatar.jpeg", size="sm"),
dmc.Avatar(src="/assets/avatar.jpeg"),
dmc.Avatar(src="/assets/avatar.jpeg", size=50, radius="xl"),
dmc.Avatar(src="/assets/avatar.jpeg", size="xl", radius=20),
dmc.Avatar(src="/assets/avatar.jpeg", size="xl", variant="outline"),
```

### Avatar Group

Use AvatarGroup to stack Avatar components.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.AvatarGroup(
    children=[
        dmc.Avatar(
            src="https://avatars.githubusercontent.com/u/91216500?v=4", radius="xl"
        ),
        dmc.Avatar(
            src="https://avatars.githubusercontent.com/u/24227892?v=4", radius="xl"
        ),
        dmc.Avatar(radius="xl"),
        dmc.Avatar("MK", color="cyan", radius="xl"),
        dmc.Avatar(DashIconify(icon="radix-icons:star"), color="blue", radius="xl"),
    ],
)
```
### Avatar link with tooltip

```python
import dash_mantine_components as dmc
from dash import html

component = html.A(
    dmc.Tooltip(
        dmc.Avatar(
            src="https://e7.pngegg.com/pngimages/799/987/png-clipart-computer-icons-avatar-icon-design-avatar-heroes"
            "-computer-wallpaper-thumbnail.png",
            size="lg",
            radius="xl",
        ),
        label="Snehil Vijay",
        position="bottom",
    ),
    href="https://www.linkedin.com/in/snehilvj/",
    target="_blank",
)
```
### Dynamically created AvatarGroup

Here's an example of a dynamically created AvatarGroup from GitHub contributors to DMC library.

```python
from os import environ

import dash_mantine_components as dmc
import requests


def create_contributors_list():
    resp = requests.get(
        "https://api.github.com/repos/snehilvj/dash-mantine-components/contributors",
        headers={"authorization": f"token {environ['CONTRIB_TOKEN']}"},
    )
    contributors = resp.json()

    children = []
    for user in contributors:
        avatar = dmc.Avatar(src=user["avatar_url"], radius="xl")
        children.append(avatar)

    return dmc.AvatarGroup(children, id="avatar-group")


component = create_contributors_list() if "CONTRIB_TOKEN" in environ else None
```
### 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-Avatar-root            | Root element                                              |
| image           | .mantine-Avatar-image           | `img` element                                             |
| placeholder     | .mantine-Avatar-placeholder     | Placeholder element, rendered when image cannot be loaded |


### Keyword Arguments
#### Avatar

- children (a list of or a singular dash component, string or number; optional):
    Avatar placeholder, displayed when `src={None}` or when the image
    cannot be loaded.

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

- allowedInitialsColors (list; optional):
    An array of colors that can be used for autogenerated initials. By
    default, all default Mantine colors can be used except gray and
    dark.

- alt (string; optional):
    Image `alt` attribute, also used as `title` attribute for
    placeholder.

- 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 with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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, default value is
    `theme.primaryColor`.  Set to "initials" to auto generate color
    based on `name`.

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

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

- gradient (dict; optional):
    Gradient configuration used when `variant="gradient"`, default
    value is `theme.defaultGradient`.

    `gradient` is a dict with keys:

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

- imageProps (dict; optional):
    `img` tag attributes.

- 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 user. When src is not set, used to display initials
    and to generate color when color="initials" is set.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    `'100%'` by default.

- size (number; optional):
    Width and height of the avatar, numbers are converted to rem,
    `'md'` by default.

- src (string; optional):
    Image url, if the image cannot be loaded or `src={None}`, then
    placeholder is displayed instead.

- 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    <Avatar /> components.

- 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.

- 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.

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

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

- 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.

- spacing (number; optional):
    Negative space between Avatar components, `'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.

- variant (string; optional):
    variant.

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

## Badge  
Use Badges to show indicators, numerical or otherwise.  
Category: Data Display  

### Introduction

### Variants

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Default light badge"),
        dmc.Badge("Dot badge", variant="dot"),
        dmc.Badge("Outline badge", variant="outline"),
        dmc.Badge("Filled badge", variant="filled"),
    ]
)
```
### Colors

```python
import dash_mantine_components as dmc

dmc.Badge("Orange", color="orange")
```

### Gradient variant

```python
import dash_mantine_components as dmc

component = dmc.Group(
    children=[
        dmc.Badge(
            "Indigo cyan",
            variant="gradient",
            gradient={"from": "indigo", "to": "cyan"},
        ),
        dmc.Badge(
            "Lime green",
            variant="gradient",
            gradient={"from": "teal", "to": "lime", "deg": 105},
        ),
        dmc.Badge(
            "Teal blue",
            variant="gradient",
            gradient={"from": "teal", "to": "blue", "deg": 60},
        ),
        dmc.Badge(
            "Orange red",
            variant="gradient",
            gradient={"from": "orange", "to": "red"},
        ),
        dmc.Badge(
            "Grape pink",
            variant="gradient",
            gradient={"from": "grape", "to": "pink", "deg": 35},
        ),
    ]
)
```
### Size

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Sale", size="xs"),
        dmc.Badge("Sale", size="sm"),
        dmc.Badge("Sale", size="md"),
        dmc.Badge("Sale", size="lg"),
        dmc.Badge("Sale", size="xl"),
    ]
)
```
### Radius

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Sale", radius="xs"),
        dmc.Badge("Sale", radius="sm"),
        dmc.Badge("Sale", radius="md"),
        dmc.Badge("Sale", radius="lg"),
        dmc.Badge("Sale", radius="xl"),
    ]
)
```
### Rounded

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge(1, size="xs", circle=True),
        dmc.Badge(7, size="sm", circle=True),
        dmc.Badge(9, size="md", circle=True),
        dmc.Badge(3, size="lg", circle=True),
        dmc.Badge(8, size="xl", circle=True),
    ]
)
```
### 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-Badge-root         | Root element            |
| label        | .mantine-Badge-label        | Badge children          |
| section      | .mantine-Badge-section      | Left and right sections |


### Keyword Arguments
#### Badge

- children (a list of or a singular dash component, string or number; optional):
    Main badge content.

- 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 with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- circle (boolean; optional):
    If set, badge `min-width` becomes equal to its `height` and
    horizontal padding is removed.

- 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, `theme.primaryColor`
    by default.

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

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

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

- gradient (dict; optional):
    Gradient configuration used when `variant="gradient"`, default
    value is `theme.defaultGradient`.

    `gradient` is a dict with keys:

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

- leftSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the left side of the badge label.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `'xl'` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the right side of the badge label.

- size (optional):
    Controls `font-size`, `height` and horizontal `padding`, `'md'` 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.

- variant (string; optional):
    variant.

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

## Card  
Use Card component to hold anything from images to headlines, supporting text, buttons, lists, etc. in a contained unit.  
Category: Data Display  

### Simple Example 

Card component is a wrapper around Paper component with styles for CardSection component.

```python
import dash_mantine_components as dmc

component = dmc.Card(
    children=[
        dmc.CardSection(
            dmc.Image(
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png",
                h=160,
                alt="Norway",
            )
        ),
        dmc.Group(
            [
                dmc.Text("Norway Fjord Adventures", fw=500),
                dmc.Badge("On Sale", color="pink"),
            ],
            justify="space-between",
            mt="md",
            mb="xs",
        ),
        dmc.Text(
            "With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and "
            "around the fjords of Norway",
            size="sm",
            c="dimmed",
        ),
        dmc.Button(
            "Book classic tour now",
            color="blue",
            fullWidth=True,
            mt="md",
            radius="md",
        ),
    ],
    withBorder=True,
    shadow="sm",
    radius="md",
    w=350,
)
```
### Horizontal Orientation 

```python
import dash_mantine_components as dmc

completed = 1887
total = 2334

stats = [
    {"value": 447, "label": "Remaining"},
    {"value": 76, "label": "In progress"},
]

items = [
    dmc.Box([
        dmc.Text(stat["value"]),
        dmc.Text(stat["label"], size="xs", c="dimmed"),
    ])
    for stat in stats
]

component = dmc.Card(
    [
        dmc.CardSection(
            dmc.RingProgress(
                roundCaps=True,
                thickness=6,
                size=150,
                sections=[
                    {
                        "value": (completed / total) * 100,
                        "color": "blue",
                    }
                ],
                label=dmc.Box([
                    dmc.Text(
                        f"{((completed / total) * 100):.0f}%",
                        ta="center",
                        fz="lg",
                    ),
                    dmc.Text(
                        "Completed",
                        ta="center",
                        fz="xs",
                        c="dimmed",
                    ),
                ]),
            ),
            inheritPadding=True,
            px="xs",
            withBorder=True,
        ),
        dmc.CardSection(
            [
                dmc.Text("Project tasks", fz="xl"),
                dmc.Box(
                    [
                        dmc.Text("1887"),
                        dmc.Text("Completed", fz="xs", c="dimmed"),
                    ],
                    mt="xs",
                ),
                dmc.Group(items, mt="sm"),
            ],
            inheritPadding=True,
            px="md",
            withBorder=True,
            ml="lg"
        ),
    ],
    padding="sm",
    withBorder=True,
    orientation="horizontal",
    w=400
)
```
### Card Section

CardSection is a special component that is used to remove Card padding from its children while other elements still have horizontal spacing. CardSection works the following way:

1. If component is a first child in Card then it has negative top, left and right margins.
2. If it is a last child in Card then it has negative bottom, left and right margins.
3. If it is in the middle then only left and right margins will be negative.

##### Border and Padding in CardSection

`withBorder` property will add top and bottom border to CardSection depending on its position relative to other content and sections.
`inheritPadding` property will add the same left and right padding to CardSection as set in Card component.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

urls = [
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png",
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png",
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png",
]

images = [dmc.Image(radius="sm", src=url) for url in urls]

component = dmc.Card(
    children=[
        dmc.CardSection(
            dmc.Group(
                children=[
                    dmc.Text("Review Pictures", fw=500),
                    dmc.ActionIcon(
                        DashIconify(icon="carbon:overflow-menu-horizontal"),
                        color="gray",
                        variant="transparent",
                    ),
                ],
                justify="space-between",
            ),
            withBorder=True,
            inheritPadding=True,
            py="xs",
        ),
        dmc.Box(
            children=[
                dmc.Text(
                    "200+ images uploaded",
                    c="blue",
                    style={"display": "inline"},
                ),
                " since last visit, review them to select which one should be added to your gallery",
            ],
            mt="sm",
            c="dimmed",
        ),
        dmc.CardSection(
            dmc.Image(
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png",
                mt="sm",
            ),
        ),
        dmc.CardSection(
            children=[
                dmc.SimpleGrid(cols=3, children=[i for i in images]),
            ],
            inheritPadding=True,
            mt="sm",
            pb="md",
        ),
    ],
    withBorder=True,
    shadow="sm",
    radius="md",
    w=350,
)
```
### 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-Card-root    | Root element                |
| section | .mantine-Card-section | `Card.Section` root element |


### Keyword Arguments
#### Card

- children (a list of or a singular dash component, string or number; optional):
    Card content.

- 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.

- 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.

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

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

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Card orientation @,default,'vertical'.

- padding (number; optional):
    Controls `padding`, key of `theme.spacing` or any valid CSS value,
    `'md'` by default.

- 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.

- shadow (optional):
    Key of `theme.shadows` or any valid CSS value to set `box-shadow`,
    `none` 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether the card should have border, border color
    depends on color scheme, `False` by default.
#### CardSection

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

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

- inheritPadding (boolean; optional):
    Determines whether the section should inherit padding from the
    parent `Card`, `False` by default.

- 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.

- 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether the section should have a border, `False` by
    default.

## Carousel  
Use the Carousel component to cycle through elements like a slideshow.  
Category: Data Display  

### CSS Extensions

As of DMC 1.2.0, `Carousel` component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.



### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)),
        dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)),
        dmc.CarouselSlide(dmc.Center("Slide-3", bg="blue", c="white", p=60)),
    ],
    id="carousel-simple",
)
```
### Options


### Size and Gap

Set `slideSize` and `slideGap` on `Carousel` component to control size and gap of every slide:

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%"))
        for i in range(1, 7)
    ],
    id="carousel-size",
    withIndicators=True,
    height=200,
    slideSize="33.3333%",
    slideGap="md",
    emblaOptions = {"loop": True, "align": "start", "slidesToScroll": 3},
)
```
### Responsive styles

`slideSize` and `slideGap` props work the same way as `style` props, you can pass an object with values for different breakpoints:


```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(
            dmc.Center(f"Slide {i}", ta="center", bg="blue", c="white", h="100%")
        )
        for i in range(1, 7)
    ],
    id="carousel-responsive",
    withIndicators=True,
    height=200,
    slideSize={"base": "100%", "sm": "50%", "md": "33.333333%"},
    slideGap={"base": 0, "sm": "md"},
    emblaOptions = {"loop": True, "align": "start"},
)
```
### Drag free

`dragFree` will disable slides snap points – user will be able to stop dragging at any position:

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(
            dmc.Center(f"Slide {i}", ta="center", bg="blue", c="white", h="100%")
        )
        for i in range(1, 7)
    ],
    id="carousel-drag-free",
    withIndicators=True,
    height=200,
    slideGap="md",
    emblaOptions = {"loop": True, "align": "start", "dragFree": True},
)
```
### Vertical orientation

Carousel with `orientation="vertical"` requires `height` prop to be set:

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(
            dmc.Center(f"Slide {i}", ta="center", bg="blue", c="white", h="100%")
        )
        for i in range(1, 7)
    ],
    id="carousel-vertical",
    orientation="vertical",
    withIndicators=True,
    height=200,
    emblaOptions={"loop": True},
)
```
### Controls icons
You can replace default next/previous controls icons with any component:


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Carousel(
    [
        dmc.CarouselSlide(
            dmc.Center(f"Slide {i}", ta="center", bg="blue", c="white", h="100%")
        )
        for i in range(1, 7)
    ],
    id="carousel-controls_icons",
    withIndicators=True,
    height=180,
    nextControlIcon=DashIconify(icon="bi:arrow-right-circle-fill", width=30),
    previousControlIcon=DashIconify(icon="bi:arrow-left-circle-fill", width=30),
    emblaOptions = {"loop": True},
)
```
### Autoscroll
Enable autoscroll by setting `autoScroll=True` or by passing in a `dict` with options. Refer to [Embla Carousel Auto Scroll Options](https://www.embla-carousel.com/plugins/auto-scroll/#options) to learn more.

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)),
        dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)),
        dmc.CarouselSlide(dmc.Center("Slide-3", bg="blue", c="white", p=60)),
    ],
    id="carousel-autoscroll",
    emblaOptions={"loop": True},
    autoScroll=True,
)
```
### Autoplay
Enable autoplay by setting `autoplay=True` or by passing in a `dict` with options. Refer to [Embla Carousel Autoplay Options](https://www.embla-carousel.com/plugins/autoplay/#options) to learn more.

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

component = html.Div([
    dmc.Carousel(
        [
            dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)),
            dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)),
            dmc.CarouselSlide(dmc.Center("Slide-3", bg="blue", c="white", p=60)),
        ],
        id="carousel-autoplay",
        mt="sm",
        emblaOptions={"loop": True},
        autoplay=True,  # Default delay is 4000ms
    )
])
```
Here’s an example of passing props to the Embla component. In this example, the `delay` is set to 2000ms, and autoplay pauses when hovering over a slide:

```python
autoplay={"delay": 2000, "stopOnMouseEnter": True, "stopOnInteraction":False}

```

### Carousel Styles API

Carousel supports Styles API, you can add styles to any inner element of the component with `classNames` prop. Refer to the  [Styles API documentation](/styles-api) to learn more.

### Carousel Indicator styles
This example styles the indicators to emphasize the active slide.

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%"))
        for i in range(1, 4)
    ],
    id="carousel-indicator-styles",
    withIndicators=True,
    height=200,
    emblaOptions = {"loop": True},
    classNames={"indicator": "dmc-indicator"},
)
```
Put the following in a .css file in the `assets` folder:

```css
.dmc-indicator {
  width: 12px;
  height: 4px;
  transition: width 250ms ease;

  &[data-active] {
    width: 40px;
  }
}
```

### Hide inactive controls

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%"))
        for i in range(1, 4)
    ],
    id="carousel-hide-inactive-controls",
    height=200,
    classNames={"control": "dmc-control"},
)
```
Put the following in a .css file in the `assets` folder:

```css
.dmc-control {
  &[data-inactive] {
    opacity: 0;
    cursor: default;
  }
}
```

### Show controls on hover

```python
import dash_mantine_components as dmc

component = dmc.Carousel(
    [
        dmc.CarouselSlide(dmc.Center(f"Slide {i}", bg="blue", c="white", h="100%"))
        for i in range(1, 4)
    ],
    id="carousel-show-controls-on-hover",
    height=200,
    classNames={"controls": "dmc-controls", "root": "dmc-root"},
)
```
Put the following in a .css file in the `assets` folder:
```css

.dmc-controls {
  transition: opacity 150ms ease;
  opacity: 0;
}

.dmc-root {
  &:hover {
    .dmc-controls {
      opacity: 1;
    }
  }
}
```

### Set initial slide

To set the initial slide to display, use the index number of the slide.

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

component = dmc.Paper(
    [
        dmc.Select(
            label="Set initial slide",
            data=[str(i) for i in range(6)],
            value="0",
            id="carousel-input",
            mb=10,
        ),
        dmc.Carousel(
            [
                dmc.CarouselSlide(
                    dmc.Center(
                        f"Slide {i}", ta="center", bg="blue", c="white", h="100%"
                    )
                )
                for i in range(6)
            ],
            id="carousel-initial",
            height=200,
            emblaOptions = {"loop": True, "align": "start"},
        ),
    ]
)


@callback(
    Output("carousel-initial", "initialSlide"),
    Input("carousel-input", "value"),
)
def go_to_slide(value):
    return int(value)
```
### Container queries
To use container queries instead of media queries, set `type="container"`. With container queries, slides size and gap 
will be adjusted based on the container width, not the viewport width.

Note that, when using container queries, `slideSize` and `slideGap` props cannot reference `theme.breakpoints` values 
in keys. It is required to use exact `px` or `em` values.

To see how the slides size and gap changes, resize the root element of the demo with the resize handle located at the
bottom right corner of the demo:


```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    # Wrapper div is added for demonstration purposes only,
    #  It is not required in real projects
    dmc.Carousel(
        [
            dmc.CarouselSlide(dmc.Center("Slide-1", bg="blue", c="white", p=60)),
            dmc.CarouselSlide(dmc.Center("Slide-2", bg="blue", c="white", p=60)),
            dmc.CarouselSlide(dmc.Center("Slide-3", bg="blue", c="white", p=60)),
        ],
        id="carousel-container",
        type="container",
        slideSize = {"base": '100%', '300px': '50%', '500px': '33.333333%'},
        slideGap = {"base": 0, '300px': 'md', '500px': 'lg'},
        emblaOptions = {"loop": True, "align": "start"},
    ),
    style={
        "resize": 'horizontal',
        "overflow": 'hidden',
        "maxWidth": '100%',
        "minWidth": 250,
        "padding": 10,
      }
)
```
### Active prop for callbacks

The `active` prop represents the index of the currently displayed slide and can be used to trigger Dash callbacks. Note
that this prop is read-only. To set the initially displayed slide, use the `initialSlide` prop instead.


### Example Image Carousel

```python
import dash_mantine_components as dmc

images = [
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png",
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png",
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png",
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png",
    "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-5.png",
]

component = dmc.Carousel(
    [dmc.CarouselSlide(dmc.Image("Slide 1", src=image)) for image in images],
    id="carousel-images",
    withIndicators=True,
    w=400,
)
```
### Example Card Carousel

```python
import dash_mantine_components as dmc
from dash import html

data = [
    {
        "image": "https://images.unsplash.com/photo-1508193638397-1c4234db14d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Best forests to visit in North America",
        "category": "NATURE",
    },
    {
        "image": "https://images.unsplash.com/photo-1559494007-9f5847c49d94?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Hawaii beaches review: better than you think",
        "category": "BEACH",
    },
    {
        "image": "https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Mountains at night: 12 best locations to enjoy the view",
        "category": "NATURE",
    },
    {
        "image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Best places to visit this winter",
        "category": "TOURISM",
    },
    {
        "image": "https://images.unsplash.com/photo-1582721478779-0ae163c05a60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80",
        "title": "Active volcanos reviews: travel at your own risk",
        "category": "NATURE",
    },
]


def make_card(image, title, category):
    return dmc.Paper(
        [
            html.Div(
                [
                    dmc.Text(category, c="white", opacity=0.7, fw=700),
                    dmc.Title(title, lh=1.2, order=3, mt="xs", fw=900, c="white"),
                ]
            ),
            dmc.Button("Read Article", variant="white", color="dark"),
        ],
        shadow="md",
        p="xl",
        radius="md",
        style={
            "backgroundImage": f"url({image})",
            "height": 440,
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "alignItems": "flex-start",
            "backgroundSize": "cover",
            "backgroundPosition": "center",
        },
    )


component = dmc.Carousel(
    [dmc.CarouselSlide(make_card(d["image"], d["title"], d["category"])) for d in data],
    id="carousel-cards",
    w=400,
    emblaOptions={"loop": True, "align": "start"},
)
```
### Limitation: Carousel in Tabs

When a Carousel is placed inside a tab, it may not render correctly. For more details, refer to [GitHub Issue #299]((https://github.com/snehilvj/dash-mantine-components/issues/299). 
As a workaround, you can update the carousel within the tabs using a callback.

Be sure to give a unique id to each carousel in the app.


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


def make_carousel(id):
    return dmc.Carousel(
        emblaOptions={"loop": True},
        withIndicators=True,
        children=[
            dmc.CarouselSlide(
                dmc.Center(
                    slide,
                    bg="blue",
                    c="white",
                    p=60,
                )
            )
            for slide in ["Slide 1", "Slide 2", "Slide 3"]
        ],
        id=id,
    )


component = html.Div(
    [
        dmc.Tabs(
            [
                dmc.TabsList(
                    [
                        dmc.TabsTab("Tab one", value="1"),
                        dmc.TabsTab("Tab two", value="2"),
                    ]
                ),
            ],
            id="tabs-carousel-example",
            value="1",
        ),
        html.Div(id="tabs-carousel-content", style={"paddingTop": 10}),
    ]
)


@callback(
    Output("tabs-carousel-content", "children"), Input("tabs-carousel-example", "value")
)
def render_content(active):
    if active == "1":
        return [dmc.Text("Tab One selected", my=10), make_carousel("carousel-tab1")]
    else:
        return [dmc.Text("Tab Two selected", my=10), make_carousel("carousel-tab2")]
```
### Limitation: draggable and speed Props
As of DMC v0.14.7, the `draggable` and `speed` props no longer work because Embla Carousel v8 has removed them. These props
will be removed in DMC v1.0.0


### 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.



#### Carousel selectors

| Selector   | Static selector              | Description                                              |
|------------|------------------------------|----------------------------------------------------------|
| root       | .mantine-Carousel-root       | Root element                                             |
| slide      | .mantine-Carousel-slide      | Carousel.Slide root element                              |
| container  | .mantine-Carousel-container  | Slides container                                         |
| viewport   | .mantine-Carousel-viewport   | Main element, contains slides container and all controls |
| controls   | .mantine-Carousel-controls   | Next/previous controls container                         |
| control    | .mantine-Carousel-control    | Next/previous control                                    |
| indicators | .mantine-Carousel-indicators | Indicators container                                     |
| indicator  | .mantine-Carousel-indicator  | Indicator button                                         |

#### Carousel CSS variables

| Selector | Variable                   | Description                                                |
|----------|----------------------------|------------------------------------------------------------|
| root     | --carousel-control-size    | Controls `width` and `height` of the next/previous buttons |
| root     | --carousel-controls-offset | Controls offsets of the next/previous buttons              |
| root     | --carousel-height          | Controls height of the carousel                            |

#### Carousel data attributes

| Selector   | Attribute                    | Condition                                | Value                        |
|------------|------------------------------|------------------------------------------|------------------------------|
| root       | data-orientation             | –                                        | Value of `orientation` prop  |
| root       | data-include-gap-in-size     | `includeGapInSize` prop is set           | –                            |
| control    | data-inactive                | No previous/next slides are available    | –                            |
| indicator  | data-active                  | Associated slide is active               | –                            |




### Keyword Arguments
#### Carousel

- children (a list of or a singular dash component, string or number; optional):
    <Carousel.Slide /> components.

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

- active (number; default 0):
    The index of the current slide. Read only.  Use initialSlide to
    set the current slide.

- 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.

- autoScroll (boolean; optional):
    Enables autoScroll with optional configuration.

- autoplay (boolean; optional):
    Enables autoplay with optional configuration.

- 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.

- controlSize (string | number; optional):
    Controls size of the next and previous controls, `26` by default.

- controlsOffset (number; optional):
    Controls position of the next and previous controls, key of
    `theme.spacing` or any valid CSS value, `'sm'` by default.

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

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

- emblaOptions (dict; optional):
    options to pass to the embla component.

- height (string | number; optional):
    Slides container `height`, required for vertical orientation.

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

- includeGapInSize (boolean; optional):
    Determines whether gap between slides should be treated as part of
    the slide size, `True` by default.

- initialSlide (number; default 0):
    Index of initial slide.

- 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.

- nextControlIcon (a list of or a singular dash component, string or number; optional):
    Icon of the next control.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Carousel orientation, `'horizontal'` by default.

- previousControlIcon (a list of or a singular dash component, string or number; optional):
    Icon of the previous control.

- slideGap (number; optional):
    Key of theme.spacing or number to set gap between slides.

- slideSize (string | number; optional):
    Controls slide width based on viewport width, `'100%'` 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.

- type (a value equal to: 'media', 'container'; optional):
    Determines typeof of queries that are used for responsive styles,
    'media' by default.

- variant (string; optional):
    variant.

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

- withControls (boolean; optional):
    Determines whether next/previous controls should be displayed,
    True by default.

- withIndicators (boolean; optional):
    Determines whether indicators should be displayed, `False` by
    default.

- withKeyboardEvents (boolean; optional):
    Determines whether arrow key should switch slides, `True` by
    default.
#### CarouselSlide

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

## Image  
DMC alternative for html.Img with placeholder for loading and error states.  
Category: Data Display  

### Simple Example
`Image` is a wrapper for HTML `img` with minimal styles. By default, the image will take 100% of parent width. The 
image size can be controlled with `w` and `h` style props.

```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png",
)
```
### Image height

In most case, you will need to set image height to prevent layout jumps when image is loading. You can do so with `h` [style](/style-props) props.

```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    h=200,
    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-10.png",
)
```
### Image fit
By default the image has `object-fit: cover` style - it will resize to cover parent element. To change this behavior,
set `w="auto"` and `fit="contain"` props.


```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    h=200,
    w="auto",
    fit="contain",
    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-9.png",
)
```
### Placeholder

Set `fallbackSrc` prop to display fallback image when image fails to load:

```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    src=None,
    h=200,
    fallbackSrc="https://placehold.co/600x400?text=Placeholder",
)
```
### Background Image

Use BackgroundImage component when you need to display image below any content. Component sets background-image to 
given `src`, background-size to cover and background-position to center.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    style={"width": 300},
    children=dmc.BackgroundImage(
        src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid"
        "=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80",
        children=[
            dmc.Center(
                p="md",
                children=[
                    dmc.Text(
                        "BackgroundImage component can be used to add any content on image. It is used for cards, "
                        "hero headers and similar components",
                        c="yellow",
                    )
                ],
            )
        ],
    ),
)
```
### 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.



#### Image Selectors

| Selector | Static selector       | Description  |
| -------- | --------------------- | ------------ |
| root     | `.mantine-Image-root` | Root element |



#### Image CSS Variables

| Selector | Variable             | Description                       |
| -------- | -------------------- | --------------------------------- |
| root     | `--image-object-fit` | Controls `object-fit` property    |
| root     | `--image-radius`     | Controls `border-radius` property |



#### Image Data Attributes

| Selector | Attribute       | Condition            |
| -------- | --------------- | -------------------- |
| root     | `data-fallback` | Image failed to load |



### Keyword Arguments
#### Image

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

- alt (string; optional):
    Image alt text, used as title for placeholder if image was not
    loaded.

- 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.

- 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.

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

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

- fallbackSrc (string; optional):
    Image url that will be used as a fallback in case `src` prop is
    not set or image cannot be loaded.

- fit (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'contain', 'cover', 'fill', 'scale-down'; optional):
    Controls `object-fit` style, `'cover'` 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.

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

- src (boolean | number | string | dict | list; optional):
    Image url.

- 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

- 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.

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

- src (string; required):
    Image url.

- 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.

- variant (string; optional):
    variant.

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

## Indicator  
Use Indicator to display element at the corner of another element  
Category: Data Display  

### Introduction

Use Indicator to display element at the corner of another element.

### Inline

When the target element has a fixed width, set `inline` prop to add `display: inline-block;` styles to Indicator container.
Alternatively, you can set width and height with `style` prop if you still want the root element to keep `display: block`.

```python
import dash_mantine_components as dmc

component = dmc.Indicator(
    dmc.Avatar(
        size="lg",
        radius="sm",
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
    ),
    inline=True,
    size=16,
    label="New",
)
```
### Offset
Set `offset` to change the indicator position. It is useful when the `Indicator` component is used with children that
have `border-radius`. You can provide a number for uniform offset or a dictionary with `x` and `y` properties for
separate horizontal and vertical offsets

```python
import dash_mantine_components as dmc

component = dmc.Indicator(
    dmc.Avatar(
        size="lg",
        radius="xl",
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png",
    ),
    inline=True,
    offset=7,
    position="bottom-end",
    color="red",
    withBorder=True,
    size=16,
)
```
### Max value
Set `maxValue` prop to display `{maxValue}+` when the label exceeds the maximum value. This is useful for notification
counters that should not show exact large numbers:

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
            ),
            inline=True,
            label=50,
            maxValue=99,
        ),
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
            ),
            inline=True,
            label=100,
            maxValue=99,
        ),
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png",
            ),
            inline=True,
            label=1000,
            maxValue=999,
        ),
    ]
)
```
### Show zero
By default, the indicator is displayed when the label is 0. Set `showZero=False` to hide the indicator when the label is 0


```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
            ),
            inline=True,
            label=0,
        ),
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
            ),
            inline=True,
            label=0,
            showZero=False,
        ),
    ]
)
```
### Auto contrast
Set `autoContrast` prop to automatically adjust text color based on the background color to ensure readable contrast:

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
            ),
            inline=True,
            label="99",
            color="lime.4",
        ),
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
            ),
            inline=True,
            label="99",
            color="lime.4",
            autoContrast=True,
        ),
    ]
)
```
### Processing Animation

```python
import dash_mantine_components as dmc

component = dmc.Indicator(
    dmc.Avatar(
        size="lg",
        radius="sm",
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
    ),
    inline=True,
    color="red",
    size=12,
    processing=True,
)
```
### 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-Indicator-root      | Root element      |
| indicator | .mantine-Indicator-indicator | Indicator element |


### Keyword Arguments
#### Indicator

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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`.
    If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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 value,
    `theme.primaryColor` by default.

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

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

- disabled (boolean; optional):
    When Indicator is disabled it renders children only.

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

- inline (boolean; optional):
    Determines whether the indicator container should be an inline
    element, `False` by default.

- label (a list of or a singular dash component, string or number; optional):
    Label rendered inside the indicator, for example, notification
    count.

- 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:

- maxValue (number; optional):
    Maximum value to display. If label is a number greater than this
    value, it will be displayed as `{maxValue}+`.

- 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.

- offset (dict; optional):
    Distance in pixels to offset the indicator from its default
    position, useful for elements with border-radius. Can be a number
    for uniform offset or a dict with `x` and `y` properties for
    separate horizontal and vertical offsets default 0.

    `offset` is a number | dict with keys:

- position (a value equal to: 'top-center', 'top-end', 'top-start', 'bottom-center', 'bottom-end', 'bottom-start', 'middle-center', 'middle-end', 'middle-start'; optional):
    Indicator position relative to the target element, `'top-end'` by
    default.

- processing (boolean; optional):
    Determines whether the indicator should have processing animation,
    `False` by default.

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

- showZero (boolean; optional):
    Determines whether indicator with label `0` should be displayed
    default True.

- size (string | number; optional):
    Indicator width and height, `10` 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether the indicator should have a border (color of
    the border is the same as the body element), `False` by default.

- zIndex (string | number; optional):
    Indicator z-index, `200` by default.

## Kbd  
Use Kbd to show keyboard shortcuts, etc.  
Category: Data Display  

### Simple Example

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div([dmc.Kbd("⌘"), " + ", dmc.Kbd("shift"), " + ", dmc.Kbd("M")])
```
### 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-Kbd-root | Root element                                     |


### Keyword Arguments
#### Kbd

- children (a list of or a singular dash component, string or number; optional):
    Keyboard key.

- 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.

- 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.

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

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

- 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.

- size (optional):
    Controls font-size and padding, `'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.

- variant (string; optional):
    variant.

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

## NumberFormatter  
Use the NumberFormatter component to format number with thousands/decimal separators and suffix/prefix  
Category: Data Display  

### Simple Example

Use `NumberFormatter` to format numbers. It supports the same formatting related props as `NumberInput` component.

```python
import dash_mantine_components as dmc

component = dmc.NumberFormatter(prefix="$ ", value=1000000, thousandSeparator=True)
```
### Prefix and suffix

Set `prefix` and `suffix` props to add given string to the start or end of the value:

```python
from dash import html
import dash_mantine_components as dmc

component = html.Div([
    html.Div(["With prefix: ", dmc.NumberFormatter(value=100, prefix="$")]),
    html.Div(["With suffix: ", dmc.NumberFormatter(value=100, suffix=" RUB")]),
])
```
### Keyword Arguments
#### NumberFormatter

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

- allowNegative (boolean; optional):
    Determines whether negative values are allowed, `True` by default.

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

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

- decimalScale (number; optional):
    Limits the number of digits that are displayed after the decimal
    point, by default there is no limit.

- decimalSeparator (string; optional):
    Character used as a decimal separator, `'.'` by default.

- fixedDecimalScale (boolean; optional):
    If set, 0s are added after `decimalSeparator` to match given
    `decimalScale`. `False` by default.

- 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:

- prefix (string; optional):
    Prefix added before the value.

- suffix (string; optional):
    Suffix added after the value.

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

- thousandSeparator (string | boolean; optional):
    A character used to separate thousands, `','` by default.

- thousandsGroupStyle (a value equal to: 'none', 'thousand', 'lakh', 'wan'; optional):
    Defines the thousand grouping style.

- value (string | number; optional):
    Value to format.

## Spoiler  
Use the Spoiler component to hide long sections of content.  
Category: Data Display  

### Simple Example

Use Spoiler to hide long sections of content. Pass `maxHeight` prop to control the point at which content will be
hidden under the spoiler and control to show/hide extra appears. If content height is less than `maxHeight`, spoiler
will just render children.

Props `hideLabel` and `showLabel` are required - they are used as spoiler toggle button label in corresponding state.

```python
import dash_mantine_components as dmc

# very long string
text = ""

component = dmc.Spoiler(
    showLabel="Show more",
    hideLabel="Hide",
    maxHeight=50,
    children=[dmc.Text(text)],
)
```

### Accessibility

The Spoiler component includes ARIA attributes and keyboard support for screen reader users:

* The toggle button uses `aria-expanded` to indicate whether the content is expanded or collapsed.
* The content region uses `role="region"` and is associated with the toggle button through `aria-controls`.
* The spoiler can be toggled with Space or Enter when the button is focused.

### Best practices for label text

Use descriptive labels for `showLabel` and `hideLabel` that clearly describe the action:

```python
import dash_mantine_components as dmc

dmc.Spoiler(
    showLabel="Show full article",
    hideLabel="Hide article",
)
```

Other good examples include `"Expand details"` / `"Collapse details"`. Avoid vague labels such as `"More"` / `"Less"` or `"..."`.

### Custom accessibility labels

If the visible button labels do not clearly describe the action, use `showAriaLabel` and `hideAriaLabel` to provide descriptive labels for screen readers:

```python
import dash_mantine_components as dmc

component = dmc.Spoiler(
    showLabel="👁️",
    hideLabel="👁️",
    showAriaLabel="Show discussion comments",
    hideAriaLabel="Hide discussion comments",
    children="Comments content",
)
```

The `showAriaLabel` and `hideAriaLabel` values are used as the accessible labels for the toggle button.


### 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-Spoiler-root    | Root element                                   |
| content | .mantine-Spoiler-content | Wraps content to set max-height and transition |
| control | .mantine-Spoiler-control | Show/hide content control                      |


### Keyword Arguments
#### Spoiler

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

- defaultExpanded (boolean; optional):
    Initial expanded state in uncontrolled mode. If `True`, content
    starts expanded. If `False`, content starts collapsed default
    False.

- expanded (boolean; default False):
    Controlled expanded state value.

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

- hideAriaLabel (string; optional):
    Accessible label for the toggle button when expanded. If not set,
    `hideLabel` is used.

- hideLabel (a list of or a singular dash component, string or number; required):
    Content displayed in the toggle button when content is expanded
    (to collapse).

- 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:

- maxHeight (number; optional):
    Maximum height of visible content in px. When content exceeds this
    height, the toggle control appears default 100.

- 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.

- showAriaLabel (string; optional):
    Accessible label for the toggle button when collapsed. If not set,
    `showLabel` is used.

- showLabel (a list of or a singular dash component, string or number; required):
    Content displayed in the toggle button when content is collapsed
    (to expand).

- 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):
    Spoiler reveal transition duration in ms. Set to 0 to disable
    animation default 200.

- variant (string; optional):
    variant.

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

## ThemeIcon  
Use ThemeIcon component to render icon inside element with theme colors.  
Category: Data Display  

### Usage

ThemeIcon can be customized by setting its variant, size, radius and color.


### Colors

ThemeIcon supports all colors from Mantine's theme colors.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

colors = [
    "gray",
    "red",
    "pink",
    "grape",
    "violet",
    "indigo",
    "blue",
    "lime",
    "yellow",
    "orange",
]

component = dmc.Stack(
    gap="xs",
    children=[
        dmc.Group(
            [
                dmc.ThemeIcon(
                    DashIconify(icon="tabler:photo", width=20),
                    variant=variant,
                    color=color,
                )
                for color in colors
            ],
            justify="center",
        )
        for variant in ["outline", "light", "filled"]
    ],
)
```
### Gradient Variant

To use gradient as ThemeIcon background:

* set `variant` prop to "gradient"
* set `gradient` prop to `{ "from": "color-from", "to": "color-to", "deg": 135}`, where

* `color-from` and `color-to` are colors from Mantine's theme colors.
* `deg` is linear gradient deg.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    children=[
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "indigo", "to": "cyan"},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "teal", "to": "lime", "deg": 105},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "teal", "to": "blue", "deg": 60},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "orange", "to": "red"},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "grape", "to": "pink", "deg": 35},
            size="lg",
        ),
    ]
)
```
### 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-ThemeIcon-root | Root element                                     |


### Keyword Arguments
#### ThemeIcon

- children (a list of or a singular dash component, string or number; optional):
    Icon displayed inside the component.

- 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 button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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. Default value is
    `theme.primaryColor`.

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

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

- gradient (dict; optional):
    Gradient data used when `variant="gradient"`, default value is
    `theme.defaultGradient`.

    `gradient` is a dict with keys:

- 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.

- 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.

- size (number; optional):
    Controls width and height of the button. Numbers are converted to
    rem. `'md'` 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.

- variant (string; optional):
    variant.

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

## Timeline  
Use the Timeline and TimelineItem components to display a list of events in chronological order.  
Category: Data Display  

### Introduction

### Usage

Control timeline appearance with the following props:

- `active` - index of current active element, all elements before this index will be highlighted with color
- `color` - color from theme that should be used to highlight active items, defaults to theme.primaryColor
- `lineWidth` - controls line width and bullet border
- `bulletSize` - bullet width, height and border-radius
- `align` - defines line and bullets position relative to content, also sets textAlign

```python
import dash_mantine_components as dmc


component = dmc.Timeline(
    active=1,
    bulletSize=15,
    lineWidth=2,
    children=[
        dmc.TimelineItem(
            title="New Branch",
            children=[
                dmc.Text(
                    [
                        "You've created new branch ",
                        dmc.Anchor("fix-notification", href="#", size="sm"),
                        " from master",
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
        ),
        dmc.TimelineItem(
            title="Commits",
            children=[
                dmc.Text(
                    [
                        "You've pushed 23 commits to ",
                        dmc.Anchor("fix-notification", href="#", size="sm"),
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
        ),
        dmc.TimelineItem(
            title="Pull Request",
            lineVariant="dashed",
            children=[
                dmc.Text(
                    [
                        "You've submitted a pull request ",
                        dmc.Anchor(
                            "Fix incorrect notification message (#178)",
                            href="#",
                            size="sm",
                        ),
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
        ),
        dmc.TimelineItem(
            [
                dmc.Text(
                    [
                        dmc.Anchor(
                            "AnnMarieW",
                            href="https://github.com/AnnMarieW",
                            size="sm",
                        ),
                        " left a comment on your pull request",
                    ],
                    c="dimmed",
                    size="sm",
                ),
            ],
            title="Code Review",
        ),
    ],
)
```
### Components in Bullets

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Timeline(
    children=[
        dmc.TimelineItem(
            title="Default bullet",
            children=dmc.Text("Default bullet without anything", c="dimmed", size="sm")
        ),
        dmc.TimelineItem(
            title="Avatar",
            bullet=dmc.Avatar(
                size=22,
                radius="xl",
                src="https://avatars.githubusercontent.com/u/91216500?v=4"
            ),
            children=dmc.Text("Timeline bullet as avatar image", c="dimmed", size="sm")
        ),
        dmc.TimelineItem(
            title="Icon",
            bullet=DashIconify(icon="tabler:sun", width=13),
            children=dmc.Text("Timeline bullet as icon", c="dimmed", size="sm")
        ),
        dmc.TimelineItem(
            title="ThemeIcon",
            bullet=dmc.ThemeIcon(
                size=22,
                variant="gradient",
                gradient={"from": "lime", "to": "cyan"},
                radius="xl",
                children=DashIconify(icon="tabler:video", width=13)
            ),
            children=dmc.Text("Timeline bullet as ThemeIcon component", c="dimmed", size="sm")
        )
    ],
    bulletSize=24
)
```
### Opposite
Use the `opposite` prop on `TimelineItem` to render content on the opposite side of the timeline. When any `TimelineItem`
has the opposite prop, the timeline switches to a centered layout with content on both sides of the line.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Timeline(
    [
        dmc.TimelineItem(
            title="New branch",
            bullet=DashIconify(icon="tabler:git-branch", width=12),
            opposite=dmc.Text("2 hours ago", size="sm", c="dimmed"),
            children=dmc.Text(
                [
                    "You've created new branch ",
                    dmc.Text("fix-notifications", variant="link", span=True, inherit=True),
                    " from master",
                ],
                c="dimmed",
                size="sm",
            ),
        ),
        dmc.TimelineItem(
            title="Commits",
            bullet=DashIconify(icon="tabler:git-commit", width=12),
            opposite=dmc.Text("52 minutes ago", size="sm", c="dimmed"),
            children=dmc.Text(
                [
                    "You've pushed 23 commits to ",
                    dmc.Text("fix-notifications branch", variant="link", span=True, inherit=True),
                ],
                c="dimmed",
                size="sm",
            ),
        ),
        dmc.TimelineItem(
            title="Pull request",
            bullet=DashIconify(icon="tabler:git-pull-request", width=12),
            lineVariant="dashed",
            opposite=dmc.Text("34 minutes ago", size="sm", c="dimmed"),
            children=dmc.Text(
                [
                    "You've submitted a pull request ",
                    dmc.Text(
                        "Fix incorrect notification message (#187)",
                        variant="link",
                        span=True,
                        inherit=True,
                    ),
                ],
                c="dimmed",
                size="sm",
            ),
        ),
        dmc.TimelineItem(
            title="Code review",
            bullet=DashIconify(icon="tabler:message-circle", width=12),
            children=dmc.Text(
                [
                    dmc.Text("Claude", variant="link", span=True, inherit=True),
                    " left a code review on your pull request",
                ],
                c="dimmed",
                size="sm",
            ),
        ),
    ],
    active=1,
    bulletSize=24,
    lineWidth=2,
)
```
### Alternate

Set the `alternate` prop on individual `TimelineItem` components to switch the position of content and opposite:

```python
import dash_mantine_components as dmc

component = dmc.Timeline(
    [
        dmc.TimelineItem(
            title="Project started",
            opposite=dmc.Text("Jan 2025", size="sm", c="dimmed"),
            children="Initial planning and requirements gathering.",
        ),
        dmc.TimelineItem(
            title="Beta release",
            opposite=dmc.Text("Apr 2025", size="sm", c="dimmed"),
            alternate=True,
            children="Released the first version to early adopters.",
        ),
        dmc.TimelineItem(
            title="General availability",
            opposite=dmc.Text("Aug 2025", size="sm", c="dimmed"),
            children="Launched publicly with full documentation.",
        ),
        dmc.TimelineItem(
            title="Version 2.0",
            opposite=dmc.Text("Jan 2026", size="sm", c="dimmed"),
            alternate=True,
            children="Introduced a redesigned interface and new features.",
        ),
    ],
    active=3,
    bulletSize=16,
    lineWidth=2,
)
```
### 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.


#### Timeline Selectors

| Selector     | Static selector               | Description                               |
|-------------|-------------------------------|-------------------------------------------|
| root        | .mantine-Timeline-root        | Root element                             |
| item        | .mantine-Timeline-item        | Item root element                        |
| itemBody    | .mantine-Timeline-itemBody    | Item body, wraps title and content       |
| itemTitle   | .mantine-Timeline-itemTitle   | Item title, controlled by `title` prop   |
| itemContent | .mantine-Timeline-itemContent | Item content, controlled by `children` prop |
| itemBullet  | .mantine-Timeline-itemBullet  | Item bullet                              |

#### Timeline CSS Variables

| Selector | Variable          | Description                                 |
|----------|------------------|---------------------------------------------|
| root     | --tl-bullet-size | Controls bullet width and height           |
|          | --tl-color       | Controls active bullet and line colors     |
|          | --tl-icon-color  | Controls icon color                        |
|          | --tl-line-width  | Controls width of the line between bullets |
|          | --tl-radius      | Controls bullet border-radius              |

#### Timeline Data Attributes

| Selector        | Attribute       | Condition                                    |
|----------------|----------------|----------------------------------------------|
| item, itemBullet | data-active    | Item index is `<=` Timeline `active` prop   |
| item           | data-line-active | Item index is `<` Timeline `active` prop    |


### Keyword Arguments
#### Timeline

- children (a list of or a singular dash component, string or number; optional):
    `Timeline.Item` components.

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

- active (number; optional):
    Index of active element.

- align (a value equal to: 'left', 'right'; optional):
    Controls how the content is positioned relative to the bullet,
    `'left'` by default.

- 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 icon color should depend on `background-color`.
    If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- bulletSize (string | number; optional):
    Controls size of the bullet, `20` by default.

- 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 to control active
    item colors, `theme.primaryColor` by default.

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

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

- 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`.

- lineWidth (string | number; optional):
    Control width of the line.

- 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.

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

- reverseActive (boolean; optional):
    Determines whether the active items direction should be reversed
    without reversing items order, `False` 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    Content displayed below the title.

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

- alternate (boolean; optional):
    If set, switches the position of content and opposite
    @,default,False.

- 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.

- bullet (a list of or a singular dash component, string or number; optional):
    React node that should be rendered inside the bullet – icon,
    image, avatar, etc. By default, large white dot is displayed.

- 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 to control active
    item colors @,default,theme.primaryColor.

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

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

- 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`.

- lineVariant (a value equal to: 'dashed', 'dotted', 'solid'; optional):
    Controls line border style, `'solid'` by default.

- 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.

- opposite (a list of or a singular dash component, string or number; optional):
    Content displayed on the opposite side of the timeline item.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem, `'xl'` 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.

- title (a list of or a singular dash component, string or number; optional):
    Item title, displayed next to the bullet.

- variant (string; optional):
    variant.

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

## Date Pickers Overview  
This guide gives an overview of Date and Time components available in Dash Mantine components.  
Category: Date Pickers  

The Mantine date pickers let users quickly navigate by months or years to select dates in the past or future.
### DatePicker

[DatePicker](/components/datepicker) allows users to select a date, date range, or multiple dates from a calendar.  It does not have an input field.  

Note: Many `DatePicker` props (for example,  `minDate`, `maxDate`, `excludeDates`, `allowLevelChange`, `firstDayOfWeek`,
`renderDay`) apply across other Mantine date and time picker components. Refer to the DatePicker section for details and example for these shared props.


### DatePickerInput

[DatePickerInput](/components/datepickerinput): Select single dates, multiple dates (`type="multiple"`), or date 
ranges (`type="range"`). This option **does not** allow free text input.


### DateInput

[DateInput](/components/datepickerinput): Allows free form text input of dates, as well as selecting a date from a calendar.


### MonthPickerInput

[MonthPickerInput](/components/monthpickerinput): Use when only the month value is needed.


### YearPickerInput
[YearPickerInput](/components/yearpickerinput): Use when only the year value is needed.

### TimeInput
[TimeInput](/components/timeinput): is based on the native `input[type="time"]` element and does not support most of
advanced features like choosing time format or custom dropdown with time select. If you need more features, use
`TimePicker` component instead.

### TimePicker
[TimePicker](/components/timepicker): Advanced time selection with features like dropdowns for hours, minutes, seconds,
and 12-hour/24-hour formats, and time pre-sets.


### TimeGrid
[TimeGrid](/components/timegrid)  captures time value from the user with a predefined set of options.

### DateTimePicker
[DateTimePicker](/components/): Selects both date and time from user.

### CSS Extensions

As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.

## DateInput  
Free form date input  
Category: Date Pickers  

### DateInput props

DateInput supports most of the [DatePicker](/components/datepicker) props, read through DatePicker
documentation to learn about all component features that are not listed on this page.

### Simple Example

This is a simple example of DateInput tied to a callback. You can type a date or select from the DatePicker

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

component = html.Div(
    [
        dmc.DateInput(
            id="dateinput2",
            label="Enter a date",
            description="You can type a date or select from the calendar",
            w=300,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-dateinput2"),
    ]
)


@callback(Output("selected-dateinput2", "children"), Input("dateinput2", "value"))
def update_output(d):
    prefix = "You entered: "
    if d:
        return prefix + d
    else:
        return ""
```
### Value format


Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label displayed in the input field.

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.Group(
    gap="xl",
    children=[
        dmc.DateInput(
            value=datetime.now().date(),
            valueFormat="ddd, MMM D YY",
            label="ddd, MMM D YY",
            w=250,
        ),
        dmc.DateInput(
            value=datetime.now().date(),
            valueFormat="MMMM DD, YY",
            label="MMMM DD, YY",
            w=250,
        ),
        dmc.DateInput(
            value=datetime.now().date(),
            valueFormat="DD-MM-YYYY",
            label="DD-MM-YYYY",
            w=250,
        ),
    ],
)
```
`valueFormat` also accepts a function that receives the value as a YYYY-MM-DD string and returns the formatted value.  For
more details and examples, see [Mantine DateInput](https://mantine.dev/dates/date-input/#value-format) documentation, and the [Functions As Props](/functions-as-props) section.


### Clearable

Set clearable prop to allow removing value from the input. Input will be cleared if user selects the same date in dropdown or clears input value.

When `clearable=True`, a clear button in the right section is displayed. Note that if you set rightSection prop, clear button will not be displayed.

```python
import dash_mantine_components as dmc

component = dmc.DateInput(
    clearable=True, label="Date input", placeholder="Date Input", w=250
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
from datetime import date

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack([
    dmc.DateInput(
        label="clearSectionMode='both' (default)",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.DateInput(
        label="clearSectionMode='rightSection'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.DateInput(
        label="clearSectionMode='clear'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Min and max date

Set `minDate` and `maxDate` props to define min and max dates. If date that is after `maxDate` or before `minDate` is entered, then it will be considered invalid and input value will be reverted to last known valid date value.

```python
from datetime import datetime, timedelta

import dash_mantine_components as dmc

component = dmc.DateInput(
    minDate=datetime.now(),
    maxDate=datetime.now() + timedelta(days=7),
    placeholder="Date input",
    label="Select valid date",
    w=250,
)
```
### Input props

### CSS Extensions

As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.



### 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.


#### DateInput selectors

| Selector                  | Static selector                                | Description                                                        |
| ------------------------- | ---------------------------------------------- | ------------------------------------------------------------------ |
| wrapper                   | `.mantine-DateInput-wrapper`                   | Root element of the Input                                          |
| input                     | `.mantine-DateInput-input`                     | Input element                                                      |
| section                   | `.mantine-DateInput-section`                   | Left and right sections                                            |
| root                      | `.mantine-DateInput-root`                      | Root element                                                       |
| label                     | `.mantine-DateInput-label`                     | Label element                                                      |
| required                  | `.mantine-DateInput-required`                  | Required asterisk element, rendered inside label                   |
| description               | `.mantine-DateInput-description`               | Description element                                                |
| error                     | `.mantine-DateInput-error`                     | Error element                                                      |
| calendarHeader            | `.mantine-DateInput-calendarHeader`            | Calendar header root element                                       |
| calendarHeaderControl     | `.mantine-DateInput-calendarHeaderControl`     | Previous/next calendar header controls                             |
| calendarHeaderControlIcon | `.mantine-DateInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls                     |
| calendarHeaderLevel       | `.mantine-DateInput-calendarHeaderLevel`       | Level control (changes levels when clicked, month → year → decade) |
| levelsGroup               | `.mantine-DateInput-levelsGroup`               | Group of months levels                                             |
| yearsList                 | `.mantine-DateInput-yearsList`                 | Years list table element                                           |
| yearsListRow              | `.mantine-DateInput-yearsListRow`              | Years list row element                                             |
| yearsListCell             | `.mantine-DateInput-yearsListCell`             | Years list cell element                                            |
| yearsListControl          | `.mantine-DateInput-yearsListControl`          | Button used to pick months and years                               |
| monthsList                | `.mantine-DateInput-monthsList`                | Months list table element                                          |
| monthsListRow             | `.mantine-DateInput-monthsListRow`             | Months list row element                                            |
| monthsListCell            | `.mantine-DateInput-monthsListCell`            | Months list cell element                                           |
| monthsListControl         | `.mantine-DateInput-monthsListControl`         | Button used to pick months and years                               |
| monthThead                | `.mantine-DateInput-monthThead`                | `thead` element of month table                                     |
| monthRow                  | `.mantine-DateInput-monthRow`                  | `tr` element of month table                                        |
| monthTbody                | `.mantine-DateInput-monthTbody`                | `tbody` element of month table                                     |
| monthCell                 | `.mantine-DateInput-monthCell`                 | `td` element of month table                                        |
| month                     | `.mantine-DateInput-month`                     | Month table element                                                |
| weekdaysRow               | `.mantine-DateInput-weekdaysRow`               | Weekdays `tr` element                                              |
| weekday                   | `.mantine-DateInput-weekday`                   | Weekday `th` element                                               |
| day                       | `.mantine-DateInput-day`                       | Month day control                                                  |
| weekNumber                | `.mantine-DateInput-weekNumber`                | Week number `td` element                                           |
| datePickerRoot            | `.mantine-DateInput-datePickerRoot`            | Date picker root element, contains calendar and presets            |
| presetsList               | `.mantine-DateInput-presetsList`               | Presets wrapper element                                            |
| presetButton              | `.mantine-DateInput-presetButton`              | Preset button                                                      |



#### DateInput data attributes

| Selector              | Attribute             | Condition                                                             | Value                                                  |
| --------------------- | --------------------- | --------------------------------------------------------------------- | ------------------------------------------------------ |
| calendarHeaderControl | `data-direction`      | –                                                                     | `"previous"` or `"next"` depending on the control type |
| calendarHeaderControl | `data-disabled`       | Control is disabled for any reason                                    | –                                                      |
| monthCell             | `data-with-spacing`   | `withCellSpacing` prop is set                                         | –                                                      |
| day                   | `data-today`          | Date is the same as `new Date()`                                      | –                                                      |
| day                   | `data-hidden`         | Day is outside of current month and `hideOutsideDates` is set         | –                                                      |
| day                   | `data-disabled`       | Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.) | –                                                      |
| day                   | `data-weekend`        | Day is weekend                                                        | –                                                      |
| day                   | `data-outside`        | Day is outside of the current month                                   | –                                                      |
| day                   | `data-selected`       | Day is selected                                                       | –                                                      |
| day                   | `data-in-range`       | Day is in range selection                                             | –                                                      |
| day                   | `data-first-in-range` | Day is first in range selection                                       | –                                                      |
| day                   | `data-last-in-range`  | Day is last in range selection                                        | –                                                      |



### Keyword Arguments
#### DateInput

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

- allowDeselect (boolean; optional):
    Determines whether value can be deselected when the user clicks on
    the selected date in the calendar (only when clearable prop is
    set), defaults to True if clearable prop is set, False otherwise.

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

- ariaLabels (dict; optional):
    aria-label attributes for controls on different levels.

    `ariaLabels` is a dict with keys:

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

- 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.

- clearButtonProps (dict; optional):
    Props added to clear button.

    `clearButtonProps` is a dict with keys:

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether input value can be cleared, adds clear button
    to right section, False by default.

- columnsToScroll (number; optional):
    Number of columns to scroll when user clicks next/prev buttons,
    defaults to numberOfColumns.

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

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

- dateParser (boolean | number | string | dict | list; optional):
    A function to parse user input and convert it to date string
    value.

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- decadeLabelFormat (string; optional):
    dayjs label format to display decade label or a function that
    returns decade label based on date value, defaults to "YYYY".

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- disabledDates (boolean | number | string | dict | list; optional):
    Specifies days that should be disabled.  Either a list of dates or
    a function. See
    https://www.dash-mantine-components.com/functions-as-props.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):
    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.

- fixOnBlur (boolean; optional):
    Determines whether input value should be reverted to last known
    valid value on blur, True by default.

- fullWidth (boolean; optional):
    Determines whether the calendar should take the full width of its
    container default False.

- getDayProps (boolean | number | string | dict | list; optional):
    A function that passes props down Day component  based on date.
    (See https://www.dash-mantine-components.com/functions-as-props).

- getMonthControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down month picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- getYearControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down to year picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- hasNextLevel (boolean; optional):
    Determines whether next level button should be enabled, defaults
    to True.

- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):
    Controls order, `['previous', 'level', 'next']`` by default.

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

- hideOutsideDates (boolean; optional):
    Determines whether outside dates should be hidden, defaults to
    False.

- hideWeekdays (boolean; optional):
    Determines whether weekdays row should be hidden, defaults to
    False.

- highlightToday (boolean; optional):
    Determines whether today should be highlighted with a border,
    False by default.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

- level (a value equal to: 'month', 'year', 'decade'; optional):
    Current level displayed to the user (decade, year, month), used
    for controlled component.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDate (string; optional):
    Maximum possible date.

- maxLevel (a value equal to: 'month', 'year', 'decade'; optional):
    Max level that user can go up to (decade, year, month), defaults
    to decade.

- minDate (string; optional):
    Minimum possible date.

- 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.

- monthLabelFormat (string; optional):
    dayjs label format to display month label or a function that
    returns month label based on month value, defaults to "MMMM
    YYYY".

- monthsListFormat (string; optional):
    dayjs format for months list.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- nextDisabled (boolean; optional):
    Determines whether next control should be disabled, defaults to
    True.

- nextIcon (a list of or a singular dash component, string or number; optional):
    Change next icon.

- nextLabel (string; optional):
    aria-label for next button.

- numberOfColumns (number; optional):
    Number of columns to render next to each other.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- popoverProps (dict; optional):
    Props added to Popover component.

    `popoverProps` is a dict with keys:

- previousDisabled (boolean; optional):
    Determines whether previous control should be disabled, defaults
    to True.

- previousIcon (a list of or a singular dash component, string or number; optional):
    Change previous icon.

- previousLabel (string; optional):
    aria-label for previous button.

- 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):
    Readonly.

- renderDay (boolean | number | string | dict | list; optional):
    A function that controls day value rendering. (See
    https://www.dash-mantine-components.com/functions-as-props).

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (string; optional):
    Value for controlled component.

- valueFormat (string; optional):
    Dayjs format to display input value, "MMMM D, YYYY" by default.

- variant (string; optional):
    variant.

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

- weekdayFormat (string; optional):
    dayjs format for weekdays names, defaults to "dd".

- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):
    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,
    defaults to value defined in DatesProvider.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withCellSpacing (boolean; optional):
    Determines whether controls should be separated by spacing, True
    by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withNativeLevelSelect (boolean; optional):
    Determines whether level select controls should be rendered as
    native `<select>` elements default False.

- withNext (boolean; optional):
    Determines whether next control should be rendered, defaults to
    True.

- withPrevious (boolean; optional):
    Determines whether previous control should be rendered, defaults
    to True.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- withWeekNumbers (boolean; optional):
    Determines whether week numbers should be displayed, False by
    default.

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:

- yearLabelFormat (string; optional):
    dayjs label format to display year label or a function that
    returns year label based on year value, defaults to "YYYY".

- yearsListFormat (string; optional):
    dayjs format for years list, `'YYYY'` by default.

- yearsSelectRange (list of 2 elements: [number, number]; optional):
    Year range for native level select, tuple of `[startYear,
    endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or
    values derived from `minDate`/`maxDate` if set.

## DatePicker  
Inline date, multiple dates and dates range picker  
Category: Date Pickers  

> Looking for a date picker with an input field and a dropdown calendar? Try `DateInput` or `DatePickerInput`.

### Simple Example

This is a simple example of `DatePicker` with a callback. Use a string in the format 'YYYY-MM-DD'.

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


component = dmc.Stack([
    dmc.DatePicker(id="date-picker"),
    dmc.Text(id="selected-date-picker", mt=10),
], align="center")


@callback(
    Output("selected-date-picker", "children"), Input("date-picker", "value")
)
def update_output(d):
    return f"You selected {d}"
```
### Allow deselect
Set `allowDeselect` to allow user to deselect current selected date by clicking on it. `allowDeselect` is disregarded
when `type` prop is `range` or `multiple`. When date is deselected the value is None.


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


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-allow-deselect",
        allowDeselect=True
    ),
    dmc.Text(id="date-picker-out-allow-deselect"),

], align="center")


@callback(
    Output("date-picker-out-allow-deselect", "children"), Input("date-picker-allow-deselect", "value")
)
def update_output(d):
    return f"You selected {d}"
```
### Multiple dates
Set `type="multiple"` to allow user to pick multiple dates.  Note that value must be a list.


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


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-multiple",
        value=[],
        type="multiple"
    ),
    dmc.Text(id="date-picker-out-multiple"),

], align="center")


@callback(
    Output("date-picker-out-multiple", "children"), Input("date-picker-multiple", "value")
)
def update_output(d):
    return f"You selected {str(d)}"
```
### Dates range
Set `type="range"` to allow user to pick dates range. Note that value must be a list.


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


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-range",
        value=[],
        type="range"
    ),
    dmc.Text(id="date-picker-out-range"),

], align="center")


@callback(
    Output("date-picker-out-range", "children"), Input("date-picker-range", "value")
)
def update_output(d):
    return f"You selected {str(d)}"
```
### Single date in range
By default, it is not allowed to select single date as range – when user clicks the same date second time it is
deselected. To change this behavior set `allowSingleDateInRange=True` prop. `allowSingleDateInRange` is ignored 
when type prop is not range.


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


component = dmc.Stack([
    dmc.DatePicker(
        id="date-picker-range-s",
        value=[],
        type="range",
        allowSingleDateInRange=True
    ),
    dmc.Text(id="date-picker-out-range-s"),

], align="center")


@callback(
    Output("date-picker-out-range-s", "children"), Input("date-picker-range-s", "value")
)
def update_output(d):
    return f"You selected {str(d)}"
```
### Presets
Use `presets` prop to add custom date presets. Presets are displayed next to the calendar:

```python
from datetime import date, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


today = date.today()

component = dmc.Center(
    dmc.DatePicker(
        presets=[
            {
                "value": (today - timedelta(days=1)).isoformat(),
                "label": "Yesterday",
            },
            {
                "value": today.isoformat(),
                "label": "Today",
            },
            {
                "value": (today + timedelta(days=1)).isoformat(),
                "label": "Tomorrow",
            },
            {
                "value": (today + relativedelta(months=1)).isoformat(),
                "label": "Next month",
            },
            {
                "value": (today + relativedelta(years=1)).isoformat(),
                "label": "Next year",
            },
            {
                "value": (today - relativedelta(months=1)).isoformat(),
                "label": "Last month",
            },
            {
                "value": (today - relativedelta(years=1)).isoformat(),
                "label": "Last year",
            },
        ]
    )
)
```
To use `presets` with `type="range"`, define value a tuple of two dates:

```python
from datetime import date, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


today = date.today()

component = dmc.Center(
    dmc.DatePicker(
        type="range",
        presets=[
            {
                "value": [
                    (today - timedelta(days=2)).isoformat(),
                    today.isoformat(),
                ],
                "label": "Last two days",
            },
            {
                "value": [
                    (today - timedelta(days=7)).isoformat(),
                    today.isoformat(),
                ],
                "label": "Last 7 days",
            },
            {
                "value": [
                    today.replace(day=1).isoformat(),
                    today.isoformat(),
                ],
                "label": "This month",
            },
            {
                "value": [
                    (today - relativedelta(months=1)).replace(day=1).isoformat(),
                    (today.replace(day=1) - timedelta(days=1)).isoformat(),
                ],
                "label": "Last month",
            },
            {
                "value": [
                    date(today.year - 1, 1, 1).isoformat(),
                    date(today.year - 1, 12, 31).isoformat(),
                ],
                "label": "Last year",
            },
        ],
    )
)
```
### Default date

Use `defaultDate` prop to set date value that will be used to determine which year should be displayed initially. For 
example to display 2015 February month set `defaultDate="2015-02-01"`. If value is not specified, then defaultDate will
use today's date. Day, minutes and seconds are ignored in provided date, only year and month data is used – you can 
specify any date value.


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(defaultDate="2015-02-01")
)
```
### Level
Set `level` prop to configure initial level that will be displayed:

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.DatePicker(level="decade"),
    dmc.DatePicker(level="year")
], justify="center")
```
### Full width
Set the `fullWidth` prop to make the date picker stretch to fill 100% of its parent container width:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(fullWidth=True)
)
```
### Hide outside dates
Set `hideOutsideDates=True` to remove all dates that do not belong to the current month:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(hideOutsideDates=True)
)
```
### Display week numbers
Set `withWeekNumbers=True` to display week numbers:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(withWeekNumbers=True)
)
```
### First day of week
Set `firstDayOfWeek` prop to configure first day of week. The prop accepts number from 0 to 6, where 0 is Sunday and 6
is Saturday. Default value is 1 – Monday. You can also configure this option for all components with `DatesProvider`.


```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.DatePicker(firstDayOfWeek=0),
    dmc.DatePicker(firstDayOfWeek=6)
], justify="center", gap="xl")
```
### Hide weekdays
Set `hideWeekdays=True` to hide weekdays names:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(hideWeekdays=True)
)
```
### Weekend days
Use `weekendDays` prop to configure weekend days. The prop accepts an array of numbers from 0 to 6, where 0 is
Sunday and 6 is Saturday. Default value is `[0, 6]` – Saturday and Sunday. You can also configure this option for
all components with DatesProvider.


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(weekendDays=[1,2])
)
```
### Min and max date
Set `minDate` and `maxDate` props to define min and max dates. If previous/next page is not available then 
corresponding control will be disabled.


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(
        minDate="2025-05-10",
        maxDate = "2025-05-25"
    )
)
```
### Change header controls order
Use `headerControlsOrder` prop to change order of header controls. The prop accepts a list of 'next' | 'previous' | 'level'.
Note that each control can be used only once in the list.


```python
import dash_mantine_components as dmc

component = dmc.DatePicker(
    value="2025-02-01",
    headerControlsOrder = ['level', 'previous', 'next'],
    styles = {
        "calendarHeaderLevel": {
            "justifyContent": 'flex-start',
            "paddingInlineStart": 8,
        },
    }
)
```
### Add props to year and month control


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

You can add props to year, month and day controls with `getYearControlProps`, `getMonthControlProps` and `getDayProps`
functions. All functions accept date as single argument, props returned from the function will be added to
year/month/day control. For example, it can be used to disable specific control or add styles:


```python

import dash_mantine_components as dmc

# Adding dayjs as external script to make it available to the function
# app = Dash(external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])

component = dmc.DatePicker(
    defaultDate="2025-06-01",
    getDayProps={"function": "highlightFriday13"},
    getYearControlProps={"function": "yearControlProps"},
    getMonthControlProps={"function": "monthControlProps"},
    my="lg"
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

// dayjs is loaded globally via Dash external_scripts.
// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider
var dayjs = window.dayjs;

dmcfuncs.highlightFriday13 = function (dateStr) {
  const d = dayjs(dateStr);

  if (d.day() === 5 && d.date() === 13) {
    return {
      style: {
        backgroundColor: 'var(--mantine-color-red-filled)',
        color: 'var(--mantine-color-white)',
      },
    };
  }

  return {};
};

dmcfuncs.yearControlProps = function (dateStr) {
  const d = dayjs(dateStr);
  const currentYear = new Date().getFullYear();

  if (d.year() === currentYear) {
    return {
      style: {
        color: 'var(--mantine-color-blue-filled)',
        fontWeight: 700,
      },
    };
  }

  if (d.year() === currentYear + 1) {
    return { disabled: true };
  }

  return {};
};

dmcfuncs.monthControlProps = function (dateStr) {
  const d = dayjs(dateStr);

  if (d.month() === 1) {
    return {
      style: {
        color: 'var(--mantine-color-blue-filled)',
        fontWeight: 700,
      },
    };
  }

  if (d.month() === 5) {
    return { disabled: true };
  }

  return {};
};
```


### Render day function


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

You can customize day rendering with renderDay prop. For example, it can be used to add `Indicator` to certain days.


```python
import dash_mantine_components as dmc


# Adding dayjs as external script to make it available to the function
# app = Dash(external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])


component = dmc.DatePicker(
    id="custom-day-render",
    renderDay={"function": "highlightSixteenthWithDot"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var dayjs = window.dayjs;

dmcfuncs.highlightSixteenthWithDot = function (dateStr) {
  const day = dayjs(dateStr).date();

  return React.createElement(
    dmc.Indicator,
    {
      size: 9,
      color: "red",
      offset: -5,
      disabled: day !== 16, // displays indicator only on the the 16th doy of the month
    },
    React.createElement("div", null, day)
  );
};
```


### Disabled dates

#### Example 1: A List of dates
Use the `disabledDates` prop to pass a list of specific dates to disable. Dates must be strings in the YYYY-MM-DD format.

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(
        value="2024-11-05",
        defaultDate="2024-11-01",
        disabledDates=["2024-11-06", "2024-11-07",  "2024-11-08"],
        m="lg"
    )
)
```
#### Example 2: A Function


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

The `disabledDates` prop accepts a function that receives a date string (in 'YYYY-MM-DD' format) and returns true if the date should be disabled.

This example uses [dayjs](https://day.js.org/) to simplify working with dates in JavaScript.

To use `dayjs` in your Dash app, load it as an external script:

```python
app = Dash(external_scripts=[
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"
])
```

Here, `dayjs(dateStr).day()` is used to check the day of the week. This is more reliable than manually parsing the date string and helps avoid common timezone issues.

The example below disables all dates except Fridays:


```python

import dash_mantine_components as dmc

# makes dayjs available
#app = Dash(exteral_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])

component = dmc.Center(
    dmc.DatePicker(
        value="2024-11-08",
        defaultDate="2024-11-01",
        disabledDates={"function": "excludeDate"},
        m="lg"
    )
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.excludeDate = function(dateStr) {
   const date = dayjs(dateStr, "YYYY-MM-DD");
   return date.isValid() && date.day() !== 5;
}
```


### Number of columns
Set `numberOfColumns` prop to define number of pickers that will be rendered side by side:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(numberOfColumns=2)
)
```
### Max level

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.DatePicker(maxLevel="year"),
    dmc.DatePicker(maxLevel="month")
], justify="center", gap="xl")
```
### Change year and months controls format
Use `yearsListFormat` and `monthsListFormat` props to change [dayjs](https://day.js.org/docs/en/display/format) format of year/month controls:

```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(monthsListFormat="MM", yearsListFormat="YY")
)
```
### Change label format
Use `decadeLabelFormat`, `yearLabelFormat` and `monthLabelFormat` props to change  [dayjs](https://day.js.org/docs/en/display/format)
format of decade/year label:


```python
import dash_mantine_components as dmc

component = dmc.Center(
    dmc.DatePicker(
        decadeLabelFormat="YY",
        yearLabelFormat="YYYY [year]",
        monthLabelFormat="MM/YY",
    )
)
```
### Localization

For information on setting locale, have a look at the [DatesProvider](/components/datesprovider) component.

### Native level select
Set the `withNativeLevelSelect` prop to replace the calendar header level button with native `<select>` elements. At 
the month level, two selects are rendered for month and year. At the year level, one select is rendered for year.

```python
import dash_mantine_components as dmc

component =  dmc.DatePicker(withNativeLevelSelect=True, yearsSelectRange=[2020, 2035])
```
### CSS Extensions

As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.


### 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.



#### DatePicker Selectors

| Selector                  | Static selector                                 | Description                                    |
| ------------------------- | ----------------------------------------------- | ---------------------------------------------- |
| calendarHeader            | `.mantine-DatePicker-calendarHeader`            | Calendar header root element                   |
| calendarHeaderControl     | `.mantine-DatePicker-calendarHeaderControl`     | Previous/next calendar header controls         |
| calendarHeaderControlIcon | `.mantine-DatePicker-calendarHeaderControlIcon` | Icon of previous/next calendar header controls |
| calendarHeaderLevel       | `.mantine-DatePicker-calendarHeaderLevel`       | Level control (month → year → decade)          |
| levelsGroup               | `.mantine-DatePicker-levelsGroup`               | Group of months levels                         |
| yearsList                 | `.mantine-DatePicker-yearsList`                 | Years list table element                       |
| yearsListRow              | `.mantine-DatePicker-yearsListRow`              | Years list row element                         |
| yearsListCell             | `.mantine-DatePicker-yearsListCell`             | Years list cell element                        |
| yearsListControl          | `.mantine-DatePicker-yearsListControl`          | Button used to pick months and years           |
| monthsList                | `.mantine-DatePicker-monthsList`                | Months list table element                      |
| monthsListRow             | `.mantine-DatePicker-monthsListRow`             | Months list row element                        |
| monthsListCell            | `.mantine-DatePicker-monthsListCell`            | Months list cell element                       |
| monthsListControl         | `.mantine-DatePicker-monthsListControl`         | Button used to pick months and years           |
| monthThead                | `.mantine-DatePicker-monthThead`                | Thead element of month table                   |
| monthRow                  | `.mantine-DatePicker-monthRow`                  | TR element of month table                      |
| monthTbody                | `.mantine-DatePicker-monthTbody`                | Tbody element of month table                   |
| monthCell                 | `.mantine-DatePicker-monthCell`                 | TD element of month table                      |
| month                     | `.mantine-DatePicker-month`                     | Month table element                            |
| weekdaysRow               | `.mantine-DatePicker-weekdaysRow`               | Weekdays TR element                            |
| weekday                   | `.mantine-DatePicker-weekday`                   | Weekday TH element                             |
| day                       | `.mantine-DatePicker-day`                       | Month day control                              |
| weekNumber                | `.mantine-DatePicker-weekNumber`                | Week number TD element                         |



#### DatePicker Data Attributes

| Selector              | Attribute             | Condition                                    | Value                    |
| --------------------- | --------------------- | -------------------------------------------- | ------------------------ |
| calendarHeaderControl | `data-direction`      | –                                            | `"previous"` or `"next"` |
| calendarHeaderControl | `data-disabled`       | Control is disabled                          | –                        |
| monthCell             | `data-with-spacing`   | `withCellSpacing` prop is set                | –                        |
| day                   | `data-today`          | Date is today (`new Date()`)                 | –                        |
| day                   | `data-hidden`         | Outside current month and `hideOutsideDates` | –                        |
| day                   | `data-disabled`       | Disabled by props (e.g., `excludeDate`)      | –                        |
| day                   | `data-weekend`        | Day is weekend                               | –                        |
| day                   | `data-outside`        | Day is outside of current month              | –                        |
| day                   | `data-selected`       | Day is selected                              | –                        |
| day                   | `data-in-range`       | Day is in selected range                     | –                        |
| day                   | `data-first-in-range` | First day in selected range                  | –                        |
| day                   | `data-last-in-range`  | Last day in selected range                   | –                        |



### Keyword Arguments
#### DatePicker

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

- allowDeselect (boolean; optional):
    Determines whether user can deselect the date by clicking on
    selected item, applicable only when type="default".

- allowSingleDateInRange (boolean; optional):
    Determines whether single year can be selected as range,
    applicable only when type="range".

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

- ariaLabels (dict; optional):
    aria-label attributes for controls on different levels.

    `ariaLabels` is a dict with keys:

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

- 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.

- columnsToScroll (number; optional):
    Number of columns to scroll when user clicks next/prev buttons,
    defaults to numberOfColumns.

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

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

- decadeLabelFormat (string; optional):
    dayjs label format to display decade label or a function that
    returns decade label based on date value, defaults to "YYYY".

- defaultDate (string; optional):
    Initial displayed date.

- disabledDates (list of strings; optional):
    Specifies days that should be disabled.

- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):
    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.

- fullWidth (boolean; optional):
    Determines whether the calendar should take the full width of its
    container default False.

- getDayProps (boolean | number | string | dict | list; optional):
    A function that passes props down Day component  based on date.
    (See https://www.dash-mantine-components.com/functions-as-props).

- getMonthControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down month picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- getYearControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down to year picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- hasNextLevel (boolean; optional):
    Determines whether next level button should be enabled, defaults
    to True.

- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):
    Controls order, `['previous', 'level', 'next']`` by default.

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

- hideOutsideDates (boolean; optional):
    Determines whether outside dates should be hidden, defaults to
    False.

- hideWeekdays (boolean; optional):
    Determines whether weekdays row should be hidden, defaults to
    False.

- level (a value equal to: 'month', 'year', 'decade'; optional):
    Current level displayed to the user (decade, year, month), used
    for controlled component.

- 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:

- maxDate (string; optional):
    Maximum possible date.

- maxLevel (a value equal to: 'month', 'year', 'decade'; optional):
    Max level that user can go up to (decade, year, month), defaults
    to decade.

- minDate (string; optional):
    Minimum possible date.

- 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.

- monthLabelFormat (string; optional):
    dayjs label format to display month label or a function that
    returns month label based on month value, defaults to "MMMM
    YYYY".

- monthsListFormat (string; optional):
    dayjs format for months list.

- nextIcon (a list of or a singular dash component, string or number; optional):
    Change next icon.

- nextLabel (string; optional):
    aria-label for next button.

- numberOfColumns (number; optional):
    Number of columns to render next to each other.

- 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.

- presets (list of dicts; optional):
    Predefined values to pick from.

    `presets` is a list of dicts with keys:

- previousIcon (a list of or a singular dash component, string or number; optional):
    Change previous icon.

- previousLabel (string; optional):
    aria-label for previous button.

- renderDay (boolean | number | string | dict | list; optional):
    A function that controls day value rendering. (See
    https://www.dash-mantine-components.com/functions-as-props).

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size.

- 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.

- type (a value equal to: 'default', 'multiple', 'range'; optional):
    Picker type: range, multiple or default.

- value (string | list of strings; optional):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- weekdayFormat (string; optional):
    dayjs format for weekdays names, defaults to "dd".

- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):
    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,
    defaults to value defined in DatesProvider.

- withCellSpacing (boolean; optional):
    Determines whether controls should be separated by spacing, True
    by default.

- withNativeLevelSelect (boolean; optional):
    Determines whether level select controls should be rendered as
    native `<select>` elements default False.

- withWeekNumbers (boolean; optional):
    Determines whether week numbers should be displayed, False by
    default.

- yearLabelFormat (string; optional):
    dayjs label format to display year label or a function that
    returns year label based on year value, defaults to "YYYY".

- yearsListFormat (string; optional):
    dayjs format for years list, `'YYYY'` by default.

- yearsSelectRange (list of 2 elements: [number, number]; optional):
    Year range for native level select, tuple of `[startYear,
    endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or
    values derived from `minDate`/`maxDate` if set.

## DatePickerInput  
Date, multiple dates and dates range picker input. Helps you easily switch between different months, years along with locale support.  
Category: Date Pickers  

### Simple Example

This is a simple example of `DatePickerInput` tied to a callback. You can either use strings in a valid datetime format such
as `YYYY-MM-DD` or use the date object from datetime library.

> If you would like to enable the user to type a date manually into the input field, please use the `DateInput` component

```python
from datetime import datetime, date

import dash_mantine_components as dmc
from dash import Input, Output, html, callback
from dash.exceptions import PreventUpdate

component = html.Div(
    [
        dmc.DatePickerInput(
            id="date-picker-input",
            label="Start Date",
            description="You can also provide a description",
            minDate=date(2020, 8, 5),
            value=datetime.now().date(),  # or string in the format "YYYY-MM-DD"
            w=250,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-input"),
    ]
)


@callback(
    Output("selected-date-input", "children"), Input("date-picker-input", "value")
)
def update_output(d):
    prefix = "You have selected: "
    if d:
        return prefix + d
    else:
        raise PreventUpdate
```
### Multiple dates

Set type="multiple" to allow user to pick multiple dates.  Note that `value` is a list.

```python
from datetime import datetime, date, timedelta

import dash_mantine_components as dmc
from dash import Input, Output, html, callback, no_update


component = html.Div(
    [
        dmc.DatePickerInput(
            id="date-picker-input-multiple",
            label="Pick dates",
            description="Pick one or more dates",
            minDate=date(2020, 8, 5),
            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],
            w=400,
            type="multiple",
            placeholder="Pick dates",
            maw=300,
            clearable=True,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-input-multiple"),
    ]
)


@callback(
    Output("selected-date-input-multiple", "children"),
    Input("date-picker-input-multiple", "value"),
)
def update_output(dates):
    prefix = "You have selected: "
    if dates:
        return prefix + ",   ".join(dates)
    else:
        return no_update
```
### Dates range

Set type="range" to allow user to pick dates range. Note that `value` is a list.

```python
from datetime import datetime, timedelta, date

import dash_mantine_components as dmc
from dash import Input, Output, html, callback
from dash.exceptions import PreventUpdate

component = html.Div(
    [
        dmc.DatePickerInput(
            id="date-input-range-picker",
            label="Date Range",
            description="Select a date range",
            minDate=date(2020, 8, 5),
            type="range",
            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],
            maw=300,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-input-range-picker"),
    ]
)


@callback(
    Output("selected-date-input-range-picker", "children"),
    Input("date-input-range-picker", "value"),
)
def update_output(dates):
    prefix = "You have selected from "
    if None not in dates:
        return prefix + "   to   ".join(dates)
    else:
        raise PreventUpdate
```
### Presets

Use `presets` prop to add custom date presets. Presets are displayed next to the calendar:

```python
from datetime import date, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


today = date.today()

component = dmc.DatePickerInput(
    label="With presets",
    placeholder="Select date",
    presets=[
        {
            "value": (today - timedelta(days=1)).isoformat(),
            "label": "Yesterday",
        },
        {
            "value": today.isoformat(),
            "label": "Today",
        },
        {
            "value": (today + timedelta(days=1)).isoformat(),
            "label": "Tomorrow",
        },
        {
            "value": (today + relativedelta(months=1)).isoformat(),
            "label": "Next month",
        },
        {
            "value": (today + relativedelta(years=1)).isoformat(),
            "label": "Next year",
        },
        {
            "value": (today - relativedelta(months=1)).isoformat(),
            "label": "Last month",
        },
        {
            "value": (today - relativedelta(years=1)).isoformat(),
            "label": "Last year",
        },
    ],
    maw=200
)
```
To use `presets` with `type="range"`, define value a tuple of two dates:

```python
from datetime import date, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


today = date.today()

component = dmc.DatePickerInput(
    type="range",
    label="With presets",
    placeholder="Select date",
    presets=[
        {
            "value": [
                (today - timedelta(days=2)).isoformat(),
                today.isoformat(),
            ],
            "label": "Last two days",
        },
        {
            "value": [
                (today - timedelta(days=7)).isoformat(),
                today.isoformat(),
            ],
            "label": "Last 7 days",
        },
        {
            "value": [
                today.replace(day=1).isoformat(),
                today.isoformat(),
            ],
            "label": "This month",
        },
        {
            "value": [
                (today - relativedelta(months=1)).replace(day=1).isoformat(),
                (today.replace(day=1) - timedelta(days=1)).isoformat(),
            ],
            "label": "Last month",
        },
        {
            "value": [
                date(today.year - 1, 1, 1).isoformat(),
                date(today.year - 1, 12, 31).isoformat(),
            ],
            "label": "Last year",
        },
    ],
    maw=320
)
```
### Open picker in modal

By default, `DatePickerInput` is rendered inside `Popover`. You can change that to `Modal` by setting `dropdownType="modal"`

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.DatePickerInput(
    value=datetime.now().date(),
    dropdownType="modal",
    w=200,
)
```
### Number of columns

```python
import dash_mantine_components as dmc

component = dmc.DatePickerInput(w=250, type="range", numberOfColumns=2)
```
### Value format

Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.Group(
    gap="xl",
    children=[
        dmc.DatePickerInput(
            value=datetime.now().date(),
            valueFormat="ddd, MMM D YY",
            label="ddd, MMM D YY",
            w=200,
        ),
        dmc.DatePickerInput(
            value=datetime.now().date(),
            valueFormat="MMMM DD, YY",
            label="MMMM DD, YY",
            w=200,
        ),
        dmc.DatePickerInput(
            value=datetime.now().date(),
            valueFormat="DD-MM-YYYY",
            label="DD-MM-YYYY",
            w=200,
        ),
    ],
)
```
### Value formatter
`valueFormatter` is a more powerful alternative to the `valueFormat` prop. It allows formatting the value label with a
custom function. The function is the same for all component types (default, multiple and range) – you need to perform
additional checks inside the function to handle different types.

Example of using a custom formatter function with `type="multiple"`:


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  


```python
import dash_mantine_components as dmc

component = dmc.DatePickerInput(
    label="Pick multiple dates",
    type="multiple",
    placeholder="Pick multiple dates",
    clearable=True,
    valueFormatter={"function": "formatDatesSelected"},
),
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDatesSelected = ({ type, date, locale, format }) => {
    if (type === "multiple" && Array.isArray(date)) {
        if (date.length === 1) {
            return dayjs(date[0]).locale(locale).format(format);
        }

        if (date.length > 1) {
            return `${date.length} dates selected`;
        }

        return "";
    }

    return "";
};
```




### Clearable

Set `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.DatePickerInput(
            value=datetime.now().date(),
            label="Date not clearable",
            w=200,
        ),
        dmc.DatePickerInput(
            value=datetime.now().date(),
            label="Date clearable",
            w=200,
            clearable=True,
        ),
    ]
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
from datetime import date

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack([
    dmc.DatePickerInput(
        label="clearSectionMode='both' (default)",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.DatePickerInput(
        label="clearSectionMode='rightSection'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.DatePickerInput(
        label="clearSectionMode='clear'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Error state

You can convey errors in your date picker by setting the `error` prop. For instance, in the below example we try to
convey the user that it's a required field and the date can't be an odd date. Since it's a required field, we also
set `clearable=False`.

```python
from datetime import datetime

import dash_mantine_components as dmc
from dash import Output, Input, callback

component = dmc.DatePickerInput(
    id="datepickerinput-error",
    value=datetime.now().date(),
    label="Date",
    required=True,
    clearable=False,
    w=200,
)


@callback(Output("datepickerinput-error", "error"), Input("datepickerinput-error", "value"))
def datepicker_error(date):
    day = datetime.strptime(date, "%Y-%M-%d").day
    return "Please select an even date." if day % 2 else ""
```
### Success state

```python
import dash_mantine_components as dmc

component = dmc.DatePickerInput(
    label="Pick a date",
    success="Looks good!"
)
```
### Localization

For information on setting locale, have a look at the [DatesProvider](/components/datesprovider) component.


### Native level select
Set the `withNativeLevelSelect` prop to replace the calendar header level button with native `<select>` elements. At 
the month level, two selects are rendered for month and year. At the year level, one select is rendered for year.

```python
import dash_mantine_components as dmc

component =  dmc.DatePickerInput(
    label="Pick date",
    placeholder="Pick date",
    withNativeLevelSelect=True,
)
```
### CSS Extensions

As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.

### 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.



#### DatePickerInput selectors

| Selector                  | Static selector                                      | Description                                                        |
| ------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------ |
| wrapper                   | `.mantine-DatePickerInput-wrapper`                   | Root element of the Input                                          |
| input                     | `.mantine-DatePickerInput-input`                     | Input element                                                      |
| section                   | `.mantine-DatePickerInput-section`                   | Left and right sections                                            |
| root                      | `.mantine-DatePickerInput-root`                      | Root element                                                       |
| label                     | `.mantine-DatePickerInput-label`                     | Label element                                                      |
| required                  | `.mantine-DatePickerInput-required`                  | Required asterisk element, rendered inside label                   |
| description               | `.mantine-DatePickerInput-description`               | Description element                                                |
| error                     | `.mantine-DatePickerInput-error`                     | Error element                                                      |
| calendarHeader            | `.mantine-DatePickerInput-calendarHeader`            | Calendar header root element                                       |
| calendarHeaderControl     | `.mantine-DatePickerInput-calendarHeaderControl`     | Previous/next calendar header controls                             |
| calendarHeaderControlIcon | `.mantine-DatePickerInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls                     |
| calendarHeaderLevel       | `.mantine-DatePickerInput-calendarHeaderLevel`       | Level control (changes levels when clicked, month → year → decade) |
| levelsGroup               | `.mantine-DatePickerInput-levelsGroup`               | Group of months levels                                             |
| yearsList                 | `.mantine-DatePickerInput-yearsList`                 | Years list table element                                           |
| yearsListRow              | `.mantine-DatePickerInput-yearsListRow`              | Years list row element                                             |
| yearsListCell             | `.mantine-DatePickerInput-yearsListCell`             | Years list cell element                                            |
| yearsListControl          | `.mantine-DatePickerInput-yearsListControl`          | Button used to pick months and years                               |
| monthsList                | `.mantine-DatePickerInput-monthsList`                | Months list table element                                          |
| monthsListRow             | `.mantine-DatePickerInput-monthsListRow`             | Months list row element                                            |
| monthsListCell            | `.mantine-DatePickerInput-monthsListCell`            | Months list cell element                                           |
| monthsListControl         | `.mantine-DatePickerInput-monthsListControl`         | Button used to pick months and years                               |
| monthThead                | `.mantine-DatePickerInput-monthThead`                | `thead` element of month table                                     |
| monthRow                  | `.mantine-DatePickerInput-monthRow`                  | `tr` element of month table                                        |
| monthTbody                | `.mantine-DatePickerInput-monthTbody`                | `tbody` element of month table                                     |
| monthCell                 | `.mantine-DatePickerInput-monthCell`                 | `td` element of month table                                        |
| month                     | `.mantine-DatePickerInput-month`                     | Month table element                                                |
| weekdaysRow               | `.mantine-DatePickerInput-weekdaysRow`               | Weekdays `tr` element                                              |
| weekday                   | `.mantine-DatePickerInput-weekday`                   | Weekday `th` element                                               |
| day                       | `.mantine-DatePickerInput-day`                       | Month day control                                                  |
| weekNumber                | `.mantine-DatePickerInput-weekNumber`                | Week number `td` element                                           |
| datePickerRoot            | `.mantine-DatePickerInput-datePickerRoot`            | Date picker root element, contains calendar and presets            |
| presetsList               | `.mantine-DatePickerInput-presetsList`               | Presets wrapper element                                            |
| presetButton              | `.mantine-DatePickerInput-presetButton`              | Preset button                                                      |
| placeholder               | `.mantine-DatePickerInput-placeholder`               | Placeholder element                                                |



#### DatePickerInput data attributes

| Selector              | Attribute             | Condition                                                             | Value                                                  |
| --------------------- | --------------------- | --------------------------------------------------------------------- | ------------------------------------------------------ |
| calendarHeaderControl | `data-direction`      | –                                                                     | `"previous"` or `"next"` depending on the control type |
| calendarHeaderControl | `data-disabled`       | Control is disabled for any reason                                    | –                                                      |
| monthCell             | `data-with-spacing`   | `withCellSpacing` prop is set                                         | –                                                      |
| day                   | `data-today`          | Date is the same as `new Date()`                                      | –                                                      |
| day                   | `data-hidden`         | Day is outside of current month and `hideOutsideDates` is set         | –                                                      |
| day                   | `data-disabled`       | Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.) | –                                                      |
| day                   | `data-weekend`        | Day is weekend                                                        | –                                                      |
| day                   | `data-outside`        | Day is outside of the current month                                   | –                                                      |
| day                   | `data-selected`       | Day is selected                                                       | –                                                      |
| day                   | `data-in-range`       | Day is in range selection                                             | –                                                      |
| day                   | `data-first-in-range` | Day is first in range selection                                       | –                                                      |
| day                   | `data-last-in-range`  | Day is last in range selection                                        | –                                                      |


### Keyword Arguments
#### DatePickerInput

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

- allowDeselect (boolean; optional):
    Determines whether user can deselect the date by clicking on
    selected item, applicable only when type="default".

- allowSingleDateInRange (boolean; optional):
    Determines whether single year can be selected as range,
    applicable only when type="range".

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

- ariaLabels (dict; optional):
    aria-label attributes for controls on different levels.

    `ariaLabels` is a dict with keys:

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

- 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.

- clearButtonProps (dict; optional):
    Props passed down to clear button.

    `clearButtonProps` is a dict with keys:

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether input value can be cleared, adds clear button
    to right section, False by default.

- closeOnChange (boolean; optional):
    Determines whether dropdown should be closed when date is
    selected, not applicable when type="multiple", True by default.

- columnsToScroll (number; optional):
    Number of columns to scroll when user clicks next/prev buttons,
    defaults to numberOfColumns.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- decadeLabelFormat (string; optional):
    dayjs label format to display decade label or a function that
    returns decade label based on date value, defaults to "YYYY".

- defaultDate (string; optional):
    Initial displayed date.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- disabledDates (boolean | number | string | dict | list; optional):
    Specifies days that should be disabled.  Either a list of dates or
    a function. See
    https://www.dash-mantine-components.com/functions-as-props.

- dropdownType (a value equal to: 'popover', 'modal'; optional):
    Type of dropdown, defaults to popover.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):
    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.

- fullWidth (boolean; optional):
    Determines whether the calendar should take the full width of its
    container default False.

- getDayProps (boolean | number | string | dict | list; optional):
    A function that passes props down Day component  based on date.
    (See https://www.dash-mantine-components.com/functions-as-props).

- getMonthControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down month picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- getYearControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down to year picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- hasNextLevel (boolean; optional):
    Determines whether next level button should be enabled, defaults
    to True.

- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):
    Controls order, `['previous', 'level', 'next']`` by default.

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

- hideOutsideDates (boolean; optional):
    Determines whether outside dates should be hidden, defaults to
    False.

- hideWeekdays (boolean; optional):
    Determines whether weekdays row should be hidden, defaults to
    False.

- highlightToday (boolean; optional):
    Determines whether today should be highlighted with a border,
    False by default.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- labelSeparator (string; optional):
    Separator between range value.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

- level (a value equal to: 'month', 'year', 'decade'; optional):
    Current level displayed to the user (decade, year, month), used
    for controlled component.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDate (string; optional):
    Maximum possible date.

- maxLevel (a value equal to: 'month', 'year', 'decade'; optional):
    Max level that user can go up to (decade, year, month), defaults
    to decade.

- minDate (string; optional):
    Minimum possible date.

- 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.

- modalProps (dict; optional):
    Props passed down to Modal component.

    `modalProps` is a dict with keys:

- monthLabelFormat (string; optional):
    dayjs label format to display month label or a function that
    returns month label based on month value, defaults to "MMMM
    YYYY".

- monthsListFormat (string; optional):
    dayjs format for months list.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- nextIcon (a list of or a singular dash component, string or number; optional):
    Change next icon.

- nextLabel (string; optional):
    aria-label for next button.

- numberOfColumns (number; optional):
    Number of columns to render next to each other.

- 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.

- placeholder (string; optional):
    Input placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- popoverProps (dict; optional):
    Props passed down to Popover component.

    `popoverProps` is a dict with keys:

- presets (list of dicts; optional):
    Predefined values to pick from.

    `presets` is a list of dicts with keys:

- previousIcon (a list of or a singular dash component, string or number; optional):
    Change previous icon.

- previousLabel (string; optional):
    aria-label for previous button.

- 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 user can modify the value.

- renderDay (boolean | number | string | dict | list; optional):
    A function that controls day value rendering. (See
    https://www.dash-mantine-components.com/functions-as-props).

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size.

- sortDates (boolean; optional):
    Determines whether dates value should be sorted before onChange
    call, only applicable when type="multiple", True by default.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- type (a value equal to: 'default', 'multiple', 'range'; default 'default'):
    Picker type: range, multiple or default.

- value (string | list of strings; optional):
    Value for controlled component.

- valueFormat (string; optional):
    Dayjs format to display input value, "MMMM D, YYYY" by default.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format selected dates values into a string. By
    default, date is formatted based on the input type.

- variant (string; optional):
    variant.

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

- weekdayFormat (string; optional):
    dayjs format for weekdays names, defaults to "dd".

- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):
    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,
    defaults to value defined in DatesProvider.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withCellSpacing (boolean; optional):
    Determines whether controls should be separated by spacing, True
    by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withNativeLevelSelect (boolean; optional):
    Determines whether level select controls should be rendered as
    native `<select>` elements default False.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- withWeekNumbers (boolean; optional):
    Determines whether week numbers should be displayed, False by
    default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

- yearLabelFormat (string; optional):
    dayjs label format to display year label or a function that
    returns year label based on year value, defaults to "YYYY".

- yearsListFormat (string; optional):
    dayjs format for years list, `'YYYY'` by default.

- yearsSelectRange (list of 2 elements: [number, number]; optional):
    Year range for native level select, tuple of `[startYear,
    endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or
    values derived from `minDate`/`maxDate` if set.

## DateTimePicker  
Capture datetime from the user  
Category: Date Pickers  

### DatePicker props
`DateTimePicker` supports most of the `DatePicker` props, read through [DatePicker](/components/datepicker) documentation to learn about all component features that are not listed on this page.

### Simple Example

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


component = html.Div(
    [
        dmc.DateTimePicker(
            id="datetime-picker",
            label="Start Date and time",
            description="You can also provide a description",
            w=250,
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-datetime"),
    ]
)


@callback(Output("selected-datetime", "children"), Input("datetime-picker", "value"))
def update_output(d):
    return f"You have selected {d}"
```
### Range
Set `type="range"` to allow selecting a date and time range. In range mode, two time inputs are rendered for start and
end times, and a range summary is displayed below:


```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    label="Pick date and time range",
    placeholder="Pick date and time range",
    type="range",
)
```
### With Seconds


```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    label="Pick date and time",
    placeholder="Pick date and time",
    withSeconds=True,
)
```
### Presets

Use `presets` prop to add custom date presets. Presets are displayed next to the calendar:

```python
from datetime import datetime, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


now = datetime.now()

component = dmc.DateTimePicker(
    label="Pick date and time",
    placeholder="Pick date and time",
    presets=[
        {
            "value": (now - timedelta(days=1)).isoformat(),
            "label": "Yesterday",
        },
        {
            "value": now.isoformat(),
            "label": "Today",
        },
        {
            "value": (now + timedelta(days=1)).isoformat(),
            "label": "Tomorrow",
        },
        {
            "value": (now + relativedelta(months=1)).isoformat(),
            "label": "Next month",
        },
        {
            "value": (now + relativedelta(years=1)).isoformat(),
            "label": "Next year",
        },
        {
            "value": (now - relativedelta(months=1)).isoformat(),
            "label": "Last month",
        },
        {
            "value": (now - relativedelta(years=1)).isoformat(),
            "label": "Last year",
        },
    ]
)
```
### TimePicker props
You can pass props down to the underlying [TimePicker](//components/timepicker) component with `timePickerProps` prop. Example of enabling 
dropdown and setting 12h format for time picker:

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    label="Pick date and time",
    placeholder="Pick Date and time",
    timePickerProps={
        "withDropdown": True,
        "popoverProps": { "withinPortal": False },
        "format": '12h',
      }
)
```
### Value format

Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.

```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    valueFormat="DD MMM YYYY hh:mm A",
    label="Pick date and time",
    placeholder="Pick date and time",
)
```
`valueFormat` also accepts a function that receives the value as a YYYY-MM-DD HH:mm:ss string and returns a custom
formatted value. Use it when the formatting logic cannot be expressed with a dayjs format string:


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  


```python
import dash_mantine_components as dmc


# Add dayjs as external script to make it available to the function
# app = Dash(external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])


component = dmc.DateTimePicker(
    label="Pick date and time",
    valueFormat={"function": "formatDateTimePicker"},
    value="2026-10-14 14:45:00"
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDateTimePicker = (date) =>
    dayjs(date).format('dddd, MMMM D [at] h:mm A')
```


### Disabled state

```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    disabled=True,
    label="Pick date and time (Disabled)",
    placeholder="Pick date and time",
)
```
### Input props

### Clearable

Set `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    clearable=True,
    value="2025-01-01",
    label="Pick date and time (clearable)",
    placeholder="Pick Date and time",
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`

```python
from datetime import date

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack([
    dmc.DateTimePicker(
        label="clearSectionMode='both' (default)",
        placeholder="Pick a date and time",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.DateTimePicker(
        label="clearSectionMode='rightSection'",
        placeholder="Pick a date and time",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.DateTimePicker(
        label="clearSectionMode='clear'",
        placeholder="Pick a date and time",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Open picker in modal

By default, `DateTimePicker` is rendered inside `Popover`. You can change that to `Modal` by setting `dropdownType="modal"`

```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    dropdownType="modal",
    label="Pick date and time (picker in modal)",
    placeholder="Pick date and time",
)
```
### Native level select
Set the `withNativeLevelSelect` prop to replace the calendar header level button with native `<select>` elements. At 
the month level, two selects are rendered for month and year. At the year level, one select is rendered for year.

```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    label="Pick date and time",
    placeholder = "Pick date and time",
    withNativeLevelSelect=True,
)
```
### CSS Extensions

As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.




### 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.


#### DateTimePicker selectors

| Selector                    | Static selector                               | Description                                                 |
|-----------------------------|-----------------------------------------------|-------------------------------------------------------------|
| wrapper                     | .mantine-DateTimePicker-wrapper               | Root element of the Input                                   |
| input                       | .mantine-DateTimePicker-input                 | Input element                                               |
| section                     | .mantine-DateTimePicker-section               | Left and right sections                                     |
| root                        | .mantine-DateTimePicker-root                  | Root element                                                |
| label                       | .mantine-DateTimePicker-label                 | Label element                                               |
| required                    | .mantine-DateTimePicker-required              | Required asterisk element, rendered inside label            |
| description                 | .mantine-DateTimePicker-description           | Description element                                         |
| error                       | .mantine-DateTimePicker-error                 | Error element                                               |
| calendarHeader              | .mantine-DateTimePicker-calendarHeader        | Calendar header root element                                |
| calendarHeaderControl       | .mantine-DateTimePicker-calendarHeaderControl | Previous/next calendar header controls                      |
| calendarHeaderControlIcon   | .mantine-DateTimePicker-calendarHeaderControlIcon | Icon of previous/next calendar header controls           |
| calendarHeaderLevel         | .mantine-DateTimePicker-calendarHeaderLevel   | Level control (changes levels when clicked, month -> year -> decade) |
| levelsGroup                 | .mantine-DateTimePicker-levelsGroup           | Group of months levels                                      |
| yearsList                   | .mantine-DateTimePicker-yearsList             | Years list table element                                    |
| yearsListRow                | .mantine-DateTimePicker-yearsListRow          | Years list row element                                      |
| yearsListCell               | .mantine-DateTimePicker-yearsListCell         | Years list cell element                                     |
| yearsListControl            | .mantine-DateTimePicker-yearsListControl      | Button used to pick months and years                        |
| monthsList                  | .mantine-DateTimePicker-monthsList            | Months list table element                                   |
| monthsListRow               | .mantine-DateTimePicker-monthsListRow         | Months list row element                                     |
| monthsListCell              | .mantine-DateTimePicker-monthsListCell        | Months list cell element                                    |
| monthsListControl           | .mantine-DateTimePicker-monthsListControl     | Button used to pick months and years                        |
| monthThead                  | .mantine-DateTimePicker-monthThead            | thead element of month table                                |
| monthRow                    | .mantine-DateTimePicker-monthRow              | tr element of month table                                   |
| monthTbody                  | .mantine-DateTimePicker-monthTbody            | tbody element of month table                                |
| monthCell                   | .mantine-DateTimePicker-monthCell             | td element of month table                                   |
| month                       | .mantine-DateTimePicker-month                 | Month table element                                         |
| weekdaysRow                 | .mantine-DateTimePicker-weekdaysRow           | Weekdays tr element                                         |
| weekday                     | .mantine-DateTimePicker-weekday               | Weekday th element                                          |
| day                         | .mantine-DateTimePicker-day                   | Month day control                                           |
| timeWrapper                 | .mantine-DateTimePicker-timeWrapper           | Wrapper around time input and submit button                 |
| timeInput                   | .mantine-DateTimePicker-timeInput             | TimeInput                                                   |
| submitButton                | .mantine-DateTimePicker-submitButton          | Submit button                                               |

#### DateTimePicker data attributes

| Selector              | Attribute          | Condition                                                | Value                                        |
|-----------------------|--------------------|----------------------------------------------------------|----------------------------------------------|
| calendarHeaderControl  | data-direction     | –                                                        | "previous" or "next" depending on the control type |
| calendarHeaderControl  | data-disabled      | Control is disabled for any reason                        | –                                            |
| monthCell             | data-with-spacing  | `withCellSpacing` prop is set                             | –                                            |
| day                   | data-today         | Date is the same as `new Date()`                          | –                                            |
| day                   | data-hidden        | Day is outside of current month and `hideOutsideDates` is set | –                                         |
| day                   | data-disabled      | Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.) | –                                      |
| day                   | data-weekend       | Day is weekend                                            | –                                            |
| day                   | data-outside       | Day is outside of the current month                       | –                                            |
| day                   | data-selected      | Day is selected                                           | –                                            |
| day                   | data-in-range      | Day is in range selection                                 | –                                            |
| day                   | data-first-in-range| Day is first in range selection                           | –                                            |
| day                   | data-last-in-range | Day is last in range selection                            | –                                            |



### Keyword Arguments
#### DateTimePicker

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

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

- ariaLabels (dict; optional):
    aria-label attributes for controls on different levels.

    `ariaLabels` is a dict with keys:

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

- 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.

- clearButtonProps (dict; optional):
    Props passed down to clear button.

    `clearButtonProps` is a dict with keys:

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether input value can be cleared, adds clear button
    to right section, False by default.

- columnsToScroll (number; optional):
    Number of columns to scroll when user clicks next/prev buttons,
    defaults to numberOfColumns.

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

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

- debounce (number; default 0):
    Debounce time in ms.

- decadeLabelFormat (string; optional):
    dayjs label format to display decade label or a function that
    returns decade label based on date value, defaults to "YYYY".

- defaultDate (string; optional):
    Initial displayed date.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- disabledDates (boolean | number | string | dict | list; optional):
    Specifies days that should be disabled.  Either a list of dates or
    a function. See
    https://www.dash-mantine-components.com/functions-as-props.

- dropdownType (a value equal to: 'popover', 'modal'; optional):
    Type of dropdown, defaults to popover.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):
    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.

- fullWidth (boolean; optional):
    Determines whether the calendar should take the full width of its
    container default False.

- getDayProps (boolean | number | string | dict | list; optional):
    A function that passes props down Day component  based on date.
    (See https://www.dash-mantine-components.com/functions-as-props).

- getMonthControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down month picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- getYearControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down to year picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- hasNextLevel (boolean; optional):
    Determines whether next level button should be enabled, defaults
    to True.

- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):
    Controls order, `['previous', 'level', 'next']`` by default.

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

- hideOutsideDates (boolean; optional):
    Determines whether outside dates should be hidden, defaults to
    False.

- hideWeekdays (boolean; optional):
    Determines whether weekdays row should be hidden, defaults to
    False.

- highlightToday (boolean; optional):
    Determines whether today should be highlighted with a border,
    False by default.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- labelSeparator (string; optional):
    Separator between range value.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

- level (a value equal to: 'month', 'year', 'decade'; optional):
    Current level displayed to the user (decade, year, month), used
    for controlled component.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDate (string; optional):
    Maximum possible date.

- minDate (string; optional):
    Minimum possible date.

- 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.

- modalProps (dict; optional):
    Props passed down to Modal component.

    `modalProps` is a dict with keys:

- monthLabelFormat (string; optional):
    dayjs label format to display month label or a function that
    returns month label based on month value, defaults to "MMMM
    YYYY".

- monthsListFormat (string; optional):
    dayjs format for months list.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- nextIcon (a list of or a singular dash component, string or number; optional):
    Change next icon.

- nextLabel (string; optional):
    aria-label for next button.

- numberOfColumns (number; optional):
    Number of columns to render next to each other.

- 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.

- placeholder (string; optional):
    Input placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- popoverProps (dict; optional):
    Props passed down to Popover component.

    `popoverProps` is a dict with keys:

- presets (list of dicts; optional):
    Predefined values to pick from.

    `presets` is a list of dicts with keys:

- previousIcon (a list of or a singular dash component, string or number; optional):
    Change previous icon.

- previousLabel (string; optional):
    aria-label for previous button.

- 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 user can modify the value.

- renderDay (boolean | number | string | dict | list; optional):
    A function that controls day value rendering. (See
    https://www.dash-mantine-components.com/functions-as-props).

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size.

- sortDates (boolean; optional):
    Determines whether dates value should be sorted before onChange
    call, only applicable when type="multiple", True by default.

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

- submitButtonProps (boolean | number | string | dict | list; optional):
    Props passed down to the submit button.

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- timePickerProps (dict; optional):
    Props passed the TimePicker component.

- type (a value equal to: 'default', 'range'; optional):
    Picker type: range or default default 'default'.

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

- valueFormat (string | dict; optional):
    Dayjs format to display input value, "DD/MM/YYYY HH:mm" by
    default or function.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format selected dates values into a string. By
    default, date is formatted based on the input type.

- variant (string; optional):
    variant.

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

- weekdayFormat (string; optional):
    dayjs format for weekdays names, defaults to "dd".

- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):
    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,
    defaults to value defined in DatesProvider.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withCellSpacing (boolean; optional):
    Determines whether controls should be separated by spacing, True
    by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withNativeLevelSelect (boolean; optional):
    Determines whether level select controls should be rendered as
    native `<select>` elements default False.

- withSeconds (boolean; optional):
    Determines whether seconds input should be rendered.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- withWeekNumbers (boolean; optional):
    Determines whether week numbers should be displayed, False by
    default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

- yearLabelFormat (string; optional):
    dayjs label format to display year label or a function that
    returns year label based on year value, defaults to "YYYY".

- yearsListFormat (string; optional):
    dayjs format for years list, `'YYYY'` by default.

- yearsSelectRange (list of 2 elements: [number, number]; optional):
    Year range for native level select, tuple of `[startYear,
    endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or
    values derived from `minDate`/`maxDate` if set.

## DatesProvider  
DatesProvider component lets you set various settings that are shared across all date components.  
Category: Date Pickers  

### Usage

The DatesProvider component lets you set various settings that are shared across all date components. DatesProvider supports the following settings:

- `locale` – dayjs locale, note that you also need to import corresponding locale module from dayjs. Default value is en.
- `firstDayOfWeek` – number from 0 to 6, where 0 is Sunday and 6 is Saturday. Default value is 1 – Monday.
- `weekendDays` – an array of numbers from 0 to 6, where 0 is Sunday and 6 is Saturday. Default value is [0, 6] – Saturday and Sunday.
- `consistentWeeks` – boolean, if true every month will have 6 weeks. Default value is false.



### Locale

DatePicker component uses [dayjs](https://day.js.org) behind the scenes. So you can easily customize locale by including
required locale data and setting the `locale`. Make sure to include proper localization file from dayjs library.

 - [dayjs internationalization](https://day.js.org/docs/en/i18n/i18n)
 - [Loading locale in the browser](https://day.js.org/docs/en/installation/browser#cdn-resource)
 - [Supported locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)

```python
from dash import Dash
import dash_mantine_components as dmc

scripts = [
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",      # dayjs  
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/fr.min.js",  # french locale
]

app = Dash(external_scripts=scripts)
```

```python
import dash_mantine_components as dmc

component = dmc.DatesProvider(
    children=dmc.Stack(
        [
            dmc.DatePickerInput(
                w=250,
                label="Sélectionner une date",
            ),
            dmc.DatePickerInput(
                w=250,
                label="Sélectionner une autre date",
            ),
        ]
    ),
    settings={"locale": "fr", "firstDayOfWeek": 0, "weekendDays": [0]},
)
```
### Consistent weeks
If you want to avoid layout shifts, set `consistentWeeks=True` in `DatesProvider` settings. This will make sure that 
every month has 6 weeks, even if outside days are not in the same month.


```python
import dash_mantine_components as dmc

component = dmc.DatesProvider(
    children=dmc.DatePickerInput(
                h=400,
                popoverProps={
                    "opened": True,
                    "position": "bottom",
                    "middlewares":{ "flip": False, "shift": False }
                }
            ),
    settings={"consistentWeeks": True},
)
```
### Keyword Arguments

#### DatesProvider

- children (a list of or a singular dash component, string or number; optional)

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

- settings (dict; required)

    `settings` is a dict with keys:

## MiniCalendar  
Compact calendar to display a small number of days in a row  
Category: Date Pickers  

### Simple Example

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


component = dmc.Stack([
    dmc.MiniCalendar(
        defaultDate="2025-01-02",
        value="2025-01-03",
        id="mini-calendar"
    ),
    dmc.Text(id="mini-calendar-date", m="md")
])

@callback(
    Output("mini-calendar-date", "children"),
    Input("mini-calendar", "value"),
)
def update(d):
    return f"You selected: {d}"
```
### Number of days

Use numberOfDays prop to control how many days are displayed at once. The default value is 7.


```python
import dash_mantine_components as dmc

component = dmc.MiniCalendar(numberOfDays=5)
```
### getDayProps


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

Use `getDayProps` to add custom props to days, for example, assign styles to weekends:


```python
import dash_mantine_components as dmc

component = dmc.MiniCalendar(
    numberOfDays=8,
    getDayProps={"function":"weekendRed"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

// dayjs is loaded globally via Dash external_scripts.
// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider
var dayjs = window.dayjs;

dmcfuncs.weekendRed = function (dateStr) {
  const d = dayjs(dateStr);

  if ([0, 6].includes(d.day())) {
    return {
      style: {
        color: 'var(--mantine-color-red-8)',
      },
    };
  }

  return {};
};
```


### Min and max dates
Use `minDate` and `maxDate` props to limit date selection:


```python
import dash_mantine_components as dmc

component = dmc.MiniCalendar(
    numberOfDays=6,
    defaultDate="2025-04-13",
    minDate = "2025-04-14",
    maxDate = "2025-04-24",
)
```
### Localization
You can change localization both on component level with locale prop and globally with [DatesProvider](/components/datesprovider).


```python
import dash_mantine_components as dmc


component = dmc.DatesProvider(
    dmc.MiniCalendar(locale="fr", defaultDate="2025-04-01"),
    settings={"locale": "fr"}
)
```
### 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.


Here’s your content reformatted as Markdown tables:

#### MiniCalendar selectors

| Selector  | Static selector                   | Description                                                                |
| --------- | --------------------------------- | -------------------------------------------------------------------------- |
| root      | `.mantine-MiniCalendar-root`      | Root element                                                               |
| control   | `.mantine-MiniCalendar-control`   | Button in the dropdown which is used to select hours/minutes/seconds/am-pm |
| days      | `.mantine-MiniCalendar-days`      | Days container                                                             |
| day       | `.mantine-MiniCalendar-day`       | Single day element                                                         |
| dayMonth  | `.mantine-MiniCalendar-dayMonth`  | Day element in month view                                                  |
| dayNumber | `.mantine-MiniCalendar-dayNumber` | Day number element                                                         |

---

#### MiniCalendar CSS variables

| Selector | Variable                    | Description                                       |
| -------- | --------------------------- | ------------------------------------------------- |
| root     | `--mini-calendar-font-size` | Controls size of all elements (based on em units) |

---

#### MiniCalendar data attributes

| Selector | Attribute | Condition                                              | Value                |
| -------- | --------- | ------------------------------------------------------ | -------------------- |
| control  | disabled  | Next/previous range is after maxDate or before minDate | –                    |
| control  | direction | –                                                      | `previous` or `next` |
| day      | selected  | The day matches the value                              | –                    |
| day      | disabled  | The day is before minDate or after maxDate             | –                    |

---


### Keyword Arguments
#### MiniCalendar

- 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.

- 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.

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

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

- date (string; optional):
    Controlled component date value, start date of the interval.

- defaultDate (string; optional):
    Uncontrolled component default value, start date of the interval.

- getDayProps (boolean | number | string | dict | list; optional):
    A function that passes props down Day component  based on date.
    (See https://www.dash-mantine-components.com/functions-as-props).

- 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:

- locale (string; optional):
    dayjs locale used for formatting.

- maxDate (string; optional):
    Maximum date that can be selected, date object or date string in
    `YYYY-MM-DD` format.

- minDate (string; optional):
    Minimum date that can be selected, date object or date string in
    `YYYY-MM-DD` format.

- 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.

- monthLabelFormat (string; optional):
    Dayjs format string for month label default `MMM`.

- numberOfDays (number; optional):
    Number of days to display in the calendar default 7.

- 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.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size default 'sm'.

- 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.

- value (string; optional):
    Selected date, controlled value.

- variant (string; optional):
    variant.

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

## MonthPickerInput  
Month, multiple months and months range picker input  
Category: Date Pickers  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    label="Pick date",
    placeholder="Pick date",
)
```
### Multiple dates

Set type="multiple" to allow user to pick multiple months.  Note that `value` is a list.

```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    type="multiple",
    label="Pick multiple dates",
    placeholder="Pick dates",
)
```
### Dates range

Set type="range" to allow user to pick dates range. Note that `value` is a list.

```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    type="range",
    label="Pick dates range",
    placeholder="Pick dates range",
)
```
### Presets
Use the `presets` prop to add custom month presets. Presets are displayed next to the calendar:

```python
from datetime import date
from dateutil.relativedelta import relativedelta

import dash_mantine_components as dmc

today = date.today()
start_of_month = lambda months: (today.replace(day=1) + relativedelta(months=months)).isoformat()

component = dmc.MonthPickerInput(
    label="With presets",
    placeholder="Select month",
    presets=[
        {"value": start_of_month(0), "label": "This month"},
        {"value": start_of_month(1), "label": "Next month"},
        {"value": start_of_month(-1), "label": "Last month"},
        {"value": start_of_month(6), "label": "In 6 months"},
        {"value": start_of_month(12), "label": "Next year"},
        {"value": start_of_month(-12), "label": "Last year"},
    ],
)
```
To use `presets`` with type="range"`, define the value as a tuple of two dates:

```python
from datetime import date
from dateutil.relativedelta import relativedelta

import dash_mantine_components as dmc

today = date.today()
start_of_month = lambda months: (today.replace(day=1) + relativedelta(months=months)).isoformat()
start_of_year = lambda years: date(today.year + years, 1, 1).isoformat()

component = dmc.MonthPickerInput(
    type="range",
    label="With presets",
    placeholder="Select months range",
    presets=[
        {
            "value": [start_of_month(-3), start_of_month(0)],
            "label": "Last 3 months",
        },
        {
            "value": [start_of_month(-6), start_of_month(0)],
            "label": "Last 6 months",
        },
        {
            "value": [start_of_year(0), start_of_month(0)],
            "label": "This year",
        },
        {
            "value": [start_of_year(-1), date(today.year - 1, 12, 1).isoformat()],
            "label": "Last year",
        },
    ],
)
```
### Open picker in modal

By default, MonthPickerInput is rendered inside Popover. You can change that to Modal by setting dropdownType="modal"

```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    dropdownType="modal",
    label="Pick date (picker in modal)",
    placeholder="Pick date",
)
```
### Number of columns

```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    label="Pick date", placeholder="Pick date", numberOfColumns=2
)
```
### Value format

Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.

```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    valueFormat="YYYY MMM",
    type="multiple",
    label="Pick month (Value Formatter)",
    placeholder="Pick month",
)
```
### Value formatter
`valueFormatter` is a more powerful alternative to the `valueFormat` prop. It allows formatting the value label with a
custom function. The function is the same for all component types (default, multiple and range) – you need to perform
additional checks inside the function to handle different types.

Example of using a custom formatter function with `type="multiple"`:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  


```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    type="multiple",
    label="Pick multiple dates",
    placeholder="Pick multiple dates",
    valueFormatter={"function": "formatDatesSelected"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDatesSelected = ({ type, date, locale, format }) => {
    if (type === "multiple" && Array.isArray(date)) {
        if (date.length === 1) {
            return dayjs(date[0]).locale(locale).format(format);
        }

        if (date.length > 1) {
            return `${date.length} dates selected`;
        }

        return "";
    }

    return "";
};
```

### Clearable

Set `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    clearable=True,
    value=datetime.now(),
    label="Pick date (clearable)",
    placeholder="Pick Date",
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
from datetime import date

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack([
    dmc.MonthPickerInput(
        label="clearSectionMode='both' (default)",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.MonthPickerInput(
        label="clearSectionMode='rightSection'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.MonthPickerInput(
        label="clearSectionMode='clear'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### With Icon

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.MonthPickerInput(
    leftSection=DashIconify(icon="fa:calendar"),
    leftSectionPointerEvents="none",
    label="Pick date",
    placeholder="Pick date",
)
```
### Min and Max Date

```python
from datetime import datetime, timedelta

import dash_mantine_components as dmc

component = dmc.MonthPickerInput(
    minDate=datetime(2022, 1, 1),
    maxDate=datetime(2022, 8, 1),
    value=datetime(2022, 1, 1),
    placeholder="Date input",
    label="Select valid date",
    w=250,
)
```
### Native level select
Set the `withNativeLevelSelect` prop to replace the calendar header level button with native `<select>` elements.

```python
import dash_mantine_components as dmc

component = dmc.MonthPickerInput(withNativeLevelSelect=True, label="Select a month")
```
### CSS Extensions

As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.



### 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.


#### MonthPickerInput selectors

| Selector                   | Static selector                                        | Description                                                           |
| ---------------------------| ------------------------------------------------------ | --------------------------------------------------------------------- |
| `wrapper`                  | `.mantine-MonthPickerInput-wrapper`                    | Root element of the Input                                              |
| `input`                    | `.mantine-MonthPickerInput-input`                      | Input element                                                         |
| `section`                  | `.mantine-MonthPickerInput-section`                    | Left and right sections                                                |
| `root`                     | `.mantine-MonthPickerInput-root`                       | Root element                                                          |
| `label`                    | `.mantine-MonthPickerInput-label`                      | Label element                                                         |
| `required`                 | `.mantine-MonthPickerInput-required`                   | Required asterisk element, rendered inside label                       |
| `description`              | `.mantine-MonthPickerInput-description`                | Description element                                                    |
| `error`                    | `.mantine-MonthPickerInput-error`                      | Error element                                                         |
| `calendarHeader`           | `.mantine-MonthPickerInput-calendarHeader`             | Calendar header root element                                           |
| `calendarHeaderControl`     | `.mantine-MonthPickerInput-calendarHeaderControl`      | Previous/next calendar header controls                                 |
| `calendarHeaderControlIcon` | `.mantine-MonthPickerInput-calendarHeaderControlIcon`  | Icon of previous/next calendar header controls                         |
| `calendarHeaderLevel`       | `.mantine-MonthPickerInput-calendarHeaderLevel`        | Level control (changes levels when clicked, month -> year -> decade)   |
| `levelsGroup`              | `.mantine-MonthPickerInput-levelsGroup`                | Group of decades levels                                                |
| `yearsList`                | `.mantine-MonthPickerInput-yearsList`                  | Years list table element                                               |
| `yearsListRow`             | `.mantine-MonthPickerInput-yearsListRow`               | Years list row element                                                 |
| `yearsListCell`            | `.mantine-MonthPickerInput-yearsListCell`              | Years list cell element                                                |
| `yearsListControl`         | `.mantine-MonthPickerInput-yearsListControl`           | Button used to pick months and years                                   |
| `monthsList`               | `.mantine-MonthPickerInput-monthsList`                 | Years list table element                                               |
| `monthsListRow`            | `.mantine-MonthPickerInput-monthsListRow`              | Years list row element                                                 |
| `monthsListCell`           | `.mantine-MonthPickerInput-monthsListCell`             | Years list cell element                                                |
| `monthsListControl`        | `.mantine-MonthPickerInput-monthsListControl`          | Button used to pick months and years                                   |
| `placeholder`              | `.mantine-MonthPickerInput-placeholder`                | Placeholder element                                                    |

#### MonthPickerInput data attributes

| Selector              | Attribute      | Condition                           | Value                              |
| --------------------- | -------------- | ----------------------------------- | ---------------------------------- |
| `calendarHeaderControl`| `data-direction`| –                                   | "previous" or "next" depending on the control type |
| `calendarHeaderControl`| `data-disabled`| Control is disabled for any reason  | –                                  |


### Keyword Arguments
#### MonthPickerInput

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

- allowDeselect (boolean; optional):
    Determines whether user can deselect the date by clicking on
    selected item, applicable only when type="default".

- allowSingleDateInRange (boolean; optional):
    Determines whether single year can be selected as range,
    applicable only when type="range".

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

- ariaLabels (dict; optional):
    aria-label attributes for controls on different levels.

    `ariaLabels` is a dict with keys:

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

- 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.

- clearButtonProps (dict; optional):
    Props passed down to clear button.

    `clearButtonProps` is a dict with keys:

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether input value can be cleared, adds clear button
    to right section, False by default.

- closeOnChange (boolean; optional):
    Determines whether dropdown should be closed when date is
    selected, not applicable when type="multiple", True by default.

- columnsToScroll (number; optional):
    Number of columns to scroll when user clicks next/prev buttons,
    defaults to numberOfColumns.

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

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

- debounce (number | boolean; default False):
    Debounce time in ms.

- decadeLabelFormat (string; optional):
    dayjs label format to display decade label or a function that
    returns decade label based on date value, defaults to "YYYY".

- defaultDate (string; optional):
    Initial displayed date.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- dropdownType (a value equal to: 'popover', 'modal'; optional):
    Type of dropdown, defaults to popover.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- firstDayOfWeek (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional):
    number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday.

- fullWidth (boolean; optional):
    Determines whether the calendar should take the full width of its
    container default False.

- getDayProps (boolean | number | string | dict | list; optional):
    A function that passes props down Day component  based on date.
    (See https://www.dash-mantine-components.com/functions-as-props).

- getMonthControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down month picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- getYearControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down to year picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

- hasNextLevel (boolean; optional):
    Determines whether next level button should be enabled, defaults
    to True.

- headerControlsOrder (list of a value equal to: 'level', 'next', 'previous's; optional):
    Controls order, `['previous', 'level', 'next']`` by default.

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

- hideOutsideDates (boolean; optional):
    Determines whether outside dates should be hidden, defaults to
    False.

- hideWeekdays (boolean; optional):
    Determines whether weekdays row should be hidden, defaults to
    False.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- labelSeparator (string; optional):
    Separator between range value.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

- level (a value equal to: 'year', 'decade'; optional):
    Current level displayed to the user (decade, year), used for
    controlled component.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDate (string; optional):
    Maximum possible date.

- maxLevel (a value equal to: 'year', 'decade'; optional):
    Max level that user can go up to (decade, year), defaults to
    decade.

- minDate (string; optional):
    Minimum possible date.

- 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.

- modalProps (dict; optional):
    Props passed down to Modal component.

    `modalProps` is a dict with keys:

- monthLabelFormat (string; optional):
    dayjs label format to display month label or a function that
    returns month label based on month value, defaults to "MMMM
    YYYY".

- monthsListFormat (string; optional):
    dayjs format for months list.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- nextIcon (a list of or a singular dash component, string or number; optional):
    Change next icon.

- nextLabel (string; optional):
    aria-label for next button.

- numberOfColumns (number; optional):
    Number of columns to render next to each other.

- 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.

- placeholder (string; optional):
    Input placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- popoverProps (dict; optional):
    Props passed down to Popover component.

    `popoverProps` is a dict with keys:

- presets (list of dicts; optional):
    Predefined values to pick from.

    `presets` is a list of dicts with keys:

- previousIcon (a list of or a singular dash component, string or number; optional):
    Change previous icon.

- previousLabel (string; optional):
    aria-label for previous button.

- 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 user can modify the value.

- renderDay (boolean | number | string | dict | list; optional):
    A function that controls day value rendering. (See
    https://www.dash-mantine-components.com/functions-as-props).

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size.

- sortDates (boolean; optional):
    Determines whether dates value should be sorted before onChange
    call, only applicable when type="multiple", True by default.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- type (a value equal to: 'default', 'multiple', 'range'; optional):
    Picker type: range, multiple or default.

- value (string | list of strings; optional):
    Value for controlled component.

- valueFormat (string; optional):
    Dayjs format to display input value, "MMMM D, YYYY" by default.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format selected dates values into a string. By
    default, date is formatted based on the input type.

- variant (string; optional):
    variant.

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

- weekdayFormat (string; optional):
    dayjs format for weekdays names, defaults to "dd".

- weekendDays (list of a value equal to: 0, 1, 2, 3, 4, 5, 6s; optional):
    Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday,
    defaults to value defined in DatesProvider.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withCellSpacing (boolean; optional):
    Determines whether controls should be separated by spacing, True
    by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withNativeLevelSelect (boolean; optional):
    Determines whether level select controls should be rendered as
    native `<select>` elements default False.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- withWeekNumbers (boolean; optional):
    Determines whether week numbers should be displayed, False by
    default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

- yearLabelFormat (string; optional):
    dayjs label format to display year label or a function that
    returns year label based on year value, defaults to "YYYY".

- yearsListFormat (string; optional):
    dayjs format for years list, `'YYYY'` by default.

- yearsSelectRange (list of 2 elements: [number, number]; optional):
    Year range for native level select, tuple of `[startYear,
    endYear]`. Defaults to `[currentYear - 100, currentYear + 50]` or
    values derived from `minDate`/`maxDate` if set.

## TimeGrid  
Captures time value from the user with a predefined set of options.  
Category: Date Pickers  

### Simple Example


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

component = dmc.Stack([
    dmc.TimeGrid(
        timeRangeData={"startTime": "10:00", "endTime": "21:00", "interval": "01:00"},
        withSeconds=False,
        simpleGridProps={
            "type": "container",
            "cols": {"base": 1, "180px": 2, "320px": 3},
            "spacing": "xs",
        },
        value="10:00:00",
        id="time-grid"
    ),
    dmc.Text(id="time-grid-out")
])

@callback(
    Output("time-grid-out", "children"),
    Input("time-grid", "value")
)
def update(value):
    return f"You selected: {value}"
```
### format, withSeconds, size, radius

### data prop
`data` prop accepts an array of time values in 24-hour format. Values must be unique.

```python
dmc.TimeGrid(
    data=['10:00', '12:00']
)
```

### timeRangeData prop

Use the `timeRangeData` prop to generate a range of times. It accepts a dictionary with `startTime`,
`endTime`, and `interval` keys, where all values are strings in `hh:mm:ss` format. This overrides any values provided 
directly in the `data` prop.

```python
dmc.TimeGrid(
    timeRangeData={"startTime": "10:00", "endTime": "21:00", "interval": "01:00"},
)
```

### Min and max time
Set `minTime` and `maxTime` props to limit available time range. Both props accept time values in 24-hour format:

```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"},
    minTime="11:00",
    maxTime="18:00",
    withSeconds=False,
)
```
### Disable time values
You can disable specific time values by providing an array of disabled values to the `disableTime` prop:

```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "11:45", "interval": "00:15"},
    disableTime = ['10:45', '11:00', '11:30']
)
```
### Allow deselect
Set `allowDeselect` prop to allow deselecting time value by clicking on the control with selected value:


```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "12:00", "interval": "01:00"},
    value="11:00",
    allowDeselect=True
)
```
### Change AM/PM Labels
```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"},
    format="12h",
    amPmLabels={"am": 'पूर्वाह्न', "pm": 'अपराह्न'}
)
```
### Disabled
Set `disabled` prop to disable all controls:

```python
import dash_mantine_components as dmc

component = dmc.TimeGrid(
    timeRangeData={"startTime": "09:00", "endTime": "22:00", "interval": "01:00"},
    disabled=True
)
```
### 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.


#### TimeGrid selectors

| Selector   | Static selector                | Description               |
| ---------- | ------------------------------ | ------------------------- |
| root       | `.mantine-TimeGrid-root`       | Root element              |
| control    | `.mantine-TimeGrid-control`    | Time grid control         |
| simpleGrid | `.mantine-TimeGrid-simpleGrid` | SimpleGrid component root |



#### TimeGrid CSS variables

| Selector | Variable             | Description                                       |
| -------- | -------------------- | ------------------------------------------------- |
| root     | `--time-grid-fz`     | Controls `font-size` property of all controls     |
| root     | `--time-grid-radius` | Controls `border-radius` property of all controls |



#### TimeGrid data attributes

| Selector | Attribute       | Condition                                                                                  |
| -------- | --------------- | ------------------------------------------------------------------------------------------ |
| control  | `data-active`   | Current component value is the same as control value                                       |
| control  | `data-disabled` | Component is disabled by one of the props: `minTime`, `maxTime`, `disableTime`, `disabled` |



### Keyword Arguments
#### TimeGrid

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

- allowDeselect (boolean; optional):
    Determines whether the value can be deselected when the current
    active option is clicked or activated with keyboard, `False` by
    default.

- amPmLabels (dict; optional):
    Labels used for am/pm values, `{ am: 'AM', pm: 'PM' }` by default.

    `amPmLabels` is a dict with keys:

- 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.

- 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.

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

- data (list of strings; optional):
    Time data in 24h format to be displayed in the grid, for example
    `['10:00', '18:30', '22:00']`. Time values must be unique.

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

- defaultValue (string; optional):
    Uncontrolled component default value.

- disableTime (list of strings; optional):
    Array of time values to disable.

- disabled (boolean; optional):
    If set, all controls are disabled.

- format (a value equal to: '12h', '24h'; optional):
    Time format displayed in the grid, `'24h'` 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:

- maxTime (string; optional):
    All controls after this time are disabled.

- minTime (string; optional):
    All controls before this time are disabled.

- 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.

- 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`, `theme.defaultRadius` by default.

- simpleGridProps (boolean | number | string | dict | list; optional):
    Props passed down to the underlying `SimpleGrid` component, `{
    cols: 3, spacing: 'xs' }` by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Control `font-size` of controls, key of `theme.fontSizes` or any
    valid CSS value, `'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.

- timeRangeData (dict; optional):
    Generates a range of time values for the `data` prop. Accepts a
    dictionary with `startTime`, `endTime`, and `interval` keys, where
    all values are strings in `hh:mm:ss` format. This overrides any
    values provided directly in the `data` prop.

    `timeRangeData` is a dict with keys:

- value (string; default ''):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- withSeconds (boolean; optional):
    Determines whether the seconds part should be displayed, `False`
    by default.

## TimeInput  
Use the TimeInput component to capture time input from user.  
Category: Date Pickers  

### Simple Example

This is a simple example of the TimeInput. You can enter a valid time string such as hh:mm:ss.

Use the  `withSeconds` prop to display seconds.

```python
import dash_mantine_components as dmc
import datetime

component = dmc.Group(
    gap=50,
    children=[
        dmc.TimeInput(label="What time is it now?"),
        dmc.TimeInput(
            label="What time is it now?",
            withSeconds=True,
            value="23:15:45",
        ),
    ],
)
```
### TimePicker component
TimeInput component is based on the native `input[type="time"]` element and does not support most of advanced features
like choosing time format or custom dropdown with time select. If you need more features, use [TimePicker](/components/timepicker) 
component instead.

`TimeInput` features/limitations:

- Native `input[type="time"]` element
- Native browser controls for time selection on mobile devices
- Time format depends on the user's locale
- Only native dropdown with hours/minutes/seconds, does not work in Firefox
- Mobile Safari does not provide an option to select seconds


### Input Props

TimeInput supports all props from Input and InputWrapper components such as `radius`, `size`, `required`, etc.

### With icon


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.TimeInput(leftSection=DashIconify(icon="bi:clock"))
```
### Invalid State And Error

You can display an error with a red border and add an error message.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.TimeInput(label="Enter Time:", w=100, error=True),
        dmc.TimeInput(
            label="Enter Time:",
            w=150,
            error="Enter a valid time",
            withSeconds=True,
        ),
    ],
)
```
### 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                                      |
|:------------|:-------------------------------|:-------------------------------------------------|
| wrapper     | .mantine-TimeInput-wrapper     | Root element of the Input                        |
| input       | .mantine-TimeInput-input       | Input element                                    |
| section     | .mantine-TimeInput-section     | Left and right sections                          |
| root        | .mantine-TimeInput-root        | Root element                                     |
| label       | .mantine-TimeInput-label       | Label element                                    |
| required    | .mantine-TimeInput-required    | Required asterisk element, rendered inside label |
| description | .mantine-TimeInput-description | Description element                              |
| error       | .mantine-TimeInput-error       | Error element                                    |


### Keyword Arguments
#### TimeInput

- 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.

- 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.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

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

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxTime (string; optional):
    Maximum possible string time, if withSeconds is True, time should
    be in format HH:mm:ss, otherwise HH:mm.

- minTime (string; optional):
    Minimum possible string time, if withSeconds is True, time should
    be in format HH:mm:ss, otherwise HH:mm.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (string; default ''):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withSeconds (boolean; optional):
    Determines whether seconds input should be rendered.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## TimePicker  
Use the TimeInput component to capture time input from user.  
Category: Date Pickers  

### Usage

`TimePicker` component is an alternative to [TimeInput](/components/timeinput) that offers more features, it supports 
24-hour and 12-hour formats, dropdown with hours, minutes and seconds, and more.

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


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(label="Enter a time", id="timepicker-usage"),
        dmc.Text(id="out-timepicker")
    ],
)

@callback(
    Output("out-timepicker", "children"),
    Input("timepicker-usage", "value")
)
def update(value):
    return f"You entered: {value}"
```
### With callbacks

`TimePicker` component value is a string in hh:mm:ss 24-hour format (for example 18:34:55). Empty string is used to
represent no value. The `value` props is updated when the entered value is valid. The input value is considered valid
in the following cases:

- All inputs are empty. In this case the `value` will be  an empty string.
- All inputs are filled. For example if `withSeconds` prop is set and the user entered 12:34:56, the value will be
12:34:56. But if the user entered 12:34, `value` will not be updated because seconds value is missing.
- If a complete, valid time has been entered, the value will update as the user changes any part of it (hours, minutes,
or seconds). Each digit change will immediately reflect in the updated value.

### Debounce

To control how often the input's value is updated while the user is typing, use the `debounce` prop:

- Set `debounce=True` to update the value only when the user finishes typing and moves focus away (i.e. on blur).
- Set `debounce=<milliseconds>` to update the value after a specified delay from the user's last keystroke. For example,
`debounce=300` will wait 300 milliseconds after the user stops typing before updating the value.

#### Example debounce=True
```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(
            label="Enter a time",
            debounce=True,
            id="timepicker-debounce"
        ),
        dmc.Text(id="out-timepicker-debounce")
    ],
)

@callback(
    Output("out-timepicker-debounce", "children"),
    Input("timepicker-debounce", "value")
)
def update(value):
    return f"You entered: {value}"
```
#### Example debounce=1000
```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(
            label="Enter a time",
            debounce=1000,
            id="timepicker-debounce-ms"
        ),
        dmc.Text(id="out-timepicker-debounce-ms")
    ],
)

@callback(
    Output("out-timepicker-debounce-ms", "children"),
    Input("timepicker-debounce-ms", "value")
)
def update(value):
    return f"You entered: {value}"
```
### With seconds
Set `withSeconds` prop to enable seconds input. Note that if this prop is used, the value is not updated until all
inputs are filled – it is not possible to enter only hours and minutes.

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


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(label="Enter a time", withSeconds=True, id="timepicker-seconds"),
        dmc.Text(id="out-timepicker-seconds")
    ],
)

@callback(
    Output("out-timepicker-seconds", "children"),
    Input("timepicker-seconds", "value")
)
def update(value):
    return f"You entered: {value}"
```
### 12-hour format
Set `format="12h"` to use 12-hour format. Note that `value` is updated only when all inputs are filled including am/pm input.


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


component = dmc.Group(
    gap=50,
    children=[
        dmc.TimePicker(label="Enter a time", format="12h", id="timepicker-12"),
        dmc.Text(id="out-timepicker-12")
    ],
)

@callback(
    Output("out-timepicker-12", "children"),
    Input("timepicker-12", "value")
)
def update(value):
    return f"You entered: {value}"
```
### Change am/pm labels
To change am/pm labels use `amPmLabels` prop. Example of changing labels to Hindi:


```python
import dash_mantine_components as dmc

component =  dmc.TimePicker(
    label="Enter a time",
    format="12h",
    amPmLabels={"am": 'पूर्वाह्न', "pm": 'अपराह्न'}
)
```
### Min and max values
Set `min` and `max` props to limit available time range:

```python
import dash_mantine_components as dmc

component =  dmc.TimePicker(
    label="Enter a time between 10:00 and 18:30",
    min="10:00",
    max="18:30"
)
```
### With dropdown
Set `withDropdown` prop to display the dropdown with hours, minutes, seconds and am/pm selects. By default,
the dropdown is visible when one of the inputs is focused.

```python
import dash_mantine_components as dmc


component = dmc.Group(
    gap=50,
    mb=60,
    children=[
        dmc.TimePicker(
            label="Enter time (24h format)",
            withSeconds=True,
            withDropdown=True
        ),
        dmc.TimePicker(
            label="Enter time (12h format)",
            withSeconds=True,
            withDropdown=True,
            format="12h"
        ),
    ],
)
```
### Hours/minutes/seconds step
Use `hoursStep`, `minutesStep` and `secondsStep` props to control step for each input. These props are used to control
value by which the input is incremented or decremented when up/down arrow keys are pressed and to generate corresponding
values range in the dropdown.

```python
import dash_mantine_components as dmc

component =  dmc.TimePicker(
    label="Enter a time",
    withSeconds=True,
    withDropdown=True,
    hoursStep=1,
    minutesStep=5,
    secondsStep=10
)
```
### Duration type
Set `type="duration"` to allow entering durations that exceed 24 hours. In this mode, the hours field has no upper limit
and the input width adjusts dynamically based on the entered value. The format prop is ignored (always 24h) and the
dropdown is disabled.

```python
import dash_mantine_components as dmc

component = dmc.TimePicker(
    label="Enter a duration",
    withSeconds=True,
    type="duration"
)
```
### Time presets
You can define time presets with `presets` prop. Presets are displayed in the dropdown and can be selected by clicking
on them. Time values for presets should be in hh:mm:ss or hh:mm 24-hour time format. Presets display value is generated
based on `format`, `amPmLabels` and `withSeconds` props.


```python
import dash_mantine_components as dmc

component = dmc.TimePicker(
    label="Enter a time",
    format="12h",
    withDropdown=True,
    presets=['11:30', '15:45', '18:00', '20:15', '22:30']
)
```
### Time presets groups
To group presets use a list of dictionaries with label and values keys:


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


component = dmc.TimePicker(
    label="Enter a time",
    withDropdown=True,
    maxDropdownContentHeight=300,
    presets = [
        {"label": 'Morning', "values": ['06:00:00', '08:00:00', '10:00:00']},
        {"label": 'Afternoon', "values": ['12:00:00', '14:00:00', '16:00:00']},
        {"label": 'Evening', "values": ['18:00:00', '20:00:00', '22:00:00']},
    ],
    mb=120,
)
```
### Time presets range
Use the `timeRangePresets` prop to generate a range of times. It accepts a dictionary with `startTime`,
`endTime`, and `interval` keys, where all values are strings in `hh:mm:ss` format. This overrides any values provided 
directly in the `presets` prop.

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


component = dmc.TimePicker(
    label="Enter a time",
    format="12h",
    withDropdown=True,
    timeRangePresets={"startTime": "06:00:00", "endTime": "18:00:00", "interval": "01:30:00"}
)
```
### Close dropdown on preset select
Set `closeDropdownOnPresetSelect` prop to close the dropdown once a value is selected from the presets list:


```python
import dash_mantine_components as dmc

component = dmc.TimePicker(
    label="Enter a time",
    format="12h",
    withDropdown=True,
    presets=['11:30', '15:45', '18:00', '20:15', '22:30'],
    closeDropdownOnPresetSelect=True
)
```
### Dropdown position
By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the 
input. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the
underlying `Popover` component.

Example of dropdown that is always displayed above the input:


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


component = dmc.TimePicker(
    label="Enter a time",
    withDropdown=True,
    popoverProps={
        "position": 'top-start',
        "middlewares": {"flip": False, "shift": False },
      }
)
```
### Dropdown width
To change dropdown width, set `width` prop in `popoverProps`. By default, dropdown width is adjusted to fit all content.
Example of dropdown width set to the input width:

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


component = dmc.TimePicker(
    label="Enter a time",
    withDropdown=True,
    withSeconds=True,
    format="12h",
    popoverProps={"width": "target"}
)
```
### Clearable
Set `clearable` prop to display a clear button in the right section of the input. The clear button is visible when at
least one of the fields has value.


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


component = dmc.TimePicker(
    label="Enter a time",
    withDropdown=True,
    withSeconds=True,
    clearable=True,
    value="12:30:00"
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
from datetime import date

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack([
    dmc.TimePicker(
        label="clearSectionMode='both' (default)",
        placeholder="Pick time",
        value="12:30",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.TimePicker(
        label="clearSectionMode='rightSection'",
        placeholder="Pick time",
        value="12:30",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.TimePicker(
        label="clearSectionMode='clear'",
        placeholder="Pick time",
        value="12:30",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### Disabled

```python
import dash_mantine_components as dmc

component = dmc.TimePicker(
    label="Enter a time",
    disabled=True
)
```
### Read only

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


component = dmc.TimePicker(
    label="Enter a time",
    readOnly=True,
    value="12:30:00"
)
```
### Input Props

TimeInput supports all props from Input and InputWrapper components such as `radius`, `size`, `required`, etc.

### Error State

You can display an error with a red border and add an error message.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.TimePicker(label="Enter Time:", w=100, error=True),
        dmc.TimePicker(
            label="Enter Time:",
            w=150,
            error="Enter a valid time",
            withSeconds=True,
        ),
    ],
)
```
### Success state
```python
import dash_mantine_components as dmc

component = dmc.TimePicker(
    label="Enter a time",
    success="Looks good!"
)
```
### Accessibility

Set aria labels for hours, minutes, seconds and am/pm inputs and clear button with corresponding props:
```python
    dmc.TimePicker(
      hoursInputLabel="Hours",
      minutesInputLabel="Minutes",
      secondsInputLabel="Seconds",
      amPmInputLabel="AM/PM",
      clearButtonProps={{ 'aria-label': 'Clear time' }}
    
  )
```

### Keyboard Interactions


| Key          | Description                              |
| ------------ | ---------------------------------------- |
| `ArrowDown`  | Decrements current value by step         |
| `ArrowUp`    | Increments current value by step         |
| `Home`       | Sets current value to min possible value |
| `End`        | Sets current value to max possible value |
| `Backspace`  | Clears current value                     |
| `ArrowRight` | Moves focus to the next input            |
| `ArrowLeft`  | Moves focus to the previous input        |



### 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.
     


#### TimePicker Selectors

| Selector          | Static selector                         | Description                                                       |
| ----------------- | --------------------------------------- | ----------------------------------------------------------------- |
| wrapper           | `.mantine-TimePicker-wrapper`           | Root element of the Input                                         |
| input             | `.mantine-TimePicker-input`             | Input element                                                     |
| section           | `.mantine-TimePicker-section`           | Left and right sections                                           |
| root              | `.mantine-TimePicker-root`              | Root element                                                      |
| label             | `.mantine-TimePicker-label`             | Label element                                                     |
| required          | `.mantine-TimePicker-required`          | Required asterisk element, rendered inside label                  |
| description       | `.mantine-TimePicker-description`       | Description element                                               |
| error             | `.mantine-TimePicker-error`             | Error element                                                     |
| control           | `.mantine-TimePicker-control`           | Button in the dropdown used to select hours/minutes/seconds/am-pm |
| controlsList      | `.mantine-TimePicker-controlsList`      | List of buttons for hours/minutes/seconds/am-pm                   |
| controlsListGroup | `.mantine-TimePicker-controlsListGroup` | Group of `controlsList`s                                          |
| dropdown          | `.mantine-TimePicker-dropdown`          | Popover dropdown                                                  |
| fieldsRoot        | `.mantine-TimePicker-fieldsRoot`        | Wrapper for all `fieldsGroup` elements                            |
| fieldsGroup       | `.mantine-TimePicker-fieldsGroup`       | Wrapper for hours/minutes/seconds/am-pm fields                    |
| field             | `.mantine-TimePicker-field`             | Hours/minutes/seconds/am-pm input field                           |
| presetControl     | `.mantine-TimePicker-presetControl`     | Time preset button                                                |
| presetsGroup      | `.mantine-TimePicker-presetsGroup`      | Wraps preset controls and label                                   |
| presetsGroupLabel | `.mantine-TimePicker-presetsGroupLabel` | Label of the preset group                                         |
| presetsRoot       | `.mantine-TimePicker-presetsRoot`       | Wrapper for all presets content                                   |
| scrollarea        | `.mantine-TimePicker-scrollarea`        | Scroll area in the dropdown                                       |


#### TimePicker CSS Variables

| Selector | Variable              | Description                             |
| -------- | --------------------- | --------------------------------------- |
| dropdown | `--control-font-size` | Controls font-size of dropdown controls |



### Keyword Arguments
#### TimePicker

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

- amPmInputLabel (string; optional):
    `aria-label` of am/pm input.

- amPmLabels (dict; optional):
    Labels used for am/pm values, `{ am: 'AM', pm: 'PM' }` by default.

    `amPmLabels` is a dict with keys:

- amPmSelectProps (boolean | number | string | dict | list; optional):
    Props passed down to am/pm select.

- 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.

- 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.

- clearButtonProps (boolean | number | string | dict | list; optional):
    Props passed down to clear button.

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether the clear button should be displayed, `False`
    by default.

- closeDropdownOnPresetSelect (boolean; optional):
    If set, the dropdown is closed when a value is selected from the
    presets list default False.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- defaultValue (string; optional):
    Uncontrolled component default value.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    If set, the component becomes disabled.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- form (string; optional):
    `form` prop passed down to the hidden input.

- format (a value equal to: '12h', '24h'; optional):
    Time format, `'24h'` by default.

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

- hiddenInputProps (boolean | number | string | dict | list; optional):
    Props passed down to the hidden input.

- hoursInputLabel (string; optional):
    `aria-label` of hours input.

- hoursInputProps (boolean | number | string | dict | list; optional):
    Props passed down to hours input.

- hoursStep (number; optional):
    Number by which hours are incremented/decremented, `1` by default.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- max (string; optional):
    Max possible time value in `hh:mm:ss` format.

- maxDropdownContentHeight (number; optional):
    Maximum height of the content displayed in the dropdown in px,
    `200` by default.

- min (string; optional):
    Min possible time value in `hh:mm:ss` format.

- minutesInputLabel (string; optional):
    `aria-label` of minutes input.

- minutesInputProps (boolean | number | string | dict | list; optional):
    Props passed down to minutes input.

- minutesStep (number; optional):
    Number by which minutes are incremented/decremented, `1` by
    default.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    `name` prop passed down to the hidden input.

- pasteSplit (dict; optional):
    A function to transform paste values, by default time in 24h
    format can be parsed on paste for example `23:34:22`.

    `pasteSplit` is a dict with keys:

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- popoverProps (dict; optional):
    Props passed down to `Popover` component.

    `popoverProps` is a dict with keys:

- presets (list of strings; optional):
    Time presets to display in the dropdown.

- 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):
    If set, the value cannot be updated.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- reverseTimeControlsList (boolean; optional):
    If set, the time controls list are reversed, default `False`.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- scrollAreaProps (boolean | number | string | dict | list; optional):
    Props passed down to all underlying `ScrollArea` components.

- secondsInputLabel (string; optional):
    `aria-label` of seconds input.

- secondsInputProps (boolean | number | string | dict | list; optional):
    Props passed down to seconds input.

- secondsStep (number; optional):
    Number by which seconds are incremented/decremented, `1` by
    default.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- timeRangePresets (dict; optional):
    Generates a range of time values for the `presets` prop. Accepts a
    dictionary with `startTime`, `endTime`, and `interval` keys, where
    all values are strings in `hh:mm:ss` format. This overrides any
    values provided directly in the `presets` prop.

    `timeRangePresets` is a dict with keys:

- type (a value equal to: 'time', 'duration'; optional):
    TimePicker type, `'time'` for regular time input, `'duration'` for
    duration input that allows values greater than 24 hours
    @,default,'time'.

- value (string; default ''):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withDropdown (boolean; optional):
    Determines whether the dropdown with time controls list should be
    visible when the input has focus, `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withSeconds (boolean; optional):
    Determines whether the seconds input should be displayed, `False`
    by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## YearPickerInput  
Year, multiple years and years range picker input  
Category: Date Pickers  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    label="Pick date",
    placeholder="Pick date",
)
```
### Multiple dates

Set type="multiple" to allow user to pick multiple months.  Note that `value` is a list.

```python
import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    type="multiple",
    label="Pick multiple dates",
    placeholder="Pick dates",
)
```
### Dates range

Set type="range" to allow user to pick dates range. Note that `value` is a list.

```python
import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    type="range",
    label="Pick dates range",
    placeholder="Pick dates range",
)
```
### Presets
Use the `presets` prop to add custom year presets. Presets are displayed next to the calendar:

```python
from datetime import date

import dash_mantine_components as dmc

this_year = date.today().year

component = dmc.YearPickerInput(
    label="With presets",
    placeholder="Select year",
    presets=[
        {"value": date(this_year, 1, 1).isoformat(), "label": "This year"},
        {"value": date(this_year + 1, 1, 1).isoformat(), "label": "Next year"},
        {"value": date(this_year - 1, 1, 1).isoformat(), "label": "Last year"},
        {"value": date(this_year + 5, 1, 1).isoformat(), "label": "In 5 years"},
        {"value": date(this_year - 5, 1, 1).isoformat(), "label": "5 years ago"},
    ],
)
```
To use `presets` with `type="range"`, define the value as a tuple of two dates:

```python
from datetime import date

import dash_mantine_components as dmc

this_year = date.today().year
start_of_year = lambda year: date(year, 1, 1).isoformat()

component = dmc.YearPickerInput(
    type="range",
    label="With presets",
    placeholder="Select years range",
    presets=[
        {
            "value": [start_of_year(this_year - 2), start_of_year(this_year)],
            "label": "Last 2 years",
        },
        {
            "value": [start_of_year(this_year - 5), start_of_year(this_year)],
            "label": "Last 5 years",
        },
        {
            "value": [start_of_year(this_year), start_of_year(this_year + 5)],
            "label": "Next 5 years",
        },
        {
            "value": [start_of_year(this_year - 10), start_of_year(this_year)],
            "label": "Last decade",
        },
    ],
)
```
### Open picker in modal

By default, YearPickerInput is rendered inside Popover. You can change that to Modal by setting dropdownType="modal"

```python
import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    dropdownType="modal",
    label="Pick date (picker in modal)",
    placeholder="Pick date",
)
```
### Number of columns

```python
import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    label="Pick date", placeholder="Pick date", numberOfColumns=2
)
```
### Value format

Use `valueFormat` property to change the format of the date displayed in the date input field.

```python
import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    valueFormat="YY",
    type="multiple",
    label="Pick month (Value Formatter)",
    placeholder="Pick month",
)
```
Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.



### Value formatter
`valueFormatter` is a more powerful alternative to the `valueFormat` prop. It allows formatting the value label with a
custom function. The function is the same for all component types (default, multiple and range) – you need to perform
additional checks inside the function to handle different types.

Example of using a custom formatter function with `type="multiple"`:



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  


```python
import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    type="multiple",
    label="Pick multiple dates",
    placeholder="Pick dates",
    valueFormatter={"function": "formatDatesSelected"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDatesSelected = ({ type, date, locale, format }) => {
    if (type === "multiple" && Array.isArray(date)) {
        if (date.length === 1) {
            return dayjs(date[0]).locale(locale).format(format);
        }

        if (date.length > 1) {
            return `${date.length} dates selected`;
        }

        return "";
    }

    return "";
};
```

### Clearable

Set `clearable=True` prop to display clear button in the right section. Note that if you set `rightSection` prop, clear button will not be displayed.

```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    clearable=True,
    value=datetime.now(),
    label="Pick date (clearable)",
    placeholder="Pick Date",
)
```
### Clear section mode
The `clearSectionMode` prop determines how the `clear` button and `rightSection` are rendered:

- 'both' (default) – render both the `clear` button and `rightSection`
- 'rightSection' – render only the user-supplied `rightSection`, ignore `clear` button
- 'clear' – render only the `clear` button, ignore `rightSection`


```python
from datetime import date

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack([
    dmc.YearPickerInput(
        label="clearSectionMode='both' (default)",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.YearPickerInput(
        label="clearSectionMode='rightSection'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.YearPickerInput(
        label="clearSectionMode='clear'",
        placeholder="Pick date",
        value="2027-01-01",
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
### With Icon

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.YearPickerInput(
    leftSection=DashIconify(icon="fa:calendar"),
    leftSectionPointerEvents="none",
    label="Pick date",
    placeholder="Pick date",
)
```
### Min and Max date

```python
from datetime import datetime, timedelta

import dash_mantine_components as dmc

component = dmc.YearPickerInput(
    minDate=datetime(2021, 1, 1),
    maxDate=datetime(2028, 1, 1),
    value=datetime(2021, 1, 1),
    placeholder="Date input",
    label="Select valid date",
    w=250,
)
```
### CSS Extensions

As of DMC 1.2.0, Date component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.

### 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.


#### YearPickerInput selectors

| Selector                   | Static selector                                      | Description                                                           |
| ---------------------------| ---------------------------------------------------- | --------------------------------------------------------------------- |
| `wrapper`                  | `.mantine-YearPickerInput-wrapper`                   | Root element of the Input                                              |
| `input`                    | `.mantine-YearPickerInput-input`                     | Input element                                                         |
| `section`                  | `.mantine-YearPickerInput-section`                   | Left and right sections                                                |
| `root`                     | `.mantine-YearPickerInput-root`                      | Root element                                                          |
| `label`                    | `.mantine-YearPickerInput-label`                     | Label element                                                         |
| `required`                 | `.mantine-YearPickerInput-required`                  | Required asterisk element, rendered inside label                       |
| `description`              | `.mantine-YearPickerInput-description`               | Description element                                                    |
| `error`                    | `.mantine-YearPickerInput-error`                     | Error element                                                         |
| `calendarHeader`           | `.mantine-YearPickerInput-calendarHeader`            | Calendar header root element                                           |
| `calendarHeaderControl`     | `.mantine-YearPickerInput-calendarHeaderControl`     | Previous/next calendar header controls                                 |
| `calendarHeaderControlIcon` | `.mantine-YearPickerInput-calendarHeaderControlIcon` | Icon of previous/next calendar header controls                         |
| `calendarHeaderLevel`       | `.mantine-YearPickerInput-calendarHeaderLevel`       | Level control (changes levels when clicked, month -> year -> decade)   |
| `levelsGroup`              | `.mantine-YearPickerInput-levelsGroup`               | Group of decades levels                                                |
| `yearsList`                | `.mantine-YearPickerInput-yearsList`                 | Years list table element                                               |
| `yearsListRow`             | `.mantine-YearPickerInput-yearsListRow`              | Years list row element                                                 |
| `yearsListCell`            | `.mantine-YearPickerInput-yearsListCell`             | Years list cell element                                                |
| `yearsListControl`         | `.mantine-YearPickerInput-yearsListControl`          | Button used to pick months and years                                   |
| `placeholder`              | `.mantine-YearPickerInput-placeholder`               | Placeholder element                                                    |

#### YearPickerInput data attributes

| Selector              | Attribute      | Condition                           | Value                              |
| --------------------- | -------------- | ----------------------------------- | ---------------------------------- |
| `calendarHeaderControl`| `data-direction`| –                                   | "previous" or "next" depending on the control type |
| `calendarHeaderControl`| `data-disabled`| Control is disabled for any reason  | –                                  |


### Keyword Arguments
#### YearPickerInput

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

- allowDeselect (boolean; optional):
    Determines whether user can deselect the date by clicking on
    selected item, applicable only when type="default".

- allowSingleDateInRange (boolean; optional):
    Determines whether single year can be selected as range,
    applicable only when type="range".

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

- ariaLabels (dict; optional):
    aria-label attributes for controls on different levels.

    `ariaLabels` is a dict with keys:

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

- 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.

- clearButtonProps (dict; optional):
    Props passed down to clear button.

    `clearButtonProps` is a dict with keys:

- clearSectionMode (a value equal to: 'rightSection', 'both', 'clear'; optional):
    Determines how the clear button and rightSection are rendered
    default 'both'.

- clearable (boolean; optional):
    Determines whether input value can be cleared, adds clear button
    to right section, False by default.

- closeOnChange (boolean; optional):
    Determines whether dropdown should be closed when date is
    selected, not applicable when type="multiple", True by default.

- columnsToScroll (number; optional):
    Number of columns to scroll when user clicks next/prev buttons,
    defaults to numberOfColumns.

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

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

- debounce (number; default 0):
    Debounce time in ms.

- decadeLabelFormat (string; optional):
    dayjs label format to display decade label or a function that
    returns decade label based on date value, defaults to "YYYY".

- defaultDate (string; optional):
    Initial displayed date.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- dropdownType (a value equal to: 'popover', 'modal'; optional):
    Type of dropdown, defaults to popover.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- fullWidth (boolean; optional):
    Determines whether the calendar should take the full width of its
    container default False.

- getYearControlProps (boolean | number | string | dict | list; optional):
    A function that passes props down to year picker control based on
    date. (See
    https://www.dash-mantine-components.com/functions-as-props).

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

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- labelSeparator (string; optional):
    Separator between range value.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxDate (string; optional):
    Maximum possible date.

- minDate (string; optional):
    Minimum possible date.

- 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.

- modalProps (dict; optional):
    Props passed down to Modal component.

    `modalProps` is a dict with keys:

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- numberOfColumns (number; optional):
    Number of columns to render next to each other.

- 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.

- placeholder (string; optional):
    Input placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- popoverProps (dict; optional):
    Props passed down to Popover component.

    `popoverProps` is a dict with keys:

- presets (list of dicts; optional):
    Predefined values to pick from.

    `presets` is a list of dicts with keys:

- 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 user can modify the value.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size.

- sortDates (boolean; optional):
    Determines whether dates value should be sorted before onChange
    call, only applicable when type="multiple", True by default.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- type (a value equal to: 'default', 'multiple', 'range'; optional):
    Picker type: range, multiple or default.

- value (string | list of strings; optional):
    Value for controlled component.

- valueFormat (string; optional):
    Dayjs format to display input value, "MMMM D, YYYY" by default.

- valueFormatter (boolean | number | string | dict | list; optional):
    A function to format selected dates values into a string. By
    default, date is formatted based on the input type.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withCellSpacing (boolean; optional):
    Determines whether controls should be separated by spacing, True
    by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withNativeLevelSelect (boolean; optional):
    Determines whether level select controls should be rendered as
    native `<select>` elements @,default,False.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

- yearsListFormat (string; optional):
    dayjs format for years list, `'YYYY'` by default.

## Alert  
Use Alerts to attract user attention with static messages.  
Category: Feedback  

### Introduction

### Simple Example

Create an alert with the main message (`children`), the `title`, and the `color`.

```python
import dash_mantine_components as dmc

component = dmc.Alert(
    "Something happened! You made a mistake and there is no going back, your data was lost forever!",
    title="Simple Alert!",
)
```
### Colors

```python
import dash_mantine_components as dmc

message = "Something happened! You made a mistake and there is no going back!"

component = dmc.Stack(
    children=[
        dmc.Alert(message, title="Primary", color="blue"),
        dmc.Alert(message, title="Secondary", color="gray"),
        dmc.Alert(message, title="Success!", color="green"),
        dmc.Alert(message, title="Warning!", color="yellow"),
        dmc.Alert(message, title="Danger!", color="red"),
        dmc.Alert(message, title="Info", color="violet"),
    ],
)
```
### Dismissible Alerts

The alerts can be closed either programmatically by toggling the `hide` property or by clicking on the close button on the alert if enabled with `withCloseButton=True`.

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

component = html.Div(
    [
        dmc.Alert(
            "Something terrible happened! You made a mistake and there is no going back, your data was lost forever! ",
            title="Bummer!",
            id="alert-dismiss",
            color="red",
            withCloseButton=True,
        ),
        dmc.Button("Toggle alert", id="alert-button", mt=20),
    ]
)


@callback(
    Output("alert-dismiss", "hide"),
    Input("alert-button", "n_clicks"),
    State("alert-dismiss", "hide"),
    prevent_initial_call=True,
)
def alert(n_clicks, hide):
    return not hide
```
### Automatic Dismissal

The alerts can also be timed out using the `duration` prop which accepts time in milliseconds.

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

component = html.Div(
    [
        dmc.Alert(
            "This alert will dismiss itself after 3 seconds! ",
            title="Auto Dismissing Alert!",
            id="alert-auto",
            color="violet",
            duration=3000,
        ),
        dmc.Button("Show alert", id="alert-auto-button", mt=20),
    ]
)


@callback(
    Output("alert-auto", "hide"),
    Input("alert-auto-button", "n_clicks"),
    prevent_initial_call=True,
)
def alert_auto(n_clicks):
    return False
```
### 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-Alert-root        | Root element                                  |
| wrapper     | .mantine-Alert-wrapper     | Wraps body and icon                           |
| body        | .mantine-Alert-body        | Body element, wraps title and message         |
| title       | .mantine-Alert-title       | Title element, contains label and icon        |
| label       | .mantine-Alert-label       | Title label                                   |
| message     | .mantine-Alert-message     | Alert message, defined by children            |
| icon        | .mantine-Alert-icon        | Icon wrapper                                  |
| closeButton | .mantine-Alert-closeButton | Close button, defined by withCloseButton prop |


### Keyword Arguments
#### Alert

- children (a list of or a singular dash component, string or number; optional)

- 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 with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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.

- closeButtonLabel (string; optional):
    Close button `aria-label`.

- color (optional):
    Key of `theme.colors` or any valid CSS color, default value is
    `theme.primaryColor`.

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

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

- duration (number; optional):
    Duration in milliseconds after which the Alert dismisses itself.

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

- hide (boolean; default False):
    Whether to hide the alert.

- icon (a list of or a singular dash component, string or number; optional):
    Icon displayed next to the title.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    `theme.defaultRadius` 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.

- title (a list of or a singular dash component, string or number; optional):
    Alert title.

- variant (string; optional):
    variant.

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

- withCloseButton (boolean; optional):
    Determines whether close button should be displayed, `False` by
    default.

## Loader  
Use Loader component to show loading state to the user.  
Category: Feedback  

### Introduction

### Simple Usage
Loader component supports 3 types of loaders: `oval`, `bars` and `dots` by default. All loaders are animated with CSS for better performance.

By default, Loader will be rendered with theme.primaryColor. A Loader can be customized with `color`, `size`, and
`type` props.

```python
import dash_mantine_components as dmc

component = dmc.Loader(color="red", size="md", type="oval")
```
### Button Example
In this example, the loader is shown while the callback is running.   Note that the button is disabled automatically when `loading=True`
See more examples in the Button section.

This examples uses the [running](https://dash.plotly.com/advanced-callbacks#updating-component-properties-when-a-callback-is-running)
argument in a callback and requires dash>=2.16.


```python
import time

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

component = html.Div([
    dmc.Button("Compute", id="load-btn", loaderProps={"type": "dots"} ),
    dmc.Text(id="load-output"),
])


@callback(
    Output("load-output", "children"),
    Input("load-btn", "n_clicks"),
    running=[(Output("load-btn", "loading"), True, False)],
)
def long_compute(n):
    time.sleep(2)
    return "Done " + str(time.time())
```
### children prop

`Loader` supports children prop. If you pass anything to children, it will be rendered instead of the loader. This is 
useful when you want to control Loader representation in components that use loaderProps, for example `Button` or `LoadingOverlay`.

See an example in the [Loading Overlay](/components/loadingoverlay) section,


### 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.


#### Loader selectors

| Name        | Static selector      | Description                                      |
|:------------|:---------------------|:-------------------------------------------------|
| root        | .mantine-Loader-root | Root element                                     |


#### Loader CSS Variables

| Selector | Variable         | Description                                                         |
|----------|------------------|---------------------------------------------------------------------|
| root     | --loader-size    | Controls loader size (usually width and height, in some cases only width) |
|          | --loader-color   | Controls loader color                                              |



### Keyword Arguments
#### Loader

- children (a list of or a singular dash component, string or number; optional):
    Overrides default loader with given content.

- 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.

- 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, default value is
    `theme.primaryColor`.

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

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

- 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.

- size (number; optional):
    Controls `width` and `height` of the loader. `Loader` has
    predefined `xs`-`xl` values. Numbers are converted to rem. Default
    value is `'md'`.

- 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.

- type (a value equal to: 'bars', 'dots', 'oval'; optional):
    Loader type, key of `loaders` prop, default value is `'oval'`.

- variant (string; optional):
    variant.

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

## LoadingOverlay  
Use LoadingOverlay component to disable user interactions and indicate loading state.  
Category: Feedback  

### Simple Usage

`LoadingOverlay` renders an overlay with a loader over the parent element with relative position.
It is usually used to indicate loading state of forms.

`LoadingOverlay` rendering is controlled by `visible` prop:

```python
import time

import dash_mantine_components as dmc
from dash import Output, Input, no_update, callback, clientside_callback
from dash_iconify import DashIconify

component = dmc.Box(
    children=[
        dmc.Stack(
            pos="relative",
            p=5,
            w=300,
            children=[
                dmc.LoadingOverlay(
                    visible=False,
                    id="loading-overlay",
                    overlayProps={"radius": "sm", "blur": 2},
                    zIndex=10,
                ),
                dmc.TextInput(
                    label="Username",
                    placeholder="Your username",
                    leftSection=DashIconify(icon="radix-icons:person"),
                    id="dummy-text-box",
                ),
                dmc.TextInput(
                    label="Password",
                    placeholder="Your password",
                    leftSection=DashIconify(icon="radix-icons:lock-closed"),
                ),
                dmc.Checkbox(
                    label="Remember me",
                    checked=True,
                ),
                dmc.Button(
                    "Login", id="load-button", variant="outline", fullWidth=True
                ),
            ],
        ),
    ]
)

clientside_callback(
    """
    function updateLoadingState(n_clicks) {
        return true
    }
    """,
    Output("loading-overlay", "visible", allow_duplicate=True),
    Input("load-button", "n_clicks"),
    prevent_initial_call=True,
)


@callback(
    Output("dummy-text-box", "children"),
    Output("loading-overlay", "visible"),
    Input("load-button", "n_clicks"),
    prevent_initial_call=True,
)
def update(n_clicks):
    time.sleep(3)
    return no_update, False
```
### Loader Props

```python
import dash_mantine_components as dmc

component = dmc.Box(
    [
        dmc.LoadingOverlay(
            loaderProps={"type": "bars", "color": "red", "size": "lg"},
            overlayProps={"radius": "sm", "blur": 2},
            visible=True,
            zIndex=10,
        ),
        dmc.BackgroundImage(
            dmc.Box(h=200, w=100),
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid"
            "=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80",
        ),
    ],
    pos="relative",
)
```
### Custom LoadingOverlay

`loaderProps` (dict) - Supports a key of "variant" with values of oval, bars, dots or custom as in this example, also custom supports a children key as in this dmc.Image with a custom .gif loading screen.

```python
import dash_mantine_components as dmc
import random

# Generate random data for the BarChart
data = [
    {
        "month": month,
        "Smartphones": random.randint(50, 300),
        "Laptops": random.randint(30, 200),
        "Tablets": random.randint(20, 150),
    }
    for month in ["January", "February", "March", "April", "May", "June"]
]

component = dmc.Box(
    children=[
        dmc.Stack(
            pos="relative",
            p=10,
            children=[
                dmc.LoadingOverlay(
                    visible=True,
                    id="custom-loading-overlay",
                    zIndex=10,
                    loaderProps={
                        "variant": "custom",
                        "children": dmc.Image(
                            h=150,
                            radius="md",
                            src="/assets/custom_loadingoverlay.gif",
                        ),
                    },
                    overlayProps={"radius": "sm", "blur": 2},
                ),
                dmc.BarChart(
                    h=300,
                    dataKey="month",
                    data=data,
                    type="stacked",
                    series=[
                        {"name": "Smartphones", "color": "violet.6"},
                        {"name": "Laptops", "color": "blue.6"},
                        {"name": "Tablets", "color": "teal.6"},
                    ],
                ),
            ],
        ),
    ]
)
```
### 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-LoadingOverlay-root    | Root element        |
| overlay | .mantine-LoadingOverlay-overlay | `Overlay` component |
| loader  | .mantine-LoadingOverlay-loader  | `Loader` component  |


### Keyword Arguments
#### LoadingOverlay

- 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.

- 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.

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

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

- 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`.

- loaderProps (dict; optional):
    Props passed down to `Loader` component.

    `loaderProps` is a dict with keys:

- 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.

- overlayProps (dict; optional):
    Props passed down to `Overlay` component.

    `overlayProps` is a dict with keys:

- 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.

- transitionProps (dict; optional):
    Props passed down to `Transition` component, `{ transition:
    'fade', duration: 0 }` by default.

    `transitionProps` is a dict with keys:

- variant (string; optional):
    variant.

- visible (boolean; optional):
    Determines whether the overlay should be visible, `False` by
    default.

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

- zIndex (string | number; optional):
    Controls overlay `z-index`, `400` by default.

## Notification  
DMC has an excellent Notifications System, which can be used to generate client side notifications.  
Category: Feedback  

### New NotificationContainer

As of DMC v2.0.0, notifications are handled by a single component:  `NotificationContainer`.

This replaces the previous `NotificationProvider`   +  `Notification` approach with one that is more aligned with 
Mantine's implementation.


### Getting Started

Add `NotificationContainer` to your layout:

```python
app.layout = dmc.MantineProvider([
    dmc.NotificationContainer(id="notification-container"),
    # other components...
])
```

* `NotificationContainer` must be placed inside a `MantineProvider`.
* You should have only one `NotificationContainer` in your app; multiple containers will cause notifications to be duplicated.
* In multi-page apps, place `NotificationContainer` in the top-level `app.layout`, not inside individual pages.
* It is no longer necessary to use a separate output container (such as `html.Div`) as in versions prior to 2.0.

### Migration Guide

The following components are deprecated and will be removed in a future release:

* `NotificationProvider`
* `Notification`

See the [Notification Migration Guide](/migration-notifications) for help updating your app.


### Show Notifications

To display a notification, use the `sendNotifications` prop on the `NotificationContainer`.
It accepts a list of dictionaries, where each dict represents a notification.

```python

dmc.NotificationContainer(
    id="notification-container",
    sendNotifications=[{
        "action": "show",
        "id": "my-id",
        "message": "This is a notification",
        # other props like title, color, icon, etc.
    }]
)
```

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


component = html.Div([
    # Place one NotificationContainer in app.layout)
    dmc.Button("Show Notification", id="notification-show")

])

@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("notification-show", "n_clicks"),
    prevent_initial_call=True,
)
def show(n_clicks):
    if n_clicks is None:
        return no_update
    return [dict(
        title="Hey there!",
        id="show-notify",
        action="show",
        message="Notifications in Dash, Awesome!",
        icon=DashIconify(icon="ic:round-celebration"),
    )]
```
### Update Notifications

To update notifications that were previously shown or queued, set `action="update"` and include the`id` of the notifications to update:

```python
sendNotifications = [{
    "action": "update",
    "id": "my-id",
    "message": "My updated notification message",
    # other props to update
}]
```

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

component = html.Div(
    [
        dmc.Group(
            [
                dmc.Button(
                    "Load Data",
                    id="show-notifications",
                    n_clicks=0
                ),
                dmc.Button(
                    "Update",
                    id="update-notifications",
                    n_clicks=0
                ),
                # Place one NotificationContainer in app.layout)
            ],
        ),
    ],
)


@callback(
    Output("notification-container", "sendNotifications",  allow_duplicate=True,),
    Input("show-notifications", "n_clicks"),
    Input("update-notifications", "n_clicks"),
    prevent_initial_call=True,
)
def notify(n1, n2):
    button_id = ctx.triggered_id
    if n1 and n1 > 0:
        if "show" in button_id:
            return [dict(
                id="my-load-notification",
                title="Process initiated",
                message="The process has started.",
                loading=True,
                color="orange",
                action="show",
                autoClose=False,
            )]
    if n2 and n2 > 0:
        if "update" in button_id:
            return [dict(
                id="my-load-notification",
                title="Data loaded",
                message="Notification closing in 2 seconds",
                color="green",
                loading=False,
                action="update",
                autoClose=2000,
                icon=DashIconify(icon="akar-icons:circle-check"),
            )]
    return no_update
```
### sendNotifications prop

Each dictionary in `sendNotifications` can include:

* `id` – notification ID used to update or remove notifications. A random ID is generated if not provided.
* `action` – one of `"show"`, or `"update"`
  
    * `"show"` – adds a new notification or queues it if the limit is reached
    * `"update"` – updates a notification previously shown or queued
* `message` – required notification body 
* `position` – notification position. If not provided, the default from `NotificationContainer` is used.
* `withBorder` – whether the notification should have a border
* `withCloseButton` – whether the close button is visible
* `allowClose` – determines whether notification can be closed with close button, drag or horizontal scroll swipe, true by default
* `onClose` – called when the notification is unmounted
* `onOpen` – called when the notification is mounted
* `autoClose` – timeout in milliseconds to automatically close the notification. Set to `False` to disable.
* `withAutoCloseProgress` – determines whether a progress line that fills up until the notification auto closes is displayed at the bottom of the notification; overrides `withAutoCloseProgress` prop of the `NotificationContainer` component
* `priority` – display priority used when the number of active notifications exceeds limit; higher numbers are shown first, defaults to 0
* `color` -Controls notification line or icon color, key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default.
* `icon` - Notification icon, replaces color line.
* `title` - Notification title, displayed before body.
* `radius` -  Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default
*  `loading`- Replaces colored line or icon with Loader component.
*  `className`, `style`, `loading` - props passed down to the Notification component


### Dismiss interactions
Notifications can be dismissed by dragging them left or right, or with a horizontal scroll swipe while hovered. True by default.

Use `allowDragDismiss=False` and `allowScrollDismiss=False` on `NotificationComponent` to disable either interaction:

```python

dmc.NotificationContainer(
    id="notification-container",
    allowDragDismiss=False,
    allowScrollDismiss=False
)
```
To make a specific notification non-dismissible, set `allowClose=False` in `sendNotifications`. This hides the close button and disables drag/scroll dismissal for that notification.

### Notification Position
You can set position per-notification in the `sendNotifications` dictionary. 
```python
sendNotifications = [
  {
    "action": "show",
    "id": "my-id",
    "message": "Positioned top-left",
    "position": "top-left"
  }
]
```

Valid position values:

* `"top-left"`
* `"top-right"`
* `"top-center"`
* `"bottom-left"`
* `"bottom-right"`
* `"bottom-center"`

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

positions = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center']

component =  dmc.RadioGroup(
    children=dmc.Group([dmc.Radio(p, value=p) for p in positions], my=10),
    label="Select Notification position",
    value=None,
    id="notification-position"
)

@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("notification-position", "value"),
    prevent_initial_call=True,
)
def notify(value):
    if value:
        return [dict(
            title=f"Notification {value}",
            autoClose=True,
            action="show",
            message="Hello World",
            color="red",
            position=value,
        )]
    return dash.no_update
```
You can also set a default position in the `NotificationContainer`. 

```python
app.layout = dmc.MantineProvider([
    dmc.NotificationContainer(position="top-right", id="notification-container"),
])
```

### Limit and queue

To limit the number of notifications displayed at once, use the `limit` prop:

```python
dmc.NotificationContainer(limit=5)
```

Notifications beyond the limit are added to the queue and shown when others are dismissed.

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

component = dmc.Button("Show 10 notifications", id="notify-btn", n_clicks=0),


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("notify-btn", "n_clicks"),
    prevent_initial_call=True
)
def queue_notifications(n):
    if n > 0:
        return [
            {
                "action": "show",
                "title": f"Notification {i + 1}",
                "message": "Most notifications are added to queue",
                "autoClose": 3000,
                "withCloseButton": True,
            }
            for i in range(10)
        ]
    return no_update
```
### Priority
By default, notifications are distributed between the visible state and the queue in insertion order (FIFO): the first
limit notifications are visible and the rest wait in the queue. Set the `priority` property in notifications.show or 
notifications.update to control which notifications take the visible slots when there are more active notifications
than the limit allows.

- Notifications with a higher `priority` are shown before notifications with a lower one.
- Notifications with equal `priority` keep insertion order (FIFO).
- `priority` defaults to 0, so notifications without it behave exactly as before.
- Within the visible set, higher priority notifications are rendered first.
- When a high priority notification is added while the visible state is already at limit, it takes a visible slot and 
- the lowest priority visible notification is moved into the queue – even if it was already displayed. Priority is
- applied independently for each position.

Note that a notification that is moved from the visible state back into the queue is unmounted and mounted again when
it returns to a visible slot, so its onOpen callback runs each time it becomes visible.

See the upstream [Mantine Notifications](https://mantine.dev/x/notifications/) documentation for an example.

### Hide Notifications

Use the `hideNotifications` prop to remove notifications by `id` from the state and queue.

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

component = html.Div(
    [
       # dmc.NotificationContainer(id="notification-container"),
        dmc.Group(
            [
                dmc.Button(
                    "Show",
                    id="notifications-show",
                    n_clicks=0
                ),
                dmc.Button(
                    "Hide",
                    id="notifications-hide",
                    n_clicks=0
                ),
            ],
        ),
    ],
)


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Output("notification-container", "hideNotifications"),
    Input("notifications-show", "n_clicks"),
    Input("notifications-hide", "n_clicks"),
    prevent_initial_call=True,
)
def notify(n1, n2):
    button_id = ctx.triggered_id
    if n1 > 0:
        if "show" in button_id:
            return [dict(
                id="show-hide",
                action="show",
                message="Notification Message",
                color="Red",
                autoClose=False,
            )], no_update
    if n2 > 0:
        if "hide" in button_id:
            return no_update, ["show-hide"]
    return no_update
```
### clean and cleanQueue

Use `cleanQueue` to remove all queued notifications, and `clean` to remove all notifications from both state and queue.

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

component = dmc.Group(
    justify="center",
    children=[
        dmc.Button("Show 10 notifications", id="show-btn", n_clicks=0),
        dmc.Button("Clean queue", id="clean-queue-btn", variant="default", n_clicks=0),
        dmc.Button("Clean all", id="clean-all-btn", variant="outline", color="red", n_clicks=0),
        # Place one NotificationContainer in app.layout)
    ]
)


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("show-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_notifications(n):
    if n > 0:
        return [
            {
                "action": "show",
                "title": f"Notification {i + 1}",
                "message": "Most notifications are added to queue",
                "autoClose": False,
            }
            for i in range(10)
        ]
    return no_update


@callback(
    Output("notification-container", "cleanQueue", allow_duplicate=True),
    Input("clean-queue-btn", "n_clicks"),
    prevent_initial_call=True
)
def clean_queue(n):
    if n > 0:
        return True
    return no_update


@callback(
    Output("notification-container", "clean"),
    Input("clean-all-btn", "n_clicks"),
    prevent_initial_call=True
)
def clean_all(n):
    if n > 0:
        return True
    return no_update
```
### autoClose

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

component = dmc.Group(
    justify="center",
    children=[
        dmc.Button("Closes in 4 seconds", id="default-close-btn", n_clicks=0),
        dmc.Button("Closes in 500ms", id="short-close-btn", n_clicks=0),
        dmc.Button("Never closes automatically", id="no-autoclose-btn", n_clicks=0),
      #  dmc.NotificationsContainer(id="notification-container"),
    ]
)


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("default-close-btn", "n_clicks"),
    prevent_initial_call=True
)
def short_notification(n):
    if n > 0:
        return [{
            "action": "show",
            "message": "I will close in 4 seconds (the default auto close)",

        }]
    return no_update

@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("short-close-btn", "n_clicks"),
    prevent_initial_call=True
)
def short_notification(n):
    if n > 0:
        return [{
            "action": "show",
            "message": "I will close in 500ms",
            "autoClose": 500,
        }]
    return no_update


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("no-autoclose-btn", "n_clicks"),
    prevent_initial_call=True
)
def sticky_notification(n):
    if n > 0:
        return [{
            "action": "show",
            "title": "I will never close",
            "message": "unless you click X",
            "color": "blue",
            "autoClose": False,
            "style": {"marginBottom": 20}
        }]
    return no_update
```
### Auto close progress
Set `withAutoCloseProgress` prop on the `NotificationContainer` component to display a progress line at the bottom of
every notification that auto closes. The line fills up over the auto close timeout and reaches 100% right before the notification is closed:

```python
dmc.NotificationContainer(withAutoCloseProgress=True)
```
The `NotificationContainer` prop sets the default for all notifications, it can be overridden for individual notifications
with the `withAutoCloseProgress` property in `sendNotifications` prop.

Note that:

- The progress line is not displayed for notifications with `autoClose=False`
- The progress line fades out when the auto close timer is paused (for example, when the notification is hovered) and fades back in, starting over, when the timer is restarted
- The progress line uses notification color
- Use progress Styles API selector of the Notifications component to customize the line, for example, to change its height or color


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


component = html.Div([
    # Place one NotificationContainer in app.layout)
    dmc.Button("Show Notification", id="notification-progress-show")

])

@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("notification-progress-show", "n_clicks"),
    prevent_initial_call=True,
)
def show(n_clicks):
    if n_clicks is None:
        return no_update
    return [dict(
        title="Hey there!",
        id="show-notify",
        action="show",
        message="Notifications in Dash, Awesome!",
        icon=DashIconify(icon="ic:round-celebration"),
        withAutoCloseProgress=True
    )]
```
### Pause auto close on hover
By default, hovering over any notification pauses the auto close timer of all visible notifications. You can change this behavior with the `pauseResetOnHover` prop:

- `pauseResetOnHover`="all" (default) – pauses auto close for all notifications when any notification is hovered
- `pauseResetOnHover`="notification" – pauses auto close only for the hovered notification

```python
dmc.NotificationContainer(pauseResetOnHover="notification")
```

### Stacked layout
Set `layout="stacked"` on the `NotificationContainer` component to display notifications in a stacked layout where only
the latest notification is fully visible, and older notifications peek out behind it.

The stack expands when it is hovered with a mouse, when keyboard focus moves into it, and when it is tapped on a 
touch device – a tap outside collapses it again. While collapsed, the notifications behind the first one are inert: they
are not focusable and are hidden from screen readers.


```python
dmc.NotificationContainer(layout="stacked")
```
See the upstream [Mantine Notifications](https://mantine.dev/x/notifications/) documentation for an example.

### Use in Clientside Callbacks

`NotificationContainer` exposes the underlying Mantine notifications API globally in JavaScript. You can access this
in clientside callbacks using:

```js
dash_mantine_components.appNotifications
```

You can use the the full [Mantine notifications API](https://mantine.dev/x/notifications/):

- Show: `appNotifications.api.show({...})`

- Update: `appNotifications.api.update({...})`

- Hide: `appNotifications.api.hide("id")`

- Clean: `appNotifications.api.clean()`

- Clean queue: `appNotifications.api.cleanQueue()`

- View state: `appNotifications.store`


The example below demonstrates how to:

* Show a notification from a clientside callback
* Display the notification store in a `html.Pre` component
* Clean all notifications on the client

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


component = html.Div([
        dmc.Group([
            dmc.Button("Show Notification", id="api-show"),
            dmc.Button("Clean", id="api-clean", variant="outline", color="red"),
            dmc.Button("View Store", id="fetch-notification-store", variant="default"),
        ]),
        html.Pre(id="notification-store", style={"whiteSpace": "pre-wrap", "padding": "10px"}),

])

clientside_callback(
    """(n) => {
        if (n > 0) {
            dash_mantine_components.appNotifications.api.show({
                title: "Client-side Notification",
                message: "Triggered from clientside callback",
                color: "blue",
                autoClose: false
            });
        }
        return 0;
    }""",
    Output("api-show", "n_clicks"),
    Input("api-show", "n_clicks"),
    prevent_initial_call=True
)

clientside_callback(
    """() => {
        dash_mantine_components.appNotifications.api.clean()
        return null;
    }""",
    Output("api-clean", "n_clicks"),
    Input("api-clean", "n_clicks"),
    prevent_initial_call=True
)

clientside_callback(
    """() => {
        return JSON.stringify(dash_mantine_components.appNotifications.store, null, 2)
    }""",
    Output("notification-store", "children"),
    Input("fetch-notification-store", "n_clicks"),
    prevent_initial_call=True
)
```
### Notifications in Multi Page apps

In multi-page apps, define `NotificationContainer` in `app.layout`—even if notifications are triggered from other pages.

This ensures the container is always mounted and available, preventing errors when navigating between pages while notifications are active.

### CSS Extensions


As of DMC 1.2.0, Notification component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.


### 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.




#### Notification Selectors


| Selector    | Static Selector                     | Description                                            |
| ----------- | ----------------------------------- | ------------------------------------------------------ |
| root        | `.mantine-Notification-root`        | Root element                                           |
| loader      | `.mantine-Notification-loader`      | Loader component, displayed only when `loading` is set |
| icon        | `.mantine-Notification-icon`        | Icon component, displayed only when `icon` is set      |
| body        | `.mantine-Notification-body`        | Notification body, contains all other elements         |
| title       | `.mantine-Notification-title`       | Title element, displayed only when `title` is set      |
| description | `.mantine-Notification-description` | Description displayed below the title                  |
| closeButton | `.mantine-Notification-closeButton` | Close button element                                   |



#### Notification CSS Variables

| Selector | Variable                | Description                                    |
| -------- | ----------------------- | ---------------------------------------------- |
| root     | `--notification-radius` | Controls border-radius                         |
| root     | `--notification-color`  | Controls icon color or notification line color |



#### Notification Data Attributes

| Selector    | Attribute          | Condition                |
| ----------- | ------------------ | ------------------------ |
| root        | `data-with-icon`   | `icon` prop is set       |
| root        | `data-with-border` | `withBorder` prop is set |
| description | `data-with-title`  | `title` prop is set      |




#### Notifications Selectors
| Selector      | Static Selector                         | Description                                      |
|--------------|--------------------------------------|--------------------------------------------------|
| `root`       | `.mantine-Notifications-root`      | Notifications container, contains all notifications |
| `notification` | `.mantine-Notifications-notification` | Single notification |

#### Notifications CSS Variables
| Selector | Variable | Description |
|----------|----------|-------------|
| `root`   | `--notifications-container-width` | Controls notifications container max-width |
| `root`   | `--notifications-z-index` | Controls notifications container z-index |



### Keyword Arguments
#### NotificationContainer

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

- allowDragDismiss (boolean; optional):
    Determines whether notifications can be dismissed by dragging left
    or right default True.

- allowScrollDismiss (boolean; optional):
    Determines whether notifications can be dismissed with horizontal
    scroll gesture while hovered default True.

- 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.

- autoClose (number | boolean; optional):
    Auto close timeout for all notifications in ms, `False` to disable
    auto close, can be overwritten for individual notifications in
    `notifications.show` function, `4000` by defualt.

- 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.

- clean (boolean; optional):
    Notifications API: removes all notifications from the
    notifications state and queue.

- cleanQueue (boolean; optional):
    Notifications API: removes all notifications from the queue.

- containerWidth (string | number; optional):
    Notification width, cannot exceed 100%, `440` by default.

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

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

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

- hideNotifications (list of strings; optional):
    Notifications (ids) to be removed  from state or queue.

- layout (a value equal to: 'default', 'stacked'; optional):
    Controls how notifications are positioned in the stack,
    `'default'` – standard vertical list, `'stacked'` – only first
    notification is fully visible, rest are stacked behind default
    'default'.

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

- limit (number; optional):
    Maximum number of notifications displayed at a time, other new
    notifications will be added to queue, `5` by default.

- 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.

- notificationMaxHeight (string | number; optional):
    Notification `max-height`, used for transitions, `200` by default.

- pauseResetOnHover (a value equal to: 'all', 'notification'; optional):
    Determines which notifications should pause auto close on hover,
    `'all'` – pauses auto close for all notifications when any
    notification is hovered, `'notification'` – pauses auto close only
    for the hovered notification default 'all'.

- portalProps (dict; optional):
    Props to pass down to the Portal when withinPortal is True.

- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):
    Notifications position, `'bottom-right'` by default.

- sendNotifications (list of dicts; optional):
    Notifications to show or update.

    `sendNotifications` is a list of dicts with keys:

- 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):
    Notification transition duration in ms, `250` by default.

- variant (string; optional):
    variant.

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

- withAutoCloseProgress (boolean; optional):
    Determines whether notifications display an auto-close progress
    bar.

- withinPortal (boolean; optional):
    Determines whether notifications container should be rendered
    inside `Portal`, `True` by default.

- zIndex (string | number; optional):
    Notifications container z-index, `400` by default.

## Progress  
Use the Progress component to give feedback to the user about the status of a task with label, sections, etc.  
Category: Feedback  

### Introduction

### Simple Example

Progress component has one required prop: `value` - filled bar width in %. You can change bar color by passing `color`
prop (by default theme.primaryColor will be used).

```python
import dash_mantine_components as dmc

component = dmc.Progress(value=26, color="pink")
```
### Size

`size` controls progress bar height. Progress has predefined sizes: xs, sm, etc.
Alternatively, you can use a number to set height in px.

```python
import dash_mantine_components as dmc

dmc.Progress(size="sm")

dmc.Progress(size=20)
```

### Radius

Radius controls border-radius of body and filled part.

```python
import dash_mantine_components as dmc

dmc.Progress(radius="lg")

dmc.Progress(radius=10)
```

### Multiple sections

Multiple sections can be displayed instead of just one single bar.

```python
import dash_mantine_components as dmc

component = dmc.ProgressRoot(
    [
        dmc.ProgressSection(dmc.ProgressLabel("Documents"), value=33, color="cyan"),
        dmc.ProgressSection(dmc.ProgressLabel("Photos"), value=28, color="pink"),
        dmc.ProgressSection(dmc.ProgressLabel("Others"), value=15, color="orange"),
    ],
    size="xl",
)
```
### Vertical orientation

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.Progress(value=80, orientation="vertical", h=200),

    dmc.Progress(
        value=60,
        color="orange",
        size="xl",
        orientation="vertical",
        h=200,
        animated=True
    ),

    dmc.ProgressRoot(
        size="xl",
        autoContrast=True,
        orientation="vertical",
        h=200,
        children=[
            dmc.ProgressSection(
                value=40,
                color="lime.4",
                children=dmc.ProgressLabel("Documents")
            ),
            dmc.ProgressSection(
                value=20,
                color="yellow.4",
                children=dmc.ProgressLabel("Apps")
            ),
            dmc.ProgressSection(
                value=20,
                color="cyan.7",
                children=dmc.ProgressLabel("Other")
            )
        ]
    )
])
```
### With Tooltip

Use the [Tooltip target](/components/tooltip#target) prop rather than using `ProgressSection` as Tooltip children.


```python
import dash_mantine_components as dmc


component = dmc.Box(
    [
        dmc.ProgressRoot(
            [
                dmc.ProgressSection(
                    dmc.ProgressLabel("Documents"),
                    value=33,
                    color="cyan",
                    id="progress-section1",
                ),
                dmc.ProgressSection(
                    dmc.ProgressLabel("Photos"),
                    value=28,
                    color="pink",
                    id="progress-section2",
                ),
                dmc.ProgressSection(
                    dmc.ProgressLabel("Others"),
                    value=15,
                    color="orange",
                    id="progress-section3",
                ),
            ],
            size="40",
        ),
        dmc.Tooltip(
            target="#progress-section1",
            label="Documents – 33Gb",
        ),
        dmc.Tooltip(
            target="#progress-section2",
            label="Photos – 28Gb",
        ),
        dmc.Tooltip(
            target="#progress-section3",
            label="Other – 15Gb",
        ),
    ]
)
```
### With FloatingTooltip

When using `FloatingTooltips`  set `boxWrapperProps={'display': 'contents'}` for best results:

```python
import dash_mantine_components as dmc

component = dmc.ProgressRoot(
    [
        dmc.FloatingTooltip(
            dmc.ProgressSection(
                dmc.ProgressLabel("Documents"),
                value=33,
                color="cyan",
            ),
            label="Documents – 33Gb",
            boxWrapperProps={"display": "contents"},
        ),
        dmc.FloatingTooltip(
            dmc.ProgressSection(
                dmc.ProgressLabel("Photos"),
                value=28,
                color="pink",
            ),
            label="Photos – 28Gb",
            boxWrapperProps={"display": "contents"},
        ),
        dmc.FloatingTooltip(
            dmc.ProgressSection(
                dmc.ProgressLabel("Other"),
                value=25,
                color="orange",
            ),
            label="Other – 15Gb",
            boxWrapperProps={"display": "contents"},
        ),
    ],
    size=40,
)
```
### 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.


#### Progress selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | `.mantine-Progress-root` | Root element |
| section | `.mantine-Progress-section` | `Progress.Section` root element |
| label | `.mantine-Progress-label` | `Progress.Label` root element |

#### Progress CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | `--progress-radius` | Controls `border-radius` of track and sections |
| root | `--progress-size` | Controls height of progress bar |
| root | `--progress-transition-duration` | Controls width `transition-duration` of progress bar |

#### Progress data attributes

| Selector | Attribute | Condition |
|----------|-----------|-----------|
| section | `data-striped` | `striped` or `animated` props are set |
| section | `data-animated` | `animated` prop is set |



### Keyword Arguments
#### Progress

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

- animated (boolean; optional):
    Determines whether the sections stripes should be animated, if
    set, `striped` prop is ignored, `False` by default.

- 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 label text color should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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 value, `theme.primaryColor`
    by default.

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

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

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Controls orientation default `'horizontal'`.

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

- size (number; optional):
    Controls track height, `'md'` by default.

- striped (boolean; optional):
    Determines whether the section should have stipes, `False` 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):
    Controls sections width transition duration, value is specified in
    ms, `100` by default.

- value (number; required):
    Value of the progress.

- variant (string; optional):
    variant.

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

## RingProgress  
Use the RingProgress component to give feedback to the user about the status of a task with label, sections, etc.  
Category: Feedback  

### Simple Example

Set `sections` prop to an array of:
* `value` - number between 0 and 100 - amount of space filled by segment
* `color` - segment color from theme or any other css color value

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.RingProgress(
            sections=[
                {"value": 40, "color": "cyan"},
                {"value": 15, "color": "orange"},
                {"value": 15, "color": "grape"},
            ]
        ),
        dmc.RingProgress(
            sections=[
                {"value": 40, "color": "#68b5e8"},
                {"value": 15, "color": "#6888e8"},
                {"value": 15, "color": "#8468e8"},
            ]
        ),
    ]
)
```
### Root Color

Use `rootColor` property to change the root color.

```python
import dash_mantine_components as dmc

component = dmc.RingProgress(
    sections=[
        {"value": 40, "color": "yellow"},
    ],
    rootColor="red",
)
```
### Section Tooltips

Hover on the sections to see tooltips in action.

```python
import dash_mantine_components as dmc

component = dmc.RingProgress(
    sections=[
        {"value": 14, "color": "yellow", "label": "Docs", "tooltip": "Docs - 14GB"},
        {"value": 17, "color": "red", "label": "Apps", "tooltip": "Apps - 17GB"},
        {"value": 69, "color": "violet", "label": "Other", "tooltip": "Other - 69GB"},
    ],
)
```
### With label

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    [
        dmc.RingProgress(
            id="ring-progress-label",
            sections=[{"value": 33, "color": "indigo"}],
            label=dmc.Text("33%", c="indigo", ta="center"),
        ),
        dmc.RingProgress(
            id="ring-progress-label2",
            sections=[
                {"value": 25, "color": "indigo"},
                {"value": 15, "color": "orange"},
            ],
            label=dmc.Text("App data usage", size="xs", ta="center"),
        ),
        dmc.RingProgress(
            id="ring-progress-label3",
            sections=[{"value": 60, "color": "green"}, {"value": 5, "color": "yellow"}],
            label=dmc.Center(
                dmc.ActionIcon(
                    color="teal",
                    variant="light",
                    radius="xl",
                    size="xl",
                    children=DashIconify(icon="tabler:check", height=40),
                )
            ),
        ),
    ]
)
```
### Size, Thickness And Rounded Caps

Use `size`, `thickness`, `roundCaps` props to customize the component.

```python
import dash_mantine_components as dmc

dmc.RingProgress(
    size=120,
    thickness=12,
    roundCaps=False,
    sections=[
        {"value": 40, "color": "red"},
        {"value": 15, "color": "yellow"},
        {"value": 15, "color": "violet"},
    ],
)
```

### Section gaps
Use the `sectionGap` prop to add visual separation between sections. The gap is specified in degrees:

```python
import dash_mantine_components as dmc

sections = [
    {"value": 40, "color": "cyan"},
    {"value": 25, "color": "orange"},
    {"value": 15, "color": "grape"},
]

component = dmc.Stack(
    [
        dmc.Box(
            [
                dmc.Text("No gap (default)", size="sm", ta="center", mb="xs"),
                dmc.RingProgress(sections=sections),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("5° gap", size="sm", ta="center", mb="xs"),
                dmc.RingProgress(sections=sections, sectionGap=5),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("10° gap", size="sm", ta="center", mb="xs"),
                dmc.RingProgress(sections=sections, sectionGap=10),
            ]
        ),
    ],
    align="center",
)
```
### Start angle
Use the `startAngle` prop to control where the progress starts. The angle is specified in degrees, where 0 = right, 90 = bottom, 180 = left, and 270 = top (default):

```python
import dash_mantine_components as dmc

sections = [{"value": 40, "color": "cyan"}]

component = dmc.Group(
    [
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=0),
                dmc.Text("0° (right)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=90),
                dmc.Text("90° (bottom)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=180),
                dmc.Text("180° (left)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=270),
                dmc.Text("270° (top)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
    ],
    justify="center",
)
```
### 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-RingProgress-root  | Root element   |
| svg   | .mantine-RingProgress-svg   | svg element    |
| curve | .mantine-RingProgress-curve | circle element |
| label | .mantine-RingProgress-label | Label element  |


### Keyword Arguments
#### RingProgress

- 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.

- 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.

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

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

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

- label (a list of or a singular dash component, string or number; optional):
    Label displayed in the center of the ring.

- 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.

- rootColor (optional):
    Color of the root section, key of theme.colors or CSS color value.

- roundCaps (boolean; optional):
    Sets whether the edges of the progress circle are rounded.

- sectionGap (number; optional):
    Gap between sections in degrees. Reduces the visual size of each
    section default 0.

- sections (boolean | number | string | dict | list; required):
    Ring sections.

- size (number; optional):
    Width and height of the progress ring.

- startAngle (number; optional):
    Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270
    = top default 270.

- 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.

- thickness (number; optional):
    Ring thickness.

- transitionDuration (number; optional):
    Transition duration in milliseconds for section value and color
    changes default 0.

- variant (string; optional):
    variant.

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

## SemiCircleProgress  
Use the SemiCircleProgress component to represent progress with semi circle diagram  
Category: Feedback  

### Usage

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.SemiCircleProgress(
      fillDirection="left-to-right",
      orientation="up",
      filledSegmentColor="blue",
      size=200,
      thickness=12,
      value=40,
      label="Label"
)
```
### Change empty segment color

Use `emptySegmentColor` prop to change color of empty segment, it accepts key of theme colors or any valid CSS color value:

```python
import dash_mantine_components as dmc

component = dmc.SemiCircleProgress(
    value=30, emptySegmentColor="var(--mantine-color-dimmed)"
)
```
### Change label position
By default, the `label` is displayed at the bottom of the component, you can change its position to center by using `labelPosition` prop:


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.SemiCircleProgress( value=30, label="Bottom", mb="xl"),
    dmc.SemiCircleProgress(value=30, label="Center", labelPosition="center")
])
```
### Filled segment transition
By default, transitions are disabled, to enable them, set `transitionDuration` prop to a number of milliseconds:


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

component = dmc.Box([
    dmc.SemiCircleProgress(value=30, transitionDuration=250, label="30%", id="semi-circle-progress"),
    dmc.Button("Set random value", mt="md", ml=22, id="semi-circle-progress-btn"),

])

@callback(
    Output("semi-circle-progress", "value"),
    Output("semi-circle-progress", "label"),
    Input("semi-circle-progress-btn", "n_clicks")
)
def update(n):
    number = random.randint(1, 100)
    return number, f"{number}%"
```
### 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.


#### Selectors

| Selector       | Static Selector                       | Description                |
|----------------|---------------------------------------|----------------------------|
| `root`         | `.mantine-SemiCircleProgress-root`    | Root element               |
| `svg`          | `.mantine-SemiCircleProgress-svg`     | Root SVG element           |
| `emptySegment` | `.mantine-SemiCircleProgress-emptySegment` | Empty circle segment       |
| `filledSegment`| `.mantine-SemiCircleProgress-filledSegment` | Filled circle segment      |
| `label`        | `.mantine-SemiCircleProgress-label`   | Label element              |

#### CSS Variables

| Selector | Variable                      | Description                                                   |
|----------|-------------------------------|---------------------------------------------------------------|
| `root`   | `--scp-empty-segment-color`   | Color of the empty segment                                    |
|          | `--scp-filled-segment-color`  | Color of the filled segment                                   |
|          | `--scp-rotation`              | Transform styles of the SVG, controlled by `orientation` and `fillDirection` props |
|          | `--scp-thickness`             | Controls `strokeWidth` of the circle                         |
|          | `--scp-transition-duration`   | Controls transition duration of the filled segment           |

#### Data Attributes

| Selector | Attribute       | Value                         |
|----------|-----------------|-------------------------------|
| `label`  | `data-position` | Value of `labelPosition` prop |



### Keyword Arguments
#### SemiCircleProgress

- 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.

- 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.

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

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

- emptySegmentColor (optional):
    Key of `theme.colors` or any valid CSS color value, by default the
    value is determined based on the color scheme value.

- fillDirection (a value equal to: 'right-to-left', 'left-to-right'; optional):
    Direction from which the circle is filled, `'left-to-right'` by
    default.

- filledSegmentColor (optional):
    Key of `theme.colors` or any valid CSS color value,
    `theme.primaryColor` by default.

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

- label (a list of or a singular dash component, string or number; optional):
    Label rendered inside the circle.

- labelPosition (a value equal to: 'bottom', 'center'; optional):
    Label position relative to the circle center, `'bottom'` by
    default.

- 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.

- orientation (a value equal to: 'up', 'down'; optional):
    Orientation of the circle, `'up'` by default.

- size (number; optional):
    Diameter of the svg in px, `200` 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.

- thickness (number; optional):
    Circle thickness in px, `12` by default.

- transitionDuration (number; optional):
    Transition duration of filled section styles changes in ms, `0` by
    default.

- value (number; required):
    Progress value from `0` to `100`.

- variant (string; optional):
    variant.

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

## Skeleton  
Use Skeleton component to disable user interactions and indicate loading state.  
Category: Feedback  

### Simple Usage

Use `Skeleton` to create a placeholder for loading content. `Skeleton` support the following props:

- `height` - height - any valid CSS value
- `width` - width - any valid CSS value
- `radius` - key of `theme.radius` or any valid CSS value to set border-radius
- `circle` - if true, width, height and border-radius will equal to value specified in `height` prop
- `animate` - true by default, controls animation

```python
import dash_mantine_components as dmc

component = dmc.Box(
    [
        dmc.Skeleton(height=50,  circle=True, mb="xl"),
        dmc.Skeleton(height=8, radius="xl"),
        dmc.Skeleton(height=8, my=6),
        dmc.Skeleton(height=8, w="70%", radius="xl"),
    ],
)
```
### Display Skeleton while loading

The `Seleton` will be visible while the children components are being updated by a Dash callback.

```python
import time

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

from utils.utils import create_graph

component = html.Div(
    [
        dmc.Skeleton(
            visible=False,
            children=html.Div(id="skeleton-graph-container", children=create_graph()),
            mb=10,
        ),
        dmc.Button("Click Me!", id="graph-skeleton-button"),
    ]
)


@callback(
    Output("skeleton-graph-container", "children"),
    Input("graph-skeleton-button", "n_clicks"),
)
def update_graph(n_clicks):
    time.sleep(2)
    return create_graph()
```
### Use with dcc.Loading

For greater control over when the `Skeleton` is displayed and for how long, use the `dcc.Loading` component from
`dash-core-components`. Set the `Skeleton` in the `custom_spinner` prop and configure options such as:  

- `delay_show`: Specifies the wait time before displaying the `Skeleton`. This helps prevent flickering for fast-loading content.  
- `delay_hide`: Defines how long the `Skeleton` remains visible after loading completes, creating a smoother transition between the placeholder and final content.  
- `target_components`: Determines which components trigger the `Skeleton` display. This allows fine-grained control,
making the loading effect triggered only by specific components rather than automatically being triggered by any of the children.

Refer to the [Dash Documentation](https://dash.plotly.com/dash-core-components/loading) for more details.

Here is an example of `delay_hide` prop in `dcc.Loading` to prevent the `Skeleton` from showing for a very short time.

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

component = html.Div(
    [
        dcc.Loading(
            children=html.Div([
                dmc.Text("Initial data", id="dccloading-div"),
                dmc.Text("The data only takes 200ms to update, but `delay_hide` is set to 1000ms to prevent flashing.")
            ]),
            delay_hide=1000,
            custom_spinner = dmc.Skeleton(
                visible=True,
                h="100%"
            ),
        ),
        dmc.Button("Update!", id="dccloading-button"),
    ]
)

@callback(
    Output("dccloading-div", "children"),
    Input("dccloading-button", "n_clicks"),
    prevent_initial_call=True
)
def update_graph(n):
    time.sleep(.2)
    return f"Data updated {n} times"
```
### 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.


#### Skeleton Selectors

| Selector | Static selector         | Description   |
|----------|-------------------------|---------------|
| root     | .mantine-Skeleton-root  | Root element  |

#### Skeleton CSS Variables

| Selector | Variable          | Description                      |
|----------|------------------|----------------------------------|
| root     | --skeleton-height | Controls skeleton height        |
|          | --skeleton-width  | Controls skeleton width         |
|          | --skeleton-radius | Controls skeleton border-radius |

#### Skeleton Data Attributes

| Selector | Attribute      | Condition               |
|----------|--------------|-------------------------|
| root     | data-visible | `visible` prop is set   |
| root     | data-animate | `animate` prop is set   |



### Keyword Arguments
#### Skeleton

- children (a list of or a singular dash component, string or number; optional):
    Content.

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

- animate (boolean; optional):
    Determines whether Skeleton should be animated, `True` by default.

- 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.

- circle (boolean; optional):
    If set, Skeleton `width` and `border-radius` are equal to its
    `height`, `False` by default.

- 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.

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

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

- height (string | number; optional):
    Skeleton `height`, numbers are converted to rem, `auto` 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.

- 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.

- 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.

- variant (string; optional):
    variant.

- visible (boolean; default True):
    Determines whether Skeleton overlay should be displayed, `True` by
    default.

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

- width (string | number; optional):
    Skeleton `width`, numbers are converted to rem, `100%` by default,
    ignored when `circle` prop is set.

## Checkbox  
Use Checkbox component to capture boolean input from user.  
Category: Inputs  

### Introduction

### Simple Usage

Use the property `checked` in the callbacks.

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

component = html.Div(
    [
        dmc.Checkbox(
            id="checkbox-state", label="I agree to sell my privacy", checked=True, color="green", mb=10
        ),
        dmc.Text(id="checkbox-output"),
    ]
)


@callback(Output("checkbox-output", "children"), Input("checkbox-state", "checked"))
def checkbox(checked):
    return str(checked)
```
### Read only
Set the `readOnly` prop to prevent the checkbox value from being changed by user interaction. The checkbox still
displays its current value and reflects programmatic updates to the checked prop, but clicking it (or pressing Space) 
does not toggle its state:


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

component = dmc.Box(
    [
        dmc.Checkbox(
            id="read-only-checkbox",
            checked=True,
            readOnly=True,
            label="Read only checkbox",
        ),
        dmc.Button("Toggle from callback", id="toggle-read-only-checkbox", mt="md"),
    ]
)


@callback(
    Output("read-only-checkbox", "checked"),
    Input("toggle-read-only-checkbox", "n_clicks"),
    prevent_initial_call=True,
)
def toggle_checkbox(n_clicks):
    return n_clicks % 2 == 0
```
### States

```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Checkbox(checked=False, label="Default checkbox"),
    dmc.Checkbox(checked=False, indeterminate=True, label="Indeterminate checkbox"),
    dmc.Checkbox(checked=True, label="Checked checkbox"),
    dmc.Checkbox(checked=True, variant="outline", label="Outline checked checkbox"),
    dmc.Checkbox(variant="outline", indeterminate=True, label="Outline indeterminate checkbox"),
    dmc.Checkbox(disabled=True, label="Disabled checkbox"),
    dmc.Checkbox(disabled=True, checked=True, label="Disabled checked checkbox"),
    dmc.Checkbox(disabled=True, indeterminate=True, label="Disabled indeterminate checkbox")
])
```
### Error state

Use the `error` prop to display error message below the checkbox label. If you want to apply error styles to checkbox 
without error message, use boolean `error` prop. If you want to display error message without applying error styles,
set `withErrorStyles=False`.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Checkbox(label="With boolean error", error=True),
        dmc.Checkbox(label="With error message", error="Must be checked"),
        dmc.Checkbox(
            label="With error message",
            error="No error styles",
            withErrorStyles=False,
        ),
    ]
)
```
### Light variant

Checkbox supports `filled` (default), `outline` and `light` variants. With `variant="light"`, checked and indeterminate
states have a light background and a contrasting icon. 

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Checkbox(
            variant="light",
            checked=True,
            label="Light checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            indeterminate=True,
            label="Light indeterminate checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            color="teal",
            checked=True,
            label="Teal light checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            color="grape",
            checked=True,
            label="Grape light checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            color="#e64980",
            checked=True,
            label="Light checkbox with CSS color",
        ),
    ],
    gap=7,
)
```
### Change icons

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.Stack([
    dmc.Checkbox(
        label="Custom checked icon",
        checked=True,
        icon=DashIconify(icon="ion:bag-check-sharp"),
        size="lg",
    ),
    dmc.Checkbox(
        label="Custom indeterminate icons",
        indeterminate=True,
        indeterminateIcon=DashIconify(icon="mdi:dots-circle", ),
        size="lg",
    ),
])
```
### Change icon color

Use `iconColor` prop to change icon color. You can reference colors from theme.colors or use any valid CSS color:

```python
import dash_mantine_components as dmc

component = dmc.Checkbox(
    checked=True,
    color="lime.4",
    iconColor="dark.8",
    size="md",
    label="Bright lime checkbox"
)
```
### Different Colors

Set checkbox color using the `color` prop.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Checkbox(label="I agree to sell my privacy", color="green", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", color="blue", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", color="red", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", color="orange", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", color="pink", checked=True),
    ],
)
```
### Different Sizes

Choose from one of the following sizes: xs, sm, md, lg, xl.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Checkbox(label="I agree to sell my privacy", size="xs", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", size="sm", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", size="md", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", size="lg", checked=True),
        dmc.Checkbox(label="I agree to sell my privacy", size="xl", checked=True),
    ],
)
```
### Add custom sizes
Using the [Styles API](/styles-api), you can add any number of custom sizes with `data-size` attribute.  Defining the checkbox 
sizes in the [theme object](/theme-object) in the `MantineProvider` makes them available to all `Checkbox` components in the app.

 - [Live Demo on PyCafe](https://py.cafe/dash.mantine.components/checkbox-custom-sizes-demo)  

```python
component = dmc.Box([
    dmc.Checkbox(
        label="Extra small checkbox",
        size="xxs",
    ),
    dmc.Checkbox(
        label="Extra extra large checkbox",
        size="xxl",
        mt="md"
    ),
])

app.layout = dmc.MantineProvider(
   children=component,
    theme={
        "components": {
            "Checkbox": {"classNames": {
                "root": "checkbox-add-custom-sizes-root",
                "label": "checkbox-add-custom-sizes-label"}
            }
        }
    }
)
```
Define the classes in a `.css` file in `/assets` folder

```css
.checkbox-add-custom-sizes-root {
  --checkbox-size-xxl: 42px;
  --checkbox-size-xxs: 14px;

  &[data-size='xxl'] {
    .checkbox-add-custom-sizes-label {
      font-size: 22px;
      line-height: 40px;
    }
  }

  &[data-size='xxs'] {
    .checkbox-add-custom-sizes-label {
      font-size: 10px;
      line-height: 14px;
    }
  }
}
```


### Indeterminate state
`Checkbox` supports indeterminate state. When `indeterminate=True` prop is set, `checked` prop is ignored (checkbox
always has checked styles)

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

initial_values = [
    {"label": "Receive email notifications", "checked": False},
    {"label": "Receive sms notifications", "checked": True},
    {"label": "Receive push notifications", "checked": False},
]

component = html.Div([
    dmc.Checkbox(
        id="all-notifications",
        label="Receive all notifications",
        checked=False,
        indeterminate=False
    ),
    html.Div([
        dmc.Checkbox(
            id={"type": "notification-item", "index": i},
            label=item["label"],
            checked=item["checked"],
            style={"marginTop": "5px", "marginLeft": "33px"}
        )
        for i, item in enumerate(initial_values)
    ])
])



@callback(
    Output("all-notifications", "checked"),
    Output("all-notifications", "indeterminate"),
    Output({"type": "notification-item", "index": ALL}, "checked"),
    Input("all-notifications", "checked"),
    Input({"type": "notification-item", "index": ALL}, "checked"),
    prevent_initial_callback=True
)
def update_main_checkbox(all_checked, checked_states):
    # handle "all" checkbox"
    if ctx.triggered_id == 'all-notifications':
        checked_states = [all_checked] * len(checked_states)

    # handled individual check boxes
    all_checked_states = all(checked_states)
    indeterminate = any(checked_states) and not all_checked_states
    return all_checked_states, indeterminate, checked_states
```
### Label with link

```python
import dash_mantine_components as dmc

component = dmc.Checkbox(
    id="checkbox-simple",
    label=dmc.Text(
        ["I accept the ", dmc.Anchor("Terms and Conditions", href="#"), "."]
    ),
)
```
### Pointer cursor
By default, checkbox input and label have `cursor: default` (same as native `input[type='checkbox']`). To change cursor
to pointer, set `cursorType` on `theme`:

```python

app.layout = dmc.MantineProvider(
    theme = {"cursorType": "pointer"},
    children={...}
)
```


### Checkbox Group component

Use `CheckboxGroup` component to create inputs with multiple checkbox elements and label, description, etc. You can use either
the dmc.Group or dmc.Stack to customize the orientation and spacing of checkbox elements.

Use `value` property of the checkbox group in the callbacks.

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

component = html.Div(
    [
        dmc.CheckboxGroup(
            id="checkbox-group",
            label="Select your favorite library",
            description="This is anonymous",
            withAsterisk=True,
            mb=10,
            children=dmc.Group(
                [
                    dmc.Checkbox(label="Pandas", value="pandas"),
                    dmc.Checkbox(label="Polars", value="polars"),
                    dmc.Checkbox(label="Vaex", value="vaex"),
                    dmc.Checkbox(label="Dask", value="dask"),
                ],
                mt=10,
            ),
            value=["pandas", "polars"],
        ),
        dmc.Text(id="checkbox-group-output"),
    ]
)


@callback(Output("checkbox-group-output", "children"), Input("checkbox-group", "value"))
def checkbox(value):
    return ", ".join(value) if value else None
```
### Max Selected Values

Use `maxSelectedValues` prop to limit the number of selected values in `CheckboxGroup`. When the limit is reached, the remaining checkboxes are disabled and cannot be selected.


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

component = html.Div(
    [
        dmc.CheckboxGroup(
            id="checkbox-group-max",
            label="Select your favorite library",
            description="This is anonymous",
            withAsterisk=True,
            mb=10,
            children=dmc.Group(
                [
                    dmc.Checkbox(label="Pandas", value="pandas"),
                    dmc.Checkbox(label="Polars", value="polars"),
                    dmc.Checkbox(label="Vaex", value="vaex"),
                    dmc.Checkbox(label="Dask", value="dask"),
                ],
                mt=10,
            ),
            value=["pandas", "polars"],
            maxSelectedValues=2
        ),
        dmc.Text(id="checkbox-group-max-output"),
    ]
)


@callback(Output("checkbox-group--max-output", "children"), Input("checkbox-group-max", "value"))
def checkbox(value):
    return ", ".join(value) if value else None
```
### CheckboxIndicator component

`CheckboxIndicator` looks exactly the same as `Checkbox` component, but it does not have any semantic meaning, it's 
just a visual representation of checkbox state. You can use it in any place where you need to display checkbox state 
without any interaction related to the indicator. For example, it is useful in cards based on buttons, trees, etc.

> Note that CheckboxIndicator cannot be focused or selected with keyboard. It is not accessible and should not be used as a replacement for Checkbox component.

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.CheckboxIndicator(),
    dmc.CheckboxIndicator(checked=True),
    dmc.CheckboxIndicator(disabled=True),
    dmc.CheckboxIndicator(disabled=True, checked=True)
])
```
### CheckboxCard component
`CheckboxCard` component can be used as a replacement for `Checkbox` to build custom cards/buttons/other things that
work as checkboxes. The root element of the component has `role="checkbox"` attribute, it is accessible by default 
and supports the same keyboard interactions as `input[type="checkbox"]`.

Note - do not set the `checked` prop in the `CheckboxIndicator` component otherwise the `CheckboxIndicator` will not be updated.

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

component = dmc.Box([
        dmc.CheckboxCard(
            id="checkbox-card",
            withBorder=True,
            p="md",
            checked=True,
            children=[
                dmc.Center([
                    dmc.CheckboxIndicator(),
                    dmc.Text("CheckboxCard", size="xl", pl="sm"),
                ], inline=True),
            ]
        ),
        dmc.Box(id="checkbox-card-out"),
    ], p="lg")


@callback(
    Output("checkbox-card-out", "children"),
    Input("checkbox-card", "checked")
)
def update(checked):
   return f"Checked? {checked}"
```
### CheckboxCard with CheckboxGroup

You can use `CheckboxCard` with `CheckboxGroup` the same way as `Checkbox` component.

Note - do not set the `checked` prop in the `CheckboxIndicator` component otherwise the `CheckboxIndicator` will not be updated.
This example also shows how to add hover styles

```python

from dash import Input, Output, callback
import dash_mantine_components as dmc

def make_checkboxcard(label, description):
    return dmc.CheckboxCard(
        withBorder=True,
        p="md",
        mt="md",
        className="checkboxcard-root",
        value=label,
        children=[
            dmc.Group([
                dmc.CheckboxIndicator(),
                dmc.Box([
                    dmc.Text(label, lh="1.3", fz="md", fw="bold" ),
                    dmc.Text(description, size="sm", c="dimmed"),
                ])
            ], wrap="nowrap", align="flex-start"),
        ]
    )


component = dmc.Box([
    dmc.CheckboxGroup(
        id="checkbox-card-group",
        label= "CheckboxGroup label",
        value=["CheckboxCard 1"],
        description="This is a CheckboxGroup description",
        children=[
            make_checkboxcard(f"CheckboxCard {i}", f"Checkbox description {i}")
            for i in range(1, 5)
        ]
    ),
    dmc.Box(id="checkbox-card-group-out"),
], p="lg")


@callback(
    Output("checkbox-card-group-out", "children"),
    Input("checkbox-card-group", "value")
)
def update(checked):
   return f"Checked? {checked}"
```

```css
/* used for both CheckboxCard and RadioCard*/
.checkboxcard-root {
    position: relative;
    padding: var(--mantine-spacing-md);
    transition: border-color 150ms ease;

    &[data-checked] {
        border-color: var(--mantine-primary-color-filled);
    }
}

.checkboxcard-root:hover {
    background-color: light-dark(
            var(--mantine-color-gray-0),
            var(--mantine-color-dark-6)
    );
}
```


### Example: Customize with Styles API


```python
import dash_mantine_components as dmc

component =  dmc.Checkbox(
    classNames={"root": "dmc-api-demo-root"},
    label="Checkbox button",
    w=180
)
```

```css

.dmc-api-demo-root {
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
  border-radius: var(--mantine-radius-md);
  font-weight: 500;
  cursor: pointer;

  &[data-checked] {
    background-color: var(--mantine-color-blue-filled);
    border-color: var(--mantine-color-blue-filled);
    color: var(--mantine-color-white);
  }
}
```

   

### 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.


> Check the Mantine documentation to explore the available selectors.  The [interactive demo](https://mantine.dev/core/checkbox/#styles-api)
> lets you hover over selectors to see which elements they correspond to.

#### Checkbox Selectors

| Selector       | Static selector              | Description                                             |
|---------------|------------------------------|---------------------------------------------------------|
| root          | .mantine-Checkbox-root       | Root element                                           |
| input         | .mantine-Checkbox-input      | Input element (`input[type="checkbox"]`)               |
| icon          | .mantine-Checkbox-icon       | Checkbox icon, used to display checkmark and indeterminate state icon |
| inner         | .mantine-Checkbox-inner      | Wrapper for icon and input                             |
| body          | .mantine-Checkbox-body       | Input body, contains all other elements                |
| labelWrapper  | .mantine-Checkbox-labelWrapper | Contains label, description, and error              |
| label         | .mantine-Checkbox-label      | Label element                                          |
| description   | .mantine-Checkbox-description | Description displayed below the label                 |
| error         | .mantine-Checkbox-error      | Error message displayed below the label               |

#### Checkbox CSS Variables

| Selector | Variable              | Description                                |
|----------|----------------------|--------------------------------------------|
| root     | --checkbox-color     | Controls checked checkbox background-color |
|          | --checkbox-radius    | Controls checkbox border-radius           |
|          | --checkbox-size      | Controls checkbox width and height        |
|          | --checkbox-icon-color | Controls checkbox icon color              |

#### Checkbox Data Attributes

| Selector | Attribute          | Condition                | Value                      |
|----------|-------------------|-------------------------|----------------------------|
| root     | data-checked      | `checked` prop is set   | –                          |
| input    | data-error        | `error` prop is set     | –                          |
| input    | data-indeterminate | `indeterminate` prop is set | –                     |
| inner    | data-label-position | –                      | Value of `labelPosition` prop |

#### CheckboxGroup Selectors

| Selector    | Static selector               | Description                         |
|------------|------------------------------|-------------------------------------|
| root       | .mantine-CheckboxGroup-root  | Root element                       |
| label      | .mantine-CheckboxGroup-label | Label element                      |
| required   | .mantine-CheckboxGroup-required | Required asterisk element, rendered inside label |
| description | .mantine-CheckboxGroup-description | Description element                |
| error      | .mantine-CheckboxGroup-error | Error element                      |

#### CheckboxIndicator Selectors

| Selector   | Static selector                     | Description   |
|------------|------------------------------------|---------------|
| indicator  | .mantine-CheckboxIndicator-indicator | Root element  |
| icon       | .mantine-CheckboxIndicator-icon   | Checkbox icon |

#### CheckboxIndicator CSS Variables

| Selector   | Variable            | Description                                |
|------------|--------------------|--------------------------------------------|
| indicator  | --checkbox-color   | Controls checked checkbox background-color |
|            | --checkbox-radius  | Controls checkbox border-radius           |
|            | --checkbox-size    | Controls checkbox width and height        |
|            | --checkbox-icon-color | Controls checkbox icon color          |

#### CheckboxIndicator Data Attributes

| Selector   | Attribute     | Condition         |
|------------|-------------|------------------|
| indicator  | data-checked | `checked` prop is set |
| indicator  | data-disabled | `disabled` prop is set |

#### CheckboxCard Selectors

| Selector | Static selector            | Description   |
|----------|----------------------------|---------------|
| card     | .mantine-CheckboxCard-card | Root element  |

#### CheckboxCard CSS Variables

| Selector | Variable      | Description                  |
|----------|-------------|------------------------------|
| card     | --card-radius | Controls card border-radius |

#### CheckboxCard Data Attributes

| Selector | Attribute       | Condition                  |
|----------|----------------|----------------------------|
| card     | data-checked    | `checked` prop is set      |
| card     | data-with-border | `withBorder` prop is set  |


### Keyword Arguments
#### Checkbox

- 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 icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- checked (boolean; optional):
    State of check box.

- 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 to set input
    background color in checked state, `theme.primaryColor` by
    default.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Description displayed below the label.

- disabled (boolean; optional):
    Whether component is disabled.

- error (a list of or a singular dash component, string or number; optional):
    Error message displayed below the label.

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

- icon (a list of or a singular dash component, string or number; optional):
    Icon.

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- indeterminate (boolean; optional):
    Indeterminate state of the checkbox. If set, `checked` prop is
    ignored.

- indeterminateIcon (a list of or a singular dash component, string or number; optional):
    Indeterminate icon.

- label (a list of or a singular dash component, string or number; optional):
    Content of the `label` associated with the checkbox.

- labelPosition (a value equal to: 'left', 'right'; optional):
    Position of the label relative to the input, `'right'` by default.

- 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.

- 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,` `theme.defaultRadius` by default.

- readOnly (boolean; optional):
    If set,  prevents the checkbox value from being changed by user
    interaction.

- size (optional):
    Controls size of the component, `'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.

- value (string; optional):
    To be used with checkbox group.

- variant (string; optional):
    variant.

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

- withErrorStyles (boolean; optional):
    If set, applies error styles to the checkbox when `error` prop is
    set @,default,True.

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:
#### CheckboxGroup

- children (a list of or a singular dash component, string or number; required):
    `Checkbox` components and any other elements.

- 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.

- 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.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute, prevents interactions.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

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

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelElement (a value equal to: 'label', 'div'; optional):
    `Input.Label` root element, `'label'` by default.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- 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:

- maxSelectedValues (number; optional):
    Maximum number of checkboxes that can be selected. When the limit
    is reached, unselected checkboxes will be disabled.

- 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.

- 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.

- readOnly (boolean; optional):
    If set, value cannot be changed.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- size (optional):
    Controls size of the `Input.Wrapper`, `'sm'` by default.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (list of strings; optional):
    Controlled component value.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element (`Input.Wrapper` component).
#### CheckboxIndicator

- 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 icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- checked (boolean; optional):
    State of check box.

- 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 to set input
    background color in checked state, `theme.primaryColor` by
    default.

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

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

- disabled (boolean; optional):
    Whether component is disabled.

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

- icon (a list of or a singular dash component, string or number; optional):
    Icon.

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- indeterminate (boolean; optional):
    Indeterminate state of the checkbox. If set, `checked` prop is
    ignored.

- indeterminateIcon (a list of or a singular dash component, string or number; optional):
    Indeterminate icon.

- 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.

- 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,` `theme.defaultRadius` by default.

- size (optional):
    Controls size of the component, `'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.

- variant (string; optional):
    variant.

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

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.
#### CheckboxCard

- children (a list of or a singular dash component, string or number; optional):
    CheckboxCard content.

- 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.

- checked (boolean; optional):
    State of check box.

- 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.

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

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

- defaultChecked (boolean; optional):
    Uncontrolled component default value.

- disabled (boolean; optional):
    Determines whether CheckboxCard is disabled and non-selectable.

- 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.

- 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,` `theme.defaultRadius` 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.

- value (string; optional):
    To be used with checkbox group.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether the card should have border, `True` by default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## Chip  
Use Chip to pick one or multiple values with inline controls  
Category: Inputs  

### Introduction

### Simple Usage

For a stand-alone `Chip`, use the `checked` property in callbacks.

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


component = dmc.Box(
    [
        dmc.Chip("Awesome chip", checked=True, id="chip-state"),
        dmc.Text(id="chip-container"),
    ],
    p=20,
)


@callback(Output("chip-container", "children"), Input("chip-state", "checked"))
def checkbox(checked):
    return f"The chip is selected: {checked}"
```
### Change Checked Icon

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Chip(
    "Forbidden",
    icon=DashIconify(icon="bi-x-circle"),
    color="red",
    checked=True,
    m="sm",
)
```
### States

### Chip with Tooltip

```python
import dash_mantine_components as dmc

component = dmc.Tooltip(
    label="chip tooltip",
    children=dmc.Chip("chip with tooltip", checked=True),
)
```
### ChipGroups like Radio Button

In this example, only a single chip can be selected, similar to a radio button. 

> Note:  The  `ChipGroup` `value` property type must be a string when `multiple=False`.

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

component = dmc.Box(
    [
        dmc.Group(
            dmc.ChipGroup(
                [
                    dmc.Chip("Single chip", value="a"),
                    dmc.Chip("Can be selected", value="b"),
                    dmc.Chip("At a time", value="c"),
                ],
                multiple=False,
                value="a",
                id="chipgroup-single",
            ),
            justify="center",
        ),
        dmc.Text(id="chipgroup-single-container", ta="center"),
    ]
)


@callback(
    Output("chipgroup-single-container", "children"), Input("chipgroup-single", "value")
)
def checkbox(value):
    return f"You selected chip: {value}"
```
### ChipGroups like Checklist

In this example,  multiple chips can be selected, similar to a checklist.  Set `multiple=True`

> Note: The  `ChipGroup` `value` property type must be a list of strings when `multiple=True`.

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

component = dmc.Box(
    [
        dmc.Group(
            dmc.ChipGroup(
                [
                    dmc.Chip("Multiple chips", value="a"),
                    dmc.Chip("Can be selected", value="b"),
                    dmc.Chip("At a time", value="c"),
                ],
                multiple=True,
                value=["a", "b"],
                id="chipgroup-multi",
            ),
            justify="center",
        ),
        dmc.Text(id="chipgroup-multi-container", ta="center"),
    ]
)


@callback(
    Output("chipgroup-multi-container", "children"), Input("chipgroup-multi", "value")
)
def checkbox(value):
    return f"Selected chips: {value}"
```
### Deselect radio chip

To enable deselecting a radio chip, set `deselectable=True`


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

component = dmc.Box(
    [
        dmc.Group(
            dmc.ChipGroup(
                [
                    dmc.Chip("Single chip", value="a"),
                    dmc.Chip("Can be selected", value="b"),
                    dmc.Chip("At a time", value="c"),
                ],
                multiple=False,
                value="a",
                deselectable=True,
                id="chipgroup-deselect",
            ),
            justify="center",
        ),
        dmc.Text(id="chipgroup-deselect-container", ta="center"),
    ]
)


@callback(
    Output("chipgroup-deselect-container", "children"), Input("chipgroup-deselect", "value")
)
def checkbox(value):
    return f"You selected chip: {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.


#### Chip Selectors

| Selector    | Static selector              | Description                               |
|-------------|------------------------------|-------------------------------------------|
| root        | .mantine-Chip-root            | Root element                              |
| checkIcon   | .mantine-Chip-checkIcon       | Check icon, visible when `checked` prop is true |
| iconWrapper | .mantine-Chip-iconWrapper     | Wraps `checkIcon` for alignment           |
| input       | .mantine-Chip-input           | Input element, hidden by default          |
| label       | .mantine-Chip-label           | Input label, used as the chip body        |

#### Chip CSS Variables

| Selector | Variable                  | Description                                          |
|----------|---------------------------|------------------------------------------------------|
| root     | --chip-fz                  | Controls font-size                                   |
|          | --chip-size                | Controls height                                      |
|          | --chip-icon-size           | Controls width and height of the icon                |
|          | --chip-padding             | Controls horizontal padding when chip is not checked |
|          | --chip-checked-padding     | Controls horizontal padding when chip is checked     |
|          | --chip-radius              | Controls border-radius                               |
|          | --chip-bg                  | Controls background-color when chip is checked       |
|          | --chip-hover               | Controls background-color when chip is checked and hovered |
|          | --chip-color               | Controls color when chip is checked                  |
|          | --chip-bd                  | Controls border when chip is checked                 |
|          | --chip-spacing             | Controls spacing between check icon and label        |

#### Chip Data Attributes

| Selector | Attribute      | Condition                |
|----------|----------------|--------------------------|
| label    | data-checked    | Chip is checked          |
| label    | data-disabled   | `disabled` prop is set   |




### Keyword Arguments
#### Chip

- children (a list of or a singular dash component, string or number; required):
    `label` element associated with the input.

- id (string; optional):
    Static id to connect input with the label, by default `id` is
    randomly generated.

- 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 button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- checked (boolean; optional):
    Checked state for controlled component.

- 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):
    Controls components colors based on `variant` prop. Key of
    `theme.colors` or any valid CSS color. `theme.primaryColor` by
    default.

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

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

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

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

- icon (a list of or a singular dash component, string or number; optional):
    Any element or component to replace default icon.

- 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.

- 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`, `'xl'` by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls various properties related to component size, `'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.

- type (a value equal to: 'radio', 'checkbox'; optional):
    Chip input type, `'checkbox'` by default.

- value (string; optional):
    To be used with chip group.

- variant (string; optional):
    variant.

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

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:
#### ChipGroup

- children (a list of or a singular dash component, string or number; optional):
    `Chip` components and any other elements.

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

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

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

- deselectable (boolean; optional):
    Allow to deselect Chip in Radio mode.

- 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:

- multiple (boolean; optional):
    Determines whether it is allowed to select multiple values,
    `False` 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.

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

- value (string | list of strings; optional):
    When using multiple=True, value must be a list.

## ColorInput  
Capture color inputs from user.  
Category: Inputs  

### Simple Example

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

component = html.Div(
    [
        dmc.ColorInput(id="color-input", label="Your favorite color", w=250),
        dmc.Space(h=10),
        dmc.Text(id="selected-color-input"),
    ]
)


@callback(Output("selected-color-input", "children"), Input("color-input", "value"))
def pick(color):
    return f"You selected: {color}"
```
### Formats
Component supports hex, hexa, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for hexa, rgba and hsla formats.

### Disable free input
To disable free input set disallowInput prop.

```python
import dash_mantine_components as dmc


component = dmc.ColorInput(
    disallowInput=True, label="Your favorite color", value="#e05e5e", w=250
)
```
### With swatches
With swatches
You can add any amount of predefined color swatches.  By default, there will be 10 swatches per row, you can change this with `swatchesPerRow` prop, like in ColorPicker component.

```python
import dash_mantine_components as dmc

component = dmc.ColorInput(
    label="Your favorite color",
    value="#e05e5e",
    w=250,
    format="hex",
    swatches=[
        "#25262b",
        "#868e96",
        "#fa5252",
        "#e64980",
        "#be4bdb",
        "#7950f2",
        "#4c6ef5",
        "#228be6",
        "#15aabf",
        "#12b886",
        "#40c057",
        "#82c91e",
        "#fab005",
        "#fd7e14",
    ],
)
```
If you need to restrict color picking to certain colors – disable color picker and disallow free input:

```python
import dash_mantine_components as dmc

colors = dmc.DEFAULT_THEME["colors"]

component = dmc.ColorInput(
    label="Your favorite color",
    value="#40c057",
    disallowInput=True,
    w=250,
    withPicker=False,
    swatches=colors["red"] + colors["green"],
)
```
### Remove or replace preview
By default, color preview will be rendered on the left side of the input, you can remove it using `withPreview=False` or replace with an icon.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack(
    [
        dmc.ColorInput(
            label="Without preview",
            withPreview=False,
            value="#40c057",
            w=250,
        ),
        dmc.ColorInput(
            label="With icon",
            leftSection=DashIconify(icon="cil:paint"),
            withPreview=False,
            w=250,
            value="#40c057",
        ),
    ]
)
```
### Eye dropper
Set `withEyeDropper` prop to display eye dropper icon in the right section. This feature depends on `EyeDropper` API, the eye dropper will not be rendered if the API is not supported.

```python
import dash_mantine_components as dmc


component = dmc.ColorInput(
    withEyeDropper=True, label="Pick any color from the page", w=250
)
```
### Input props

### Loading state

Set `loading` prop to display a loading indicator. By default, the loader is displayed on the right side of the input.
You can change the position with the `loadingPosition` prop to 'left' or 'right'.

```python
import dash_mantine_components as dmc


component = dmc.ColorInput(
    loading=True, label="Pick a color", w=250
)
```
### Accessibility
#### Color picker focus
Color picker is not focusable, users without mouse access can select color only by entering it into input manually. If you want to make component accessible do not disable free input.

#### aria-label
Provide `aria-labe`l in case you use component without label for screen reader support:

```python
import dash_mantine_components as dmc

dmc.ColorInput(value="#ffffff")  # not ok, input is not labeled
dmc.ColorInput(label="Pick color") # ok, input and label is connected
dmc.ColorInput(**{"aria-label": "My input"}) # ok, label is not visible but will be announced by screen readers
```

### StylesAPI


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                                                         |
|:------------------|:--------------------------------------|:--------------------------------------------------------------------|
| wrapper           | .mantine-ColorInput-wrapper           | Root element                                                        |
| input             | .mantine-ColorInput-input             | Input element                                                       |
| section           | .mantine-ColorInput-section           | Left and right sections                                             |
| root              | .mantine-ColorInput-root              | Root element                                                        |
| label             | .mantine-ColorInput-label             | Label element                                                       |
| required          | .mantine-ColorInput-required          | Required asterisk element, rendered inside label                    |
| description       | .mantine-ColorInput-description       | Description element                                                 |
| error             | .mantine-ColorInput-error             | Error element                                                       |
| preview           | .mantine-ColorInput-preview           | Color preview, displayed only when `format` supports alpha channel  |
| body              | .mantine-ColorInput-body              | Contains alpha/hue sliders and color preview                        |
| slider            | .mantine-ColorInput-slider            | Alpha and hue sliders root                                          |
| sliderOverlay     | .mantine-ColorInput-sliderOverlay     | Element used to display various overlays over hue and alpha sliders |
| saturation        | .mantine-ColorInput-saturation        | Saturation picker                                                   |
| saturationOverlay | .mantine-ColorInput-saturationOverlay | Element used to display various overlays over saturation picker     |
| sliders           | .mantine-ColorInput-sliders           | Contains alpha and hue sliders                                      |
| thumb             | .mantine-ColorInput-thumb             | Thumb of all sliders                                                |
| swatch            | .mantine-ColorInput-swatch            | Color swatch                                                        |
| swatches          | .mantine-ColorInput-swatches          | Color swatches list                                                 |
| dropdown          | .mantine-ColorInput-dropdown          | Popover dropdown                                                    |
| colorPreview      | .mantine-ColorInput-colorPreview      | Color swatch preview in input left section                          |
| eyeDropperButton  | .mantine-ColorInput-eyeDropperButton  | Eye dropper button                                                  |
| eyeDropperIcon    | .mantine-ColorInput-eyeDropperIcon    | Default eye dropper icon                                            |


### Keyword Arguments
#### ColorInput

- 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.

- 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.

- closeOnColorSwatchClick (boolean; optional):
    Determines whether the dropdown should be closed when one of the
    color swatches is clicked, `False` by default.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- disallowInput (boolean; optional):
    If input is not allowed, the user can only pick value with color
    picker and swatches, `False` by default.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- eyeDropperButtonProps (dict; optional):
    Props passed down to the eye dropper button.

    `eyeDropperButtonProps` is a dict with keys:

- eyeDropperIcon (a list of or a singular dash component, string or number; optional):
    An icon to replace the default eye dropper icon.

- fixOnBlur (boolean; optional):
    Determines whether the input value should be reset to the last
    known valid value when the input loses focus, `True` by default.

- format (a value equal to: 'hex', 'hexa', 'rgba', 'rgb', 'hsl', 'hsla'; optional):
    Color format, `'hex'` by default.

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

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

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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 prop.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- popoverProps (dict; optional):
    Props passed down to the `Popover` component.

    `popoverProps` is a dict with keys:

- 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):
    Readonly.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

- swatches (list of strings; optional):
    An array of colors in one of the supported formats. Used to render
    swatches list below the color picker.

- swatchesPerRow (number; optional):
    Number of swatches per row, `7` by default.

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

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

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withEyeDropper (boolean; optional):
    Determines whether eye dropper button should be displayed in the
    right section, `True` by default.

- withPicker (boolean; optional):
    Determines whether the color picker should be displayed, `True` by
    default.

- withPreview (boolean; optional):
    Determines whether the preview color swatch should be displayed in
    the left section of the input, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## ColorPicker  
Use Colorpicker for color inputs in various formats such as hex, rgb, hsl etc.  
Category: Inputs  

### Simple Example

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

component = html.Div(
    [
        dmc.ColorPicker(id="color-picker", format="rgba", value="rgba(41, 96, 214, 1)"),
        dmc.Space(h=10),
        dmc.Text(id="selected-color"),
    ]
)


@callback(Output("selected-color", "children"), Input("color-picker", "value"))
def pick(color):
    return color
```
### Color Format

Component supports hex, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for rgba
and hsla formats.

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

component = html.Div(
    [
        dmc.Group(
            justify="space-between",
            children=[
                dmc.ColorPicker(id="colorpicker-format", format="hex", value="#343353"),
                dmc.Select(
                    id="format-select",
                    data=[
                        {"label": fmt.upper(), "value": fmt}
                        for fmt in ["hex", "hexa", "rgb", "rgba", "hsl", "hsla"]
                    ],
                    value="hex",
                ),
            ],
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-color-format"),
    ]
)


@callback(Output("colorpicker-format", "format"), Input("format-select", "value"))
def pick_format(value):
    return value


@callback(
    Output("selected-color-format", "children"), Input("colorpicker-format", "value")
)
def pick_color(color):
    return color
```
### With Swatches

You can add any number of predefined swatches and also set the number of swatches per row.

```python
import dash_mantine_components as dmc

# fmt: off
swatches = [
    "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5",
    "#228be6", "#15aabf", "#12b886", "#40c057", "#82c91e", "#fab005", "#fd7e14"
]
# fmt: on

component = dmc.Group(
    gap=40,
    children=[
        dmc.ColorPicker(swatches=swatches),
        dmc.ColorPicker(swatches=swatches, swatchesPerRow=9),
    ],
)
```
### Without Picker

To display just the swatches and no picker, initialize the component with `withPicker=False`.

```python
import dash_mantine_components as dmc

# fmt: off
swatches = [
    "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5",
    "#228be6", "#15aabf", "#12b886", "#40c057", "#82c91e", "#fab005", "#fd7e14"
]
# fmt: on

component = dmc.ColorPicker(swatches=swatches, swatchesPerRow=7, withPicker=False)
```
### 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                                                         |
|:------------------|:---------------------------------------|:--------------------------------------------------------------------|
| wrapper           | .mantine-ColorPicker-wrapper           | Root element                                                        |
| preview           | .mantine-ColorPicker-preview           | Color preview, displayed only when `format` supports alpha channel  |
| body              | .mantine-ColorPicker-body              | Contains alpha/hue sliders and color preview                        |
| slider            | .mantine-ColorPicker-slider            | Alpha and hue sliders root                                          |
| sliderOverlay     | .mantine-ColorPicker-sliderOverlay     | Element used to display various overlays over hue and alpha sliders |
| saturation        | .mantine-ColorPicker-saturation        | Saturation picker                                                   |
| saturationOverlay | .mantine-ColorPicker-saturationOverlay | Element used to display various overlays over saturation picker     |
| sliders           | .mantine-ColorPicker-sliders           | Contains alpha and hue sliders                                      |
| thumb             | .mantine-ColorPicker-thumb             | Thumb of all sliders                                                |
| swatch            | .mantine-ColorPicker-swatch            | Color swatch                                                        |
| swatches          | .mantine-ColorPicker-swatches          | Color swatches list                                                 |


### Keyword Arguments
#### ColorPicker

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

- alphaLabel (string; optional):
    Alpha slider `aria-label` prop.

- 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.

- 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.

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

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

- focusable (boolean; optional):
    Determines whether interactive elements (sliders thumbs and
    swatches) should be focusable, `True` by default.

- format (a value equal to: 'hex', 'hexa', 'rgba', 'rgb', 'hsl', 'hsla'; optional):
    Color format, `'hex'` by default.

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

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

- hiddenInputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the hidden input component.

- hueLabel (string; optional):
    Hue slider `aria-label` prop.

- 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):
    Hidden input `name` attribute, if not set, the input will not be
    rendered.

- 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.

- saturationLabel (string; optional):
    Saturation slider `aria-label` prop.

- size (optional):
    Controls size of hue, alpha and saturation sliders, `'md'` by
    default.

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

- swatches (list of strings; optional):
    An array of colors in one of the supported formats. Used to render
    swatches list below the color picker.

- swatchesPerRow (number; optional):
    Number of swatches per row, `7` by default.

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

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

- variant (string; optional):
    variant.

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

- withPicker (boolean; optional):
    Determines whether the color picker should be displayed, `True` by
    default.

## Fieldset  
Group related elements in a form.  
Category: Inputs  

### Introduction

### Disabled State

Set `disabled` prop to disable all inputs and buttons inside the fieldset:

```python
import dash_mantine_components as dmc

component = dmc.Fieldset(
    children=[
        dmc.TextInput(label="Your name", placeholder="Your name"),
        dmc.TextInput(label="Email", placeholder="Email"),
        dmc.Group([dmc.Button("Send")], justify="flex-end"),
    ],
    legend="Personal information",
    disabled=True,
)
```
### 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.


#### Fieldset selectors

| Selector | Static selector            | Description      |
| -------- | -------------------------- | ---------------- |
| `root`   | `.mantine-Fieldset-root`    | Root element     |
| `legend` | `.mantine-Fieldset-legend`  | Legend element   |

#### Fieldset CSS variables

| Selector | Variable           | Description               |
| -------- | ------------------ | ------------------------- |
| `root`   | `--fieldset-radius` | Controls border-radius     |


### Keyword Arguments
#### TextInput

- children (a list of or a singular dash component, string or number; optional)

- 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.

- 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.

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

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

- disabled (boolean; optional):
    disables all inputs and buttons inside the fieldset:.

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

- legend (a list of or a singular dash component, string or number; optional):
    Fieldset legend.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` 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.

- variant (string; optional):
    variant.

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

## InputWrapper  
Use InputWrapper to add label, description and error fields to custom inputs.  
Category: Inputs  

The `InputWrapper` component is built into all Dash Mantine input components, such as `TextInput`, `NumberInput`,
`Select`, `Chip`, and `Textarea`(and more!) **You do not need to wrap these components with `InputWrapper` as it’s already included.**  

Use `InputWrapper` when working with input components from other libraries, like `dash-core-components`, to ensure 
consistent styling of input components in your app.  

### Usage


### Custom TreeInput component

Here is an example of adding an `InputWapper` to the `Tree` component.

```python
import dash_mantine_components as dmc

from dash import Input, Output, callback


component =  dmc.InputWrapper(
    id="tree-wrapper",
    label="Tree input",
    description="This is a tree input",
    inputWrapperOrder=["label", "description", "error", "input"],
    withAsterisk=True,
    children=[
        dmc.Tree(
            id="tree",
            checkboxes=True,
            data=[
                {
                    "label": "root",
                    "value": "value",
                    "children": [
                        {"label": "child 1", "value": "child_1"},
                        {"label": "child 2", "value": "child_2"},
                    ],
                }
            ],
        )
    ],
)

@callback(
    Output("tree-wrapper", "error"),
    Input("tree", "checked"),
)
def validate(checked):
    tree_error = "Select at least one" if not checked else None
    return tree_error
```
###  Avoid Unnecessary `InputWrapper` Usage  

Most Mantine input components already include the `InputWrapper` internally, so you **should not** wrap them with `InputWrapper` yourself.  

Instead, check the reference section for built-in props like `label`, `description`, and `error`, and use these props directly.

**✅ Correct Usage: Use Component Props**
```python
dmc.Select(
    label="My label",
    description="My description"
)
```  

**❌ Incorrect Usage: Avoid Wrapping with `InputWrapper`**
```python
# don't do this
dmc.InputWrapper(
    label="My label",
    description="My description",
    children=dmc.Select(...)  
)
```  

### Accessibility

Note that DMC input components with built-in `InputWrapper` are more accessible. For example, their labels
are properly linked to inputs, making them screen-reader friendly and allowing users to focus the input by clicking
the label. This behavior does not apply when manually using `InputWrapper`.

It's possible to use the [htmlFor](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) prop to
link the `InputWrapper` `label` prop to the input in the `children` prop .  However, it works only in certain components
that are accessible.  

```python
from dash import dcc
import dash_mantine_components as dmc
# this is accessible  (but better to use a dmc input component instead)
dmc.InputWrapper(
    label="my-input",
    htmlFor="dcc-input",
    children=dcc.Input(id="dcc-input")
)

# the dcc.Dropdown is not accessible
dmc.InputWrapper(
    label="my-input",
    htmlFor="dcc-dropdown",
    children=dcc.Dropdown(id="dcc-dropdown")
)


```


### 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.


#### Input Selectors

| Selector  | Static selector            | Description                    |
|-----------|---------------------------|--------------------------------|
| wrapper   | .mantine-Input-wrapper     | Root element of the Input      |
| input     | .mantine-Input-input       | Input element                  |
| section   | .mantine-Input-section     | Left and right sections        |

#### Input CSS Variables

| Selector | Variable                              | Description |
|----------|--------------------------------------|-------------|
| wrapper  | --input-fz                           | Font size of the input element |
|          | --input-height                       | Height or min-height of the input element (depends on multiline prop) |
|          | --input-left-section-width           | Width of the left section |
|          | --input-right-section-width          | Width of the right section |
|          | --input-margin-bottom                | Margin-bottom of the input element, usually controlled by Input.Wrapper |
|          | --input-margin-top                   | Margin-top of the input element, usually controlled by Input.Wrapper |
|          | --input-padding-y                    | Padding-top and padding-bottom of the input element |
|          | --input-radius                       | Border-radius of the input element |
|          | --input-left-section-pointer-events  | Controls pointer-events of the left section |
|          | --input-right-section-pointer-events | Controls pointer-events of the right section |

#### Input Data Attributes

| Selector       | Attribute               | Condition                           | Value  |
|---------------|-------------------------|-------------------------------------|--------|
| wrapper, input | data-error              | error prop is set                  | –      |
| input         | data-disabled            | disabled prop is set               | –      |
| wrapper       | data-with-right-section  | rightSection prop is set           | –      |
| wrapper       | data-with-left-section   | leftSection prop is set            | –      |
| wrapper       | data-multiline           | multiline prop is set              | –      |
| wrapper       | data-pointer             | pointer prop is set                | –      |
| section       | data-position            | –                                   | Section position: left or right |

#### InputWrapper Selectors

| Selector  | Static selector               | Description                                         |
|-----------|--------------------------------|-----------------------------------------------------|
| root      | .mantine-InputWrapper-root     | Root element                                       |
| label     | .mantine-InputWrapper-label    | Label element                                      |
| required  | .mantine-InputWrapper-required | Required asterisk element, rendered inside label   |
| description | .mantine-InputWrapper-description | Description element                              |
| error     | .mantine-InputWrapper-error    | Error element                                      |

#### InputWrapper CSS Variables

| Selector    | Variable                   | Description                           |
|------------|----------------------------|---------------------------------------|
| label      | --input-label-size         | Controls label font-size              |
|            | --input-asterisk-color     | Controls label asterisk text color    |
| error      | --input-error-size         | Controls error font-size              |
| description | --input-description-size  | Controls description font-size        |



### Keyword Arguments
#### InputWrapper

- children (a list of or a singular dash component, string or number; optional):
    Input wrapper content.

- 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.

- 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.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

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

- htmlFor (string; optional):
    Id of associated input.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelElement (a value equal to: 'label', 'div'; optional):
    `Input.Label` root element, `'label'` by default.

- labelProps (dict; optional):
    Props passed down to the `Input.Label` component.

    `labelProps` is a dict with keys:

- 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.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- size (optional):
    Controls size of `Input.Label`, `Input.Description` and
    `Input.Error` components.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

## Inputs Overview  
This guide gives an overview of Input components available in Dash Mantine components.  
Category: Inputs  

### Introduction to Mantine Inputs

Mantine Input components use a common base Input component giving all the inputs shared styles and features.  This helps
give your app a consistent design.

### Use props to add labels and more

Input components are made up of nested elements, so you can add things like labels, description, error message, icons and more with just a prop.
Here is an example of the TextInput component:


### Accessibility
All Mantine components, including inputs, are built with accessibility in mind, adhering to WAI-ARIA standards.
They provide features such as proper roles, ARIA attributes, semantic HTML, and full keyboard support out of the box,
simplifying the process of creating inclusive web apps.

### Checkbox


### Chip


### ColorInput

### ColorPicker


### Fieldset


### InputWrapper

Use [InputWrapper](/components/inputwrapper) to add label, description and error fields to custom inputs.

### JsonInput
[JsonInput](/components/jsoninput) is based on `Textarea` component, it includes json validation logic and option to format input value on blur.


### NumberInput


### PasswordInput

### PinInput


### RadioGroup


### Rating


### RichTextEditor


### SegmentedControl

### Slider

### RangeSlider


### Switch


:code: false

### TextInput


### TextArea


### Dropdown (Select) components

See the Combobox section

- [Select](/comonents/select): Single selection from a predefined list.
- [MultiSelect](components/multiselect): Multiple selections from a predefined list.
- [Autocomplete](components/autocomplete): Free text input with suggestions.
- [TagsInput](components/tagsinput): Multiple value entry (tags) with free input and suggestions. 


### Date and Time components

See the Date Picker section

## JsonInput  
JsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur.  
Category: Inputs  

### Simple Example

JsonInput is based on [Textarea](/components/textarea) component, it includes json validation logic and option to format input value on blur.

```python
import dash_mantine_components as dmc

component = dmc.JsonInput(
    label="Your package.json",
    placeholder="Textarea will autosize to fit the content",
    validationError="Invalid JSON",
    formatOnBlur=True,
    autosize=True,
    minRows=4,
)
```
### 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                                      |
|:------------|:-------------------------------|:-------------------------------------------------|
| wrapper     | .mantine-JsonInput-wrapper     | Root element of the Input                        |
| input       | .mantine-JsonInput-input       | Input element                                    |
| section     | .mantine-JsonInput-section     | Left and right sections                          |
| root        | .mantine-JsonInput-root        | Root element                                     |
| label       | .mantine-JsonInput-label       | Label element                                    |
| required    | .mantine-JsonInput-required    | Required asterisk element, rendered inside label |
| description | .mantine-JsonInput-description | Description element                              |
| error       | .mantine-JsonInput-error       | Error element                                    |


### Keyword Arguments
#### JsonInput

- 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.

- autoComplete (string; default 'off'):
    (string; default "off") Enables the browser to attempt
    autocompletion based on user history.  For more information, see:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.

- autosize (boolean; optional):
    Determines whether the textarea height should grow with its
    content, `False` by default.

- bottomSection (a list of or a singular dash component, string or number; optional):
    Content rendered at the bottom of the input, inside the border.

- bottomSectionProps (dict; optional):
    Props passed down to the `bottomSection` element.

- 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.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- formatOnBlur (boolean; optional):
    Determines whether the value should be formatted on blur, `False`
    by default.

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

- indentSpaces (number; optional):
    Number of spaces to use as white space for formatting. Passed as
    the third argument to `serialize` function. @,default,2.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxRows (number; optional):
    Maximum rows for autosize textarea to grow, ignored if `autosize`
    prop is not set.

- minRows (number; optional):
    Minimum rows of autosize textarea, ignored if `autosize` prop is
    not set.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- resize (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'block', 'inline', 'both', 'horizontal', 'vertical'; optional):
    Controls `resize` CSS property, `'none'` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- validationError (a list of or a singular dash component, string or number; optional):
    Error message displayed when value is not valid JSON.

- value (string; default ''):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## NumberInput  
Use NumberInput to provide a field for entering numbers in your app with ability to set min, max and step.  
Category: Inputs  

### Introduction

### Value Type

The `value` prop in `NumberInput` can be either a string or a number. Generally, if the `value` can be represented as 
a number (e.g., 55, 1.28, -100), it will be treated as a number. However, there are specific cases where the value 
cannot be represented as a number and is instead treated as a string:

 - Empty State: An empty state is represented as an empty string (`''`). **To clear the value in a callback, use `''` instead of `None`.**
- Exceeding Safe Integer Limits: If the number is larger than [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) 
or smaller than [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER),
it will be represented as a string (e.g., '90071992547409910').
- Multiple Zeros: Numbers that consist only of zeros or have trailing zeros are represented as strings (e.g., '0.', '0.0', '-0.00', etc.).


### Loading state

Set `loading` prop to display a loading indicator. By default, the loader is displayed on the right side of the input.
You can change the position with the `loadingPosition` prop to 'left' or 'right'.

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    placeholder="Age",
    loading=True,
    w=300,
)
```
### min and max

Set `min` and `max` props to limit the input value:


```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    label="Enter value between 10 and 20",
    min=10,
    max=20,
    w=250,
)
```
### Clamp behavior
By default, the `value` is clamped when the input is blurred. If you set `clampBehavior="strict"`, it will not be
possible to enter value outside of min/max range. Note that this option may cause issues if you have tight
`min` and `max`, for example `min=10` and `max=20`. If you need to disable value clamping entirely, set `clampBehavior="none"`.

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    label="You cannot enter number less than 0 or greater than 100",
    placeholder="You cannot enter number less than 0 or greater than 100",
    clampBehavior="strict",
    min=0,
    max=100,
    w=450,
)
```
### Select all on focus
Set `selectAllOnFocus` to automatically select the entire input value when the field receives focus. This is useful when 
you expect users to replace the value rather than edit it:

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(value=123456, selectAllOnFocus=True)
```
### Prefix and suffix
Set `prefix` and `suffix` props to add given string to the start or end of the input value:


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.NumberInput(
        label="With prefix",
        placeholder="Dollars",
        prefix="$",
        value=100,
        w=250,
        mb="md"
    ),
    dmc.NumberInput(
        label="With suffix",
        placeholder="Percent",
        suffix="%",
        value=100,
        w=250,
        mt="md"
    ),
])
```
### Negative numbers
By default, negative numbers are allowed. Set `allowNegative=False` to allow only positive numbers.

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    label="Negative numbers are not allowed",
    placeholder="Do not enter negative numbers",
    allowNegative=False,
    w=300,
)
```
### Decimal numbers
By default, decimal numbers are allowed. Set `allowDecimal=False` to allow only integers.

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    label="Decimal numbers are not allowed",
    placeholder="Do not enter decimal numbers",
    allowDecimal=False,
    w=250,
)
```
### Decimal scale
`decimalScale` controls how many decimal places are allowed:

```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.NumberInput(
        label="You can enter only 2 digits after decimal point",
        placeholder="Do not enter more than 2 decimals",
        decimalScale=2,
        w=250,
        mb="md"
    ),
    dmc.NumberInput(
        label="Number input with decimal steps",
        value=0.05,
        decimalScale=2,
        min=-1,
        step=0.05,
        max=1,
        w=250,
        mt="md"
    )
])
```
### Fixed decimal scale
Set `fixedDecimalScale=True` to always display fixed number of decimal places:


```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    label="Always show 2 digits after decimal point",
    placeholder="Do not enter more than 2",
    decimalScale=2,
    fixedDecimalScale=True,
    value=2.2,
    w=250,
)
```
### Decimal separator
Set `decimalSeparator` to change decimal separator character:

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    label="Custom decimal separator",
    decimalSeparator=",",
    value=20.234,
    w=250,
)
```
### Thousand separator
Set `thousandSeparator` prop to separate thousands with a character. You can control
grouping logic with `thousandsGroupStyle`, it accepts: `thousand`, `lakh`, `wan`, `none` values.

```python
import dash_mantine_components as dmc

component = dmc.Stack([

    dmc.NumberInput(
        label="Thousands are separated with a comma",
        placeholder="Thousands are separated with a comma",
        thousandSeparator=",",
        value=1_000_000,
        w=400
    ),

    dmc.NumberInput(
        label="Thousands are separated with a space",
        placeholder="Thousands are separated with a space",
        thousandSeparator=" ",
        value=1_000_000,
        mt="md",
        w=400
    )
])
```
### Left and right sections

You can use DashIconify to add icon to the NumberInput.

`NumberInput` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position 
inside the input wrapper. You can use them to display icons, input controls or any other elements.

You can use the following props to control sections styles and content:

- `rightSection/leftSection` – components to render on the corresponding side of input
- `rightSectionWidth/leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.
- `rightSectionPointerEvents/leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Stack([
    dmc.NumberInput(
        label="With left section",
        description="From 0 to infinity, in steps of 5",
        value=5,
        min=0,
        step=5,
        leftSection=DashIconify(icon="fa6-solid:weight-scale"),
        w=250,
    ),
    dmc.NumberInput(
        label="With right section",
        description="From 0 to infinity, in steps of 5",
        value=5,
        min=0,
        step=5,
        rightSection=DashIconify(icon="fa6-solid:weight-scale"),
        w=250,
    )
])
```
### Increment/decrement on hold

Set `stepHoldDelay` and `stepHoldInterval` props to define behavior when increment/decrement controls are clicked and 
held.

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(
    label="Step on hold",
    description="Step the value when clicking and holding the arrows",
    stepHoldDelay=500,
    stepHoldInterval=100,
    value=0,
    w=250,
)
```
### Remove controls

Controls are not rendered in these cases:

- `hideControls` prop is set to `True`
- Input is disabled
- `variant` prop is set to "unstyled"

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.NumberInput(label="By default controls are visible", w=250),
        dmc.NumberInput(
            label="Hide controls", hideControls=True, w=250
        ),
        dmc.NumberInput(
            label="Disabled and hide controls",
            disabled=True,
            hideControls=True,
            w=250,
        ),
    ]
)
```
### Disabled state

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(disabled=True, label="Disabled input", placeholder="Disabled input", p="lg"),
```
### 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.


#### NumberInput Selectors

| Selector    | Static selector                | Description                                      |
|-------------|--------------------------------|--------------------------------------------------|
| wrapper     | .mantine-NumberInput-wrapper   | Root element of the Input                        |
| input       | .mantine-NumberInput-input     | Input element                                    |
| section     | .mantine-NumberInput-section   | Left and right sections                          |
| root        | .mantine-NumberInput-root      | Root element                                     |
| label       | .mantine-NumberInput-label     | Label element                                    |
| required    | .mantine-NumberInput-required  | Required asterisk element, rendered inside label |
| description | .mantine-NumberInput-description | Description element                              |
| error       | .mantine-NumberInput-error     | Error element                                    |
| controls    | .mantine-NumberInput-controls  | Increment and decrement buttons wrapper          |
| control     | .mantine-NumberInput-control   | Increment and decrement buttons                  |

#### NumberInput CSS Variables

| Selector  | Variable            | Description                                 |
|-----------|----------------------|---------------------------------------------|
| controls  | --ni-chevron-size    | Controls width and height of the chevron icon |

#### NumberInput Data Attributes

| Selector | Attribute       | Value                               |
|----------|------------------|-------------------------------------|
| control  | data-direction   | "up" or "down" depending on control |



### Keyword Arguments
#### NumberInput

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

- allowDecimal (boolean; optional):
    Determines whether decimal values are allowed, `True` by default.

- allowLeadingZeros (boolean; optional):
    Determines whether leading zeros are allowed. If not set, leading
    zeros are removed when the input is blurred. `False` by default.

- allowNegative (boolean; optional):
    Determines whether negative values are allowed, `True` by default.

- allowedDecimalSeparators (list of strings; optional):
    Characters which when pressed result in a decimal separator,
    `['.']` by default.

- 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.

- autoComplete (string; default 'off'):
    (string; default "off") Enables the browser to attempt
    autocompletion based on user history.  For more information, see:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.

- clampBehavior (a value equal to: 'none', 'strict', 'blur'; optional):
    Controls how value is clamped, `strict` – user is not allowed to
    enter values that are not in `[min, max]` range, `blur` – user is
    allowed to enter any values, but the value is clamped when the
    input loses focus (default behavior), `none` – lifts all
    restrictions, `[min, max]` range is applied only for controls and
    up/down keys.

- 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.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- decimalScale (number; optional):
    Limits the number of digits that can be entered after the decimal
    point.

- decimalSeparator (string; optional):
    Character used as a decimal separator, `'.'` by default.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets disabled attribute on the input element.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- fixedDecimalScale (boolean; optional):
    If set, 0s are added after `decimalSeparator` to match given
    `decimalScale`. `False` by default.

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

- hideControls (boolean; optional):
    Determines whether the up/down controls should be hidden, `False`
    by default.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- max (number; optional):
    Maximum possible value.

- min (number; optional):
    Minimum possible value.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- prefix (string; optional):
    Prefix added before the input value.

- 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):
    Readonly.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- selectAllOnFocus (boolean; optional):
    If set, all text is selected when the input receives focus default
    False.

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

- startValue (number; optional):
    Value set to the input when increment/decrement buttons are
    clicked or up/down arrows pressed if the input is empty, `0` by
    default.

- step (number; optional):
    Number by which value will be incremented/decremented with up/down
    controls and keyboard arrows, `1` by default.

- stepHoldDelay (number; optional):
    Initial delay in milliseconds before stepping the value.

- stepHoldInterval (number; optional):
    Delay before stepping the value. Can be a number of milliseconds
    or a function that receives the current step count and returns the
    delay in milliseconds.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

- suffix (string; optional):
    Suffix added after the input value.

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

- thousandSeparator (string | boolean; optional):
    A character used to separate thousands.

- thousandsGroupStyle (a value equal to: 'none', 'thousand', 'lakh', 'wan'; optional):
    Defines the thousand grouping style.

- type (a value equal to: 'text', 'tel', 'password'; optional):
    Controls input `type` attribute, `'text'` by default.

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

- valueIsNumericString (boolean; optional):
    If value is passed as string representation of numbers
    (unformatted) and number is used in any format props like in
    prefix or suffix in numeric format and format prop in pattern
    format then this should be passed as `True`. `False` by default.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## PasswordInput  
Use PasswordInput to capture password from user with an option to toggle visibility.  
Category: Inputs  

### Introduction

Use PasswordInput when you need to capture password from user. Component provides an option to toggle password 
visibility, if you do not want this feature, use [TextInput](/components/textinput) component with `type='password'`.

### Error State

Use `error` prop to convey an error with an error message and a red border around the input.

Note: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. 
In order to correct this, just add the following css to your app.

```css
input:invalid {
    outline: none !important;
}
```

```python
import dash_mantine_components as dmc


component = dmc.Stack(
    [
        dmc.PasswordInput(
            label="Your password",
            placeholder="Your password",
            w=250,
            error=True,
        ),
        dmc.PasswordInput(
            label="Your password",
            placeholder="Your password",
            w=250,
            error="Invalid Password",
        ),
    ],
)
```
### Success State


```python
import dash_mantine_components as dmc

component = dmc.PasswordInput(
    label="Your password",
    placeholder="Your password",
    w=250,
    success="Valid password",
)
```
### Disabled State

Convey disabled input with `disabled` prop.

```python
import dash_mantine_components as dmc

component = dmc.PasswordInput(
    label="Password",
    placeholder="Your password",
    w=200,
    disabled=True,
)
```
### With Icon

Add icon to the left side of the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.PasswordInput(
    label="Your password:",
    w=250,
    placeholder="Your password",
    leftSection=DashIconify(icon="bi:shield-lock"),
)
```
### Loading state

Set `loading` prop to display a loading indicator. By default, the loader is displayed on the right side of the input.
You can change the position with the `loadingPosition` prop to 'left' or 'right'.

```python
import dash_mantine_components as dmc


component = dmc.PasswordInput(
    label="Your password",
    placeholder="Your password",
    w=250,
    loading=True,
)
```
### Visibility toggle focus
By default, the visibility toggle button is excluded from the tab order (`tabindex="-1"`). This mimics the native browser
password reveal control and keeps the form flow uninterrupted: pressing `Tab` moves focus to the next field rather than 
to the toggle button. The toggle remains operable with a mouse, touch and assistive technologies that navigate by element
rather than by tab order.

If your users expect to reach the toggle with Tab, set the `visibilityToggleFocusable=True` prop. The button then receives
`tabindex="0"` and can be activated with `Enter` or `Space`


### 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                                      |
|:-----------------|:----------------------------------------|:-------------------------------------------------|
| wrapper          | .mantine-PasswordInput-wrapper          | Root element of the Input                        |
| input            | .mantine-PasswordInput-input            | Input element                                    |
| section          | .mantine-PasswordInput-section          | Left and right sections                          |
| root             | .mantine-PasswordInput-root             | Root element                                     |
| label            | .mantine-PasswordInput-label            | Label element                                    |
| required         | .mantine-PasswordInput-required         | Required asterisk element, rendered inside label |
| description      | .mantine-PasswordInput-description      | Description element                              |
| error            | .mantine-PasswordInput-error            | Error element                                    |
| innerInput       | .mantine-PasswordInput-innerInput       | Actual input element                             |
| visibilityToggle | .mantine-PasswordInput-visibilityToggle | Visibility toggle button                         |


### Keyword Arguments
#### PasswordInput

- 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.

- autoComplete (string; default 'off'):
    (string; default "off") Enables the browser to attempt
    autocompletion based on user history.  For more information, see:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.

- 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.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

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

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

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

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (string; default ''):
    Input value for controlled component.

- variant (string; optional):
    variant.

- visibilityToggleButtonProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the visibility toggle button.

- visibilityToggleFocusable (boolean; optional):
    If set, the visibility toggle button is focusable with keyboard
    default `False`.

- visible (boolean; optional):
    Determines whether input content should be visible.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## PinInput  
Capture pin code or one time password from the user.  
Category: Inputs  

### Usage

### Length

Set `length` prop to control number of rendered fields.

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(length=8), justify="center")
```
### Type

By default, PinInput accepts letters and numbers. To allow numbers only, set `type="number"`:

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(type="number"), justify="center")
```
### Placeholder
Set `placeholder` to change placeholder of all fields. Note that it only accepts strings.

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(placeholder="⊡"), justify="center")
```
### Disabled state

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(disabled=True), justify="center")
```
### Error state

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(error=True), justify="center")
```
### Success state

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(success=True), justify="center")
```
### Masked

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(mask=True), justify="center")
```
### One Time Code

Some operating systems expose last received SMS code to be used by applications like your keyboard.
If the current form input asks for this code, your keyboard adapts and proposes the code as keyboard-suggestion.
Prop `oneTimeCode` makes your input setting `autocomplete="one-time-code"` which allows using that feature.

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(oneTimeCode=True), justify="center")
```
### Accessibility

Inputs do not have associated labels, set aria-label to make component visible to screen reader:

```python
import dash_mantine_components as dmc

component = dmc.Group(
    dmc.PinInput(oneTimeCode=True, **{"aria-label": "One Time Code"}), justify="center"
)
```
### 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-PinInput-root     | Root element       |
| pinInput | .mantine-PinInput-pinInput | Input item wrapper |
| input    | .mantine-PinInput-input    | Input element      |


### Keyword Arguments
#### PinInput

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

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

- ariaLabel (string; optional):
    `aria-label` for the inputs.

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

- autoFocus (boolean; optional):
    If set, the first input is focused when component is mounted,
    `False` by default.

- 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.

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

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

- disabled (boolean; optional):
    If set, `disabled` attribute is added to all inputs.

- error (boolean; optional):
    If set, adds error styles and `aria-invalid` attribute to all
    inputs.

- form (string; optional):
    Hidden input `form` attribute.

- gap (string | number; optional):
    Key of `theme.spacing` or any valid CSS value to set `gap` between
    inputs, numbers are converted to rem, `'md'` by default.

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

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- inputMode (a value equal to: 'none', 'text', 'tel', 'email', 'search', 'url', 'numeric', 'decimal'; optional):
    `inputmode` attribute, inferred from the `type` prop if not
    specified.

- inputType (optional):
    Inputs `type` attribute, inferred from the `type` prop if not
    specified.

- length (number; optional):
    Number of inputs, `4` by default.

- 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:

- manageFocus (boolean; optional):
    Determines whether focus should be moved automatically to the next
    input once filled, `True` by default.

- mask (boolean; optional):
    Changes input type to `"password"`, `False` by default.

- 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):
    Hidden input `name` attribute.

- oneTimeCode (boolean; optional):
    Determines whether `autocomplete="one-time-code"` attribute
    should be set on all inputs, `True` 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.

- placeholder (string; optional):
    Inputs placeholder, `'○'` by default.

- 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):
    If set, the user cannot edit the value.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls inputs `width` and `height`, `'sm'` by default.

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

- success (boolean; optional):
    Applies success styles to all inputs.

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

- type (a value equal to: 'number', 'alphanumeric'; optional):
    Determines which values can be entered, `'alphanumeric'` 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`.

## RadioGroup  
RadioGroup component gives user radio inputs to allow only one selection from a small set of options.  
Category: Inputs  

### Simple Usage

Use the `value` prop for callbacks.

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

data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
            id="radiogroup-simple",
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            mb=10,
        ),
        dmc.Text(id="radio-output"),
    ]
)


@callback(Output("radio-output", "children"), Input("radiogroup-simple", "value"))
def choose_framework(value):
    return value
```
### Customizing Radio

Each Radio item in a RadioGroup can be customized. The Radio component is a wrapper for input type radio.  Use Stack or Group to arrange multiple Radio items

### Color

In a `RadioGroup` component, the `color` property can be customized at the individual `Radio` level.

```python
import dash_mantine_components as dmc

data = [
    ["react", "React", "blue"],
    ["ng", "Angular", "orange"],
    ["svelte", "Svelte", "red"],
    ["dash", "Dash", "green"],
]

component = dmc.RadioGroup(
    children=dmc.Stack([dmc.Radio(l, value=k, color=c) for k, l, c in data]),
    value="ng",
    size="sm",
)
```
### Size

You can set the size of all the `Radio` items by using the `size` prop in the `RadioGroup` component.  Use one of xs, sm, md, lg and xl.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group(
                [dmc.Radio(i, value=i) for i in ["USA", "Canada", "France"]], my=10
            ),
            value="USA",
            label="Size Example - small",
            size="sm",
            mt=10,
        ),
        dmc.RadioGroup(
            children=dmc.Group(
                [dmc.Radio(i, value=i) for i in ["USA", "Canada", "France"]], my=10
            ),
            value="USA",
            label="Size Example - large",
            size="lg",
            mt=30,
        ),
    ]
)
```
### Variant


In a `RadioGroup` component, the `variant` property can be customized at the individual `Radio` level.

```python
import dash_mantine_components as dmc


component = dmc.Stack(
    [
        dmc.RadioGroup(
            children=dmc.Group(
                [dmc.Radio(i, value=i, variant="filled") for i in ["USA", "Canada", "France"]],
                my=10,
            ),
            value="USA",
            label="Variant - filled",
        ),
        dmc.RadioGroup(
            children=dmc.Group(
                [dmc.Radio(i, value=i, variant="outline") for i in ["USA", "Canada", "France"]],
                my=10,
            ),
            value="USA",
            label="Variant - outline",
        ),
        dmc.RadioGroup(
            children=dmc.Group(
                [dmc.Radio(i, value=i, variant="light") for i in ["USA", "Canada", "France"]],
                my=10,
            ),
            value="USA",
            label="Variant - light",
        ),
    ]
)
```
### Group or Stack

In a RadioGroup component, the Radio items can be arranged by using the Group or Stack components.

```python
import dash_mantine_components as dmc
from dash import html

data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            my=10,
        ),
        dmc.RadioGroup(
            children=dmc.Stack([dmc.Radio(l, value=k) for k, l in data], my=10),
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            mt=10,
        ),
    ]
)
```
### Deselectable RadioGroup

To enable deselecting a radio chip, set `deselectable=True`

```python
import dash_mantine_components as dmc
from dash import html

data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            my=10,
            deselectable=True
        ),

    ]
)
```
### RadioIndicator component

`RadioIndicator` looks exactly the same as `Radio` component, but it does not have any semantic meaning, it's just a 
visual representation of radio state. You can use it in any place where you need to display radio state without any 
interaction related to the indicator. For example, it is useful in cards based on buttons, trees, etc.

> Note that `RadioIndicator` cannot be focused or selected with keyboard. It is not accessible and should not be used as
a replacement for Radio component.

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.RadioIndicator(),
    dmc.RadioIndicator(checked=True),
    dmc.RadioIndicator(disabled=True),
    dmc.RadioIndicator(disabled=True, checked=True)
])
```
### RadioCard component

RadioCard component can be used as a replacement for `Radio` to build custom cards/buttons/other things that work as
radios. The root element of the component has `role="radio"` attribute, it is accessible by default and supports the
same keyboard interactions as `input[type="radio"]`.


```python
import dash_mantine_components as dmc


component = dmc.RadioCard(
    withBorder=True,
    p="md",
    checked=True,
    children=[
        dmc.Center([
            dmc.RadioIndicator(),
            dmc.Text("RadioCard", size="xl", pl="sm"),
        ], inline=True),
    ]
)
```
### RadioCard with RadioGroup

You can use `RadioCard` with `RadioGroup` the same way as `Radio` component.

Note - do not set the `checked` prop in the `RadioIndicator` component otherwise the `RadioIndicator` will not be updated.
This example also shows how to add hover styles

```python

from dash import  Input, Output, callback
import dash_mantine_components as dmc

def make_radiocard(label, description):
    return dmc.RadioCard(
        withBorder=True,
        p="md",
        mt="md",
        className="checkboxcard-root",
        value=label,
        children=[
            dmc.Group([
                dmc.RadioIndicator(),
                dmc.Box([
                    dmc.Text(label, lh="1.3", fz="md", fw="bold" ),
                    dmc.Text(description, size="sm", c="dimmed"),
                ])
            ], wrap="nowrap", align="flex-start"),
        ]
    )


component = dmc.Box([
    dmc.RadioGroup(
        id="radiocard-group",
        label= "RadioGroup label",
        value="RadioCard 1",
        description="This is a RadioGroup description",
        deselectable=True,
        children=[
            make_radiocard(f"RadioCard {i}", f"RadioCard description {i}")
            for i in range(1, 5)
        ]
    ),
    dmc.Box(id="radio-group-out"),
])


@callback(
    Output("radiocard-group-out", "children"),
    Input("radiocard-group", "value")
)
def update(checked):
   return f"Selected: {checked}"
```

```css
/* used for both CheckboxCard and RadioCard*/
.checkboxcard-root {
    position: relative;
    padding: var(--mantine-spacing-md);
    transition: border-color 150ms ease;

    &[data-checked] {
        border-color: var(--mantine-primary-color-filled);
    }
}

.checkboxcard-root:hover {
    background-color: light-dark(
            var(--mantine-color-gray-0),
            var(--mantine-color-dark-6)
    );
}
```



### 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.


#### Radio Selectors

| Selector       | Static selector              | Description                           |
|---------------|------------------------------|---------------------------------------|
| root          | .mantine-Radio-root          | Root element                         |
| radio         | .mantine-Radio-radio         | Input element (input[type="radio"])  |
| icon          | .mantine-Radio-icon          | Radio icon, used to display checked icon |
| inner         | .mantine-Radio-inner         | Wrapper for icon and input           |
| body          | .mantine-Radio-body          | Input body, contains all other elements |
| labelWrapper  | .mantine-Radio-labelWrapper  | Contains label, description, and error |
| label         | .mantine-Radio-label         | Label element                        |
| description   | .mantine-Radio-description   | Description displayed below the label |
| error         | .mantine-Radio-error         | Error message displayed below the label |

#### Radio CSS Variables

| Selector | Variable           | Description                                |
|----------|-------------------|--------------------------------------------|
| root     | --radio-color     | Controls checked radio background-color   |
|          | --radio-radius    | Controls radio border-radius              |
|          | --radio-size      | Controls radio width and height           |
|          | --radio-icon-color | Controls radio icon color                 |
|          | --radio-icon-size  | Controls radio icon width and height      |

#### Radio Data Attributes

| Selector | Attribute           | Condition         | Value |
|----------|--------------------|------------------|-------|
| radio    | data-error         | `error` prop is set | –     |
| inner    | data-label-position | –                | Value of `labelPosition` prop |

#### RadioGroup Selectors

| Selector    | Static selector               | Description                         |
|------------|------------------------------|-------------------------------------|
| root       | .mantine-RadioGroup-root     | Root element                       |
| label      | .mantine-RadioGroup-label    | Label element                      |
| required   | .mantine-RadioGroup-required | Required asterisk element, rendered inside label |
| description | .mantine-RadioGroup-description | Description element                |
| error      | .mantine-RadioGroup-error    | Error element                      |

#### RadioIndicator Selectors

| Selector   | Static selector                   | Description   |
|------------|----------------------------------|---------------|
| indicator  | .mantine-RadioIndicator-indicator | Root element  |
| icon       | .mantine-RadioIndicator-icon     | Radio icon    |

#### RadioIndicator CSS Variables

| Selector   | Variable           | Description                                |
|------------|-------------------|--------------------------------------------|
| indicator  | --radio-color     | Controls checked radio background-color   |
|            | --radio-radius    | Controls radio border-radius              |
|            | --radio-size      | Controls radio width and height           |
|            | --radio-icon-color | Controls radio icon color                 |
|            | --radio-icon-size  | Controls radio icon width and height      |

#### RadioIndicator Data Attributes

| Selector   | Attribute     | Condition         |
|------------|-------------|------------------|
| indicator  | data-checked | `checked` prop is set |
| indicator  | data-disabled | `disabled` prop is set |

#### RadioCard Selectors

| Selector | Static selector          | Description   |
|----------|--------------------------|---------------|
| card     | .mantine-RadioCard-card  | Root element  |

#### RadioCard CSS Variables

| Selector | Variable      | Description                  |
|----------|-------------|------------------------------|
| card     | --card-radius | Controls card border-radius |

#### RadioCard Data Attributes

| Selector | Attribute       | Condition                  |
|----------|----------------|----------------------------|
| card     | data-checked    | `checked` prop is set      |
| card     | data-with-border | `withBorder` prop is set  |


### Keyword Arguments
#### RadioGroup

- children (a list of or a singular dash component, string or number; required):
    `Radio` components and any other elements.

- 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.

- 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.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- deselectable (boolean; optional):
    Allow to deselect Chip in Radio mode.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

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

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelElement (a value equal to: 'label', 'div'; optional):
    `Input.Label` root element, `'label'` by default.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- 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` attribute of child radio inputs. By default, `name` is
    generated randomly.

- 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.

- readOnly (boolean; optional):
    If set, value cannot be changed.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of the `Input.Wrapper`, `'sm'` by default.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

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

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Wrapper`.
#### Radio

- 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 icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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 to set input color in
    checked state, `theme.primaryColor` by default.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Description displayed below the label.

- disabled (boolean; optional):
    Determines whether Radio disabled and non-selectable.

- error (a list of or a singular dash component, string or number; optional):
    Error displayed below the label.

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

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- label (a list of or a singular dash component, string or number; optional):
    Content of the `label` associated with the radio.

- labelPosition (a value equal to: 'left', 'right'; optional):
    Position of the label relative to the input, `'right'` by default.

- 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.

- 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,` "xl" by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of the component, `'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.

- value (string; optional):
    To be used with Radio group.

- variant (string; optional):
    variant.

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

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:
#### RadioIndicator

- 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 icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- checked (boolean; optional):
    Determines whether the component should have checked styles.

- 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 to set input color in
    checked state, `theme.primaryColor` by default.

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

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

- disabled (boolean; optional):
    Determines whether Radio disabled and non-selectable.

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

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- 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.

- 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,` "xl" by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of the component, `'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.

- variant (string; optional):
    variant.

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

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.
#### RadioCard

- children (a list of or a singular dash component, string or number; optional):
    RadioCard content.

- 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.

- checked (boolean; optional):
    Checked state.

- 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.

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

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

- disabled (boolean; optional):
    Determines whether RadioCard is disabled and non-selectable.

- 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):
    Value used to associate all related radio cards, required for
    accessibility if used outside of `Radio.Group`.

- 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,` "xl" 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.

- value (string; optional):
    To be used with Radio group.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether the card should have border, `True` by default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## Rating  
Pick and display rating  
Category: Inputs  

### Introduction

### Read only

```python
import dash_mantine_components as dmc

component = dmc.Group(
    children=dmc.Rating(fractions=2, value=3.5, readOnly=True), justify="center"
)
```
### Fractions

```python
import dash_mantine_components as dmc


component = dmc.Stack(
    [
        dmc.Group([dmc.Text("Fractions: 2"), dmc.Rating(fractions=2, value=1)]),
        dmc.Group([dmc.Text("Fractions: 3"), dmc.Rating(fractions=3, value=2.3333)]),
        dmc.Group([dmc.Text("Fractions: 4"), dmc.Rating(fractions=4, value=3.75)]),
    ]
)
```
### Allow Clear

Set `allowClear` prop to allow users to reset the rating to 0 by clicking the same rating value again. This is useful 
when you want to give users the ability to undo their rating selection:


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

component = dmc.Stack(
    [
        dmc.Text("Click the same star to clear the rating", size="sm"),
        dmc.Rating(id="rating-clear", value=3, allowClear=True),
        dmc.Group(
            [
                dmc.Text("Current rating:", size="sm", c="dimmed"),
                dmc.Text(id="rating-clear-value", size="sm", fw=600, children="3"),
            ],
            gap="xs",
        ),
    ],
    gap="md",
    align="center",
)


@callback(
    Output("rating-clear-value", "children"),
    Input("rating-clear", "value"),
)
def update_rating(value):
    return "Not rated" if value == 0 else value
```
### Custom Symbol

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Rating(
    value=1,
    emptySymbol=DashIconify(icon="tabler:sun"),
    fullSymbol=DashIconify(icon="tabler:moon"),
)
```
### 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-Rating-root        | Root element                                |
| starSymbol  | .mantine-Rating-starSymbol  | Default star icon                           |
| input       | .mantine-Rating-input       | Item input, hidden by default               |
| label       | .mantine-Rating-label       | Item label, used to display star icon       |
| symbolBody  | .mantine-Rating-symbolBody  | Wrapper around star icon for centering      |
| symbolGroup | .mantine-Rating-symbolGroup | Group of symbols, used to display fractions |


### Keyword Arguments
#### Rating

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

- allowClear (boolean; optional):
    When True, clicking the same rating value clears the rating to 0,
    default is False.

- 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.

- 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 CSS color value, `'yellow'` by
    default.

- count (number; optional):
    Number of controls, `5` by default.

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

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

- emptySymbol (a list of or a singular dash component, string or number; optional):
    Icon displayed when the symbol is empty.

- fractions (number; optional):
    Number of fractions each item can be divided into, `1` by default.

- fullSymbol (a list of or a singular dash component, string or number; optional):
    Icon displayed when the symbol is full.

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

- highlightSelectedOnly (boolean; optional):
    If set, only the selected symbol changes to full symbol when
    selected, `False` by default.

- 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` attribute passed down to all inputs. By default, `name` is
    generated randomly.

- 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.

- readOnly (boolean; optional):
    If set, the user cannot interact with the component, `False` by
    default.

- size (number; optional):
    Controls component size, `'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.

- value (number; default 0):
    Value for controlled component.

- variant (string; optional):
    variant.

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

## RichTextEditor  
A TipTab based rich text editor .  
Category: Inputs  

### Tiptap editor
The `RichTextEditor` component is built on top of the [Tiptap editor](https://tiptap.dev/api/editor)  For more information see the documentation on [tiptap.dev](https://tiptap.dev) website.

Tiptap version note:
- DMC 2.4.1 uses Tiptap v3.14.0.
- DMC 2.3.0–2.4.0 use Tiptap v3.3. There are no known breaking changes; however, review the migration guide
 for details.
- DMC versions prior to 2.3.0 use Tiptap v2.9.
  
```python
import dash_mantine_components as dmc

content = """<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>"""

component = dmc.RichTextEditor(
    html=content,
    toolbar={
        "sticky": True,
        "controlsGroups": [
            [
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "ClearFormatting",
                "Highlight",
                "Code",
            ],
            ["H1", "H2", "H3", "H4"],
            [
                "Blockquote",
                "Hr",
                "BulletList",
                "OrderedList",
                "Subscript",
                "Superscript",
            ],
            ["Link", "Unlink"],
            ["AlignLeft", "AlignCenter", "AlignJustify", "AlignRight"],
            ["Undo", "Redo"],
        ],
    },
)
```
### Editing Shortcuts:

- Keyboard Shortcuts:  
  - Utilize [Tiptap’s keyboard shortcuts](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts#text-formatting) for quick text formatting.   

- Markdown Shortcuts:  
  - Markdown-style formatting is supported. For example:  
    - Use `#` followed by a space for headings.  
    - Use `-` or `*` for bullet lists.  
  - See the full list of [Markdown shortcuts](https://tiptap.dev/docs/examples/basics/markdown-shortcuts#page-title).

### Tiptap Extensions  

Extensions expand the capabilities of Tiptap in `RichTextEditor`. DMC provides a predefined set of extensions, all
enabled by default. You can customize these as needed.

 Need an extension that’s not included? Open a [feature request on GitHub](https://github.com/snehilvj/dash-mantine-components/issues).
 We prioritize requests based on popularity and bundle size impact to keep DMC lightweight and efficient.

#### Default Extensions
By default, all the available extensions are enabled:  

```python
dmc.RichTextEditor(       
    extensions=[
        {"StarterKit": {"codeBlock": False}},
        "CodeBlockLowlight", # available in DMC >= 2.4.0
        "Superscript",
        "Subscript",
        "Highlight",
        "Table",
        "TableCell",
        "TableHeader",
        "TableRow",
        {"TextAlign": {"types": ["heading", "paragraph"]}},
        {"Placeholder": {"placeholder": "Write or paste content here..."}},
        "Color",
        "TextStyle",
        "Image",
        # The following is available in DMC >= 2.3.0
        "BackgroundColor",
        "FontFamily",
        "FontSize",
        "LineHeight",
        # The following is included in StarterKit in DMC >=2.3.0
        # "Underline",
        # "Link",
    ]
)
```  

The `StarterKit` extension includes essential text-editing features such as:  

- Text Formatting: `Text`, `Bold`, `Italic`, `Strike`, `Code`, `Underline`, `Link`
- Headings & Lists: `Heading`, `OrderedList`, `BulletList`, `ListItem`  
- Structural Elements: `Paragraph`, `Blockquote`, `CodeBlock`, `HardBreak`, `HorizontalRule`, `Document`  
- Cursor & History Features: `Dropcursor`, `Gapcursor`, `History`  
- Source Code editing: `SourceCode`

#### Customizing Extensions

You can modify the enabled extensions by setting the `extensions` prop. This allows you to:  
- Exclude features you don’t want  
- Adjust settings for specific extensions  

Each extension can be defined in two ways:  
- As a string to use default settings (for example, `"Color"`)  
- As a dictionary to specify configuration options (for example `{"TextAlign": {"types": ["heading", "paragraph"]}}`)  


Some features require multiple extensions. For example:  
- color formatting requires both `"Color"` and `"TextStyle"`.  
- Tables require `"Table"`, `"TableCell"`, `"TableHeader"`, and `"TableRow"`.  

At a minimum, ensure that `"StarterKit"` is included:  
```python
extensions=["StarterKit"]
```  
For a full list of extensions and configuration options, refer to the [Tiptap documentation](https://tiptap.dev/docs/extensions).


 Note:  Setting the `extensions` prop replaces the default list, so if you exclude an extension, for example,
`"Image"`, that feature will no longer be available.  Be sure to include all the features from the default extension that you need.

Here are the default `extensions` for corresponding DMC versions.


```python
# RichTextEditor default extensions in dmc version V2.4.0
extensions = [
    { 'StarterKit': { 'codeBlock': False } },
    'CodeBlockLowlight',
    'Superscript',
    'Subscript',
    'Highlight',
    'Table',
    'TableCell',
    'TableHeader',
    'TableRow',
    { 'Placeholder': { 'placeholder': 'Write or paste content here...' } },
    { 'TextAlign': { 'types': ['heading', 'paragraph'] } },
    'Color',
    'TextStyle',
    'BackgroundColor',
    'FontFamily',
    'FontSize',
    'LineHeight',
    'Image',
]
```

```python
# RichTextEditor default extensions in dmc version V2.3.0
extensions = [
    'StarterKit',
    'Superscript',
    'Subscript',
    'Highlight',
    'Table',
    'TableCell',
    'TableHeader',
    'TableRow',
    { 'Placeholder': { 'placeholder': 'Write or paste content here...' } },
    { 'TextAlign': { 'types': ['heading', 'paragraph'] } },
    'Color',
    'TextStyle',
    'BackgroundColor',
    'FontFamily',
    'FontSize',
    'LineHeight',
    'Image',
]
```

```python

# RichTextEditor default extensions in dmc version V1.1.0
extensions = [
    'StarterKit',
    'Underline',
    'Link',
    'Superscript',
    'Subscript',
    'Highlight',
    'Table',
    'TableCell',
    'TableHeader',
    'TableRow',
    {'Placeholder': {'placeholder': 'Write or paste content here...'}},
    {'TextAlign': {'types': ['heading', 'paragraph']}},
    'Color',
    'TextStyle',
    'Image',
]
```


### Toolbar Controls 

Customize the toolbar by grouping control icons using the `controlsGroups` parameter. Each nested list within
`controlsGroups` represents a separate group of toolbar icons.

 Note that even if a toolbar icon is not included, features provided by enabled extensions can still be accessed
 through  keyboard shortcuts and Markdown syntax.

```python
dmc.RichTextEditor(
    toolbar={           
        "controlsGroups": [
            [
                "Bold",
                "Italic",
                "Underline",               
            ], # First group (text formatting)
            
            ["H1", "H2", "H3", "H4"], # second group (headings)
        ]
    }     
)
```
Here are the control icons available for use in the `toolbar`:

**Controls included with StarterKit extension:**

- H1
- H2
- H3
- H4
- H5
- H6
- BulletList
- OrderedList
- Bold
- Italic
- Strikethrough
- ClearFormatting
- Blockquote
- Code
- CodeBlock
- Hr
- Undo
- Redo
- SourceCode

The following is included by default in DMC >=2.3.0:
- Link
- Unlink
- Underline

**Controls that require TextAlign extension:**
- AlignLeft
- AlignRight
- AlignCenter
- AlignJustify

**Controls that require both Color and TextStyle extensions:**
- ColorPicker
- Color
- UnsetColor

**Other controls with required extensions:**
- Underline requires `Underline` extension in DMC <=2.3.0
- Superscript requires `Superscript` extension
- Subscript requires `Subscript` extension
- Highlight requires `Highlight` extension


### Typography styles
By default, `RichTextEditor` renders content with [Typography](/components/typographystylesprovider) and
some additional styles. You can disable these styles by setting `withTypographyStyles=False`.  Then you can add your own 
CSS files, or style with the Styles API.


```python
 dmc.RichTextEditor(       
     withTypographyStyles=False
)
```

### Placeholder

To use the placeholder or change the placeholder default text, include (at least) the following extensions:


```python
from dash import html
import dash_mantine_components as dmc

component = dmc.RichTextEditor(
    extensions=[
        "StarterKit",
        {"Placeholder": {"placeholder": "Write something..."}},
    ],
)
```
### Text color

You can use the following toolbar controls to change text color:

- `ColorPicker` – allows to pick colors from given predefined color swatches and with `ColorPicker` component
- `Color` – allows to apply given color with one click
- `UnsetColor` – clears color styles

```python
import dash_mantine_components as dmc

colorpicker_colors = [
    "#25262b",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
    "#228be6",
    "#15aabf",
    "#12b886",
    "#40c057",
    "#82c91e",
    "#fab005",
    "#fd7e14",
]

component = dmc.RichTextEditor(
    html="Apply some colors to this text",
    extensions=[
        "StarterKit",
        "Color",
        "TextStyle",  # required when using Color
    ],
    toolbar={
        "sticky": True,
        "stickyOffset": 60,
        "controlsGroups": [
            [
                {"ColorPicker": {"colors": colorpicker_colors}},
            ],
            [
                {"Color": {"color": "red"}},
                {"Color": {"color": "green"}},
                {"Color": {"color": "blue"}},
            ],
            ["UnsetColor"],
        ],
    },
)
```
### Table

`RichTextEditor` supports tables through the `Table`, `TableCell`, `TableHeader` and `TableRow` extensions, which are 
enabled by default. You can insert tables using the toolbar or provide existing table content through the `html` prop.

Use the following controls in `toolbar.controlsGroups` to add table editing actions:

| Control | Description |
|---|---|
| `TableInsert` | Inserts a table and lets you select its dimensions. |
| `TableDelete` | Deletes the current table. |
| `TableColumnBefore` | Adds a column before the current column. |
| `TableColumnAfter` | Adds a column after the current column. |
| `TableColumnDelete` | Deletes the current column. |
| `TableRowBefore` | Adds a row before the current row. |
| `TableRowAfter` | Adds a row after the current row. |
| `TableRowDelete` | Deletes the current row. |
| `TableToggleHeaderRow` | Toggles the header row. |
| `TableToggleHeaderColumn` | Toggles the header column. |
| `TableMergeCells` | Merges selected cells. |
| `TableSplitCell` | Splits a merged cell. |

All table controls require the table extensions to be enabled. Except for `TableInsert`, controls are disabled when the
cursor is not inside a table.

The example below includes controls for inserting and editing tables.

By default, table content is styled using Mantine's typography styles. Set `withTypographyStyles=False` to disable these styles.


```python
import dash_mantine_components as dmc

table = """
<table>
  <tbody>
    <tr>
      <th><p>Name</p></th>
      <th><p>Role</p></th>
      <th><p>Department</p></th>
    </tr>
    <tr>
      <td><p>Alex Morgan</p></td>
      <td><p>Developer</p></td>
      <td><p>Engineering</p></td>
    </tr>
    <tr>
      <td><p>Jamie Lee</p></td>
      <td><p>Designer</p></td>
      <td><p>Design</p></td>
    </tr>
  </tbody>
</table>
<p></p>
"""

component = dmc.RichTextEditor(
    html=table,
    toolbar={
        "controlsGroups": [
            ["Bold", "Italic", "Underline"],
            ["TableInsert", "TableDelete"],
            ["TableColumnBefore", "TableColumnAfter", "TableColumnDelete"],
            ["TableRowBefore", "TableRowAfter", "TableRowDelete"],
            [
                "TableToggleHeaderRow",
                "TableToggleHeaderColumn",
                "TableMergeCells",
                "TableSplitCell",
            ],
        ],
    },
)
```
### Image

```python
import dash_mantine_components as dmc

content = """
<p>This is a basic example of implementing images. Drag to re-order.</p>
<img src="https://placehold.co/800x400" />
<img src="https://placehold.co/800x400/6A00F5/white" />      
"""

component = dmc.RichTextEditor(
    html=content,
    extensions=[
        "StarterKit",
        "Image",
    ],
)
```
### Code highlight  

*New in V2.4.0*  

To use code highlight you will need to include at least the following extensions:


```python
 dmc.RichTextEditor(       
     extensions=[
         {"StarterKit": {"codeBlock": False}},
        "CodeBlockLowlight",         
         # other needed extensions
     ],
)
```
Note:  You must set `{"codeBlock": False}` in the `StarterKit` configuration to prevent a conflict with the more
advanced `CodeBlockLowlight` extension. 

Current supported languages: 
  ts
  js
  python/ py 
  css
  bash / shell  
  text

Set language to text to supress code highlighting.

If you would like other languages included, please [open a feature request on our GitHub.](https://github.com/snehilvj/dash-mantine-components/issues)


```python
import dash_mantine_components as dmc

code_example = """import dash_mantine_components as dmc
from dash import Dash

app = Dash()

app.layout = dmc.MantineProvider(
    dmc.Alert(
       "Welcome to Dash Mantine Components",
       title="Hello!",
       color="violet",
    )
)

if __name__ == "__main__":
    app.run(debug=True)"""

component= dmc.RichTextEditor(
    html=f"<p>Regular paragraph</p><pre><code>{code_example}</code></pre>",
    extensions=[
        {"StarterKit": { "codeBlock": False }},
        "CodeBlockLowlight"
    ],
    toolbar={
        "controlsGroups": [
            [
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "CodeBlock"
            ],
        ],
    },
)
```
### Source code mode

You can use the `SourceCode` control to see and edit source code of editor content:

```python
import dash_mantine_components as dmc


content= '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>'

component =dmc.RichTextEditor(
    html=content,
    toolbar={
        "sticky": True,
        "controlsGroups": [
            ["SourceCode"],
            [
                "Blockquote",
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "ClearFormatting",
                "Highlight",
            ],
        ],
    },
)
```
### Focus

*New in V2.4.0*  

Use the `focus` prop to control the editor's focus state.

- `focus=True` - Focus the editor at the current cursor position
- `focus=False` - Blur (remove focus from) the editor
- `focus="start"` - Focus at the start of the document
- `focus="end"` - Focus at the end of the document
- `focus=10` - Focus at a specific position (character offset) Positive values start at the beginning of the document - negative values at the end.
- `focus="all"` - Focus and select all content

**Example:**

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

component =  dmc.Box([
    dmc.Group([
        dmc.Button("Focus Start", id="rte-btn-focus-start"),
        dmc.Button("Focus End", id="rte-btn-focus-end"),
        dmc.Button("Blur", id="rte-btn-blur"),
    ]),
    dmc.RichTextEditor(
        id="rte-focus",
        html="<p>Click the buttons to control focus.</p>",
    ),
])


@callback(
    Output("rte-focus", "focus"),
    Input("rte-btn-focus-start", "n_clicks"),
    Input("rte-btn-focus-end", "n_clicks"),
    Input("rte-btn-blur", "n_clicks"),
    prevent_initial_call=True
)
def control_focus(start, end, blur):
    if not ctx.triggered:
        return no_update

    button_id = ctx.triggered_id
    if button_id == "rte-btn-focus-start":
        return "start"
    elif button_id == "rte-btn-focus-end":
        return "end"
    elif button_id == "rte-btn-blur":
        return False
```
### Editable 

*New in V2.4.0*  

The `editable` prop controls whether the editor content can be modified. When `editable=False`:
- The editor becomes read-only
- Users can still select and copy text
- The toolbar is automatically hidden


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

component = dmc.Box([
    dmc.Switch(
        id="rte-toggle-editable",
        label="Editable",
        checked=True,
    ),
    dmc.RichTextEditor(
        id="rte-editable",
        html="<p>This editor can be toggled between editable and read-only mode.</p>",
        editable=True,
        toolbar={
            "controlsGroups": [
                [
                    "Bold",
                    "Italic",
                    "Underline",
                    "Strikethrough",
                    "CodeBlock"
                ],
            ],
        },
    ),
])

@callback(
    Output("rte-editable", "editable"),
    Input("rte-toggle-editable", "checked"),
)
def toggle_editable(checked):
    return checked
```
### Sticky toolbar
Set `sticky` prop on `RichTextEditor` `toolbar` prop to make toolbar sticky, control top property with `stickyOffset`. 
For example, in the dmc docs website there is a header with 60px height, in this case we will need to set 
`stickyOffset=60` to make sticky position correctly with fixed positioned header element.

Note the sticky toolbar as you scroll past the example below.


### Subtle Variant  

`variant="subtle"` removes borders from the controls groups, makes controls larger and reduces spacing of the toolbar:

```python
import dash_mantine_components as dmc

component = dmc.RichTextEditor(
    html="Subtle rich text editor variant",
    extensions=[
        "StarterKit",
        "Highlight",
    ],
    toolbar={
        "sticky": True,
        "stickyOffset": 60,
        "variant": "subtle",
        "controlsGroups": [
            [
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "ClearFormatting",
                "Highlight",
                "Code",
            ],
        ],
    },
)
```
### Labels and localization
`RichTextEditor` supports changing labels for all controls with labels prop:

```python
import dash_mantine_components as dmc


colorpicker_colors = [
    "#25262b",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
]

component = dmc.RichTextEditor(
    html="Custom button labels",
    toolbar={
        "sticky": True,
        "stickyOffset": 60,
        "controlsGroups": [
            [
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "ClearFormatting",
                "Highlight",
                "Code",
            ],
            [{"ColorPicker": {"colors": colorpicker_colors}}],
            [
                {"Color": {"color": "red"}},
                {"Color": {"color": "green"}},
                {"Color": {"color": "blue"}},
            ],
            ["UnsetColor"],
        ],
    },
    labels={
        "boldControlLabel": "Make text bold",
        "italicControlLabel": "Make text bold",
        "colorPickerControlLabel": "Text color", # label for control in toolbar
        "colorPickerColorLabel": "Color number: {color}", # include color in label in the color swatch. Use f-string format
        "colorControlLabel": "Set Text color {color}" # include color in label with f-string format
        # ...other labels
    },
)
```
Most labels are used to add `aria-label` and `title` attributes to the toolbar controls.  Some labels support f-string
formatting for dynamic values. If you do not provide all labels, then they will be merged with the default labels.

Here are all available labels with their defaults:
```python
default_labels = {
    # Controls labels
    "linkControlLabel": "Link",
    "colorPickerControlLabel": "Text color",
    "highlightControlLabel": "Highlight text",
    "colorControlLabel": "Set text color {color}",  # Use f-string format to include color in label
    "boldControlLabel": "Bold",
    "italicControlLabel": "Italic",
    "underlineControlLabel": "Underline",
    "strikeControlLabel": "Strikethrough",
    "clearFormattingControlLabel": "Clear formatting",
    "unlinkControlLabel": "Remove link",
    "bulletListControlLabel": "Bullet list",
    "orderedListControlLabel": "Ordered list",
    "h1ControlLabel": "Heading 1",
    "h2ControlLabel": "Heading 2",
    "h3ControlLabel": "Heading 3",
    "h4ControlLabel": "Heading 4",
    "h5ControlLabel": "Heading 5",
    "h6ControlLabel": "Heading 6",
    "blockquoteControlLabel": "Blockquote",
    "alignLeftControlLabel": "Align text: left",
    "alignCenterControlLabel": "Align text: center",
    "alignRightControlLabel": "Align text: right",
    "alignJustifyControlLabel": "Align text: justify",
    "codeControlLabel": "Code",
    "codeBlockControlLabel": "Code block",
    "subscriptControlLabel": "Subscript",
    "superscriptControlLabel": "Superscript",
    "unsetColorControlLabel": "Unset color",
    "hrControlLabel": "Horizontal line",
    "undoControlLabel": "Undo",
    "redoControlLabel": "Redo",

    # Task list
    "tasksControlLabel": "Task list",
    "tasksSinkLabel": "Decrease task level",
    "tasksLiftLabel": "Increase task level",

    # Link editor
    "linkEditorInputLabel": "Enter URL",
    "linkEditorInputPlaceholder": "https://example.com/",
    "linkEditorExternalLink": "Open link in a new tab",
    "linkEditorInternalLink": "Open link in the same tab",
    "linkEditorSave": "Save",

    # Color picker control
    "colorPickerCancel": "Cancel",
    "colorPickerClear": "Clear color",
    "colorPickerColorPicker": "Color picker",
    "colorPickerPalette": "Color palette",
    "colorPickerSave": "Save",
    "colorPickerColorLabel": "Set Text color {color}",  # Use f-string format to include color in color swatch label
}
```

### JSON or HTML Content  

The editor supports content in either [JSON (ProseMirror) or HTML format](https://tiptap.dev/docs/editor/core-concepts/schema). You can specify the format using the `json`
or `html` prop. If both props are set, `json` takes precedence.  

Note: While users can type Markdown-style text into `RichTextEditor`, the component does not parse or render supplied text in Markdown
content.  To render Markdown text, use the `dcc.Markdown` component instead.

#### When to Use Each Format:  
- **JSON (ProseMirror)**: Ideal for structured data storage (databases, APIs) or programmatic content manipulation (e.g., dynamically adding elements).  
- **HTML**: Useful for direct rendering in a browser, email clients, or using with components like `dcc.Markdown`.  

Note that the schema is very strict.  For example, if you use `This is <strong>important</strong>`, but don’t have any 
[extension](/components/richtexteditor#tiptap-extensions) that handles strong tags, you’ll only see `This is important` – without the bold formatting..

For details on the schema and ProseMirror format, see the [Tiptap documentation](https://tiptap.dev/docs/editor/core-concepts/schema).

Try editing the content in this example to see the JSON and HTML format:
```python
from dash import Input, Output, html, callback
import dash_mantine_components as dmc

content = """<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2>"""

component = html.Div(
    [
        dmc.RichTextEditor(
            html=content,
            extensions=[
                "StarterKit",
            ],
            toolbar={
                "controlsGroups": [
                    [
                        "Bold",
                        "Italic",
                        "Underline",
                        "Strikethrough",
                    ],
                ],
            },
            id="rte-content",
        ),
        dmc.Text("html content:", mt="lg"),
        dmc.Paper(id="rte-content-html", withBorder=True, mb="lg", p="md"),
        dmc.Text("json content:"),
        dmc.Paper(id="rte-content-json", withBorder=True, p="md"),
    ]
)


@callback(Output("rte-content-html", "children"), Input("rte-content", "html"))
def update_content(content: str):
    return f"{content}"


@callback(Output("rte-content-json", "children"), Input("rte-content", "json"))
def update_content(content: str):
    return f"{content}"
```
### Custom controls
Use `CustomControl` in the `controlsGroups` to create create custom controls in the `toolbar`. Note that you will need 
to set `aria-label` attribute to make control visible for screen readers.


Tiptap version note:  

- DMC 2.3.0 and later uses [Tiptap v3.3 commands](https://tiptap.dev/docs/editor/api/commands).
- Older versions of DMC used [Tiptap v2.9 commands](https://v2.tiptap.dev/docs/editor/api/commands).

Use the appropriate Tiptap documentation above to see the full list of editor commands available for your custom controls.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


#### Example: Insert content 

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.RichTextEditor(
    html= '<div>Click control to insert star emoji</div>',
    toolbar = {
        "controlsGroups": [
            [
                {
                    "CustomControl": {
                        "aria-label": "Custom Button",
                        "title": "Custom Button",
                        "children": DashIconify(icon="mdi:star", width=20, height=20),
                        "onClick": {"function": "insertContent", "options": "⭐"},
                    },
                },
            ],
        ],
    },

)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.insertContent = ({editor}, options) => {
    editor?.commands.insertContent(options)
}
```


#### Example: Table controls (legacy) 

Since DMC v3, table controls are built in. See the Table section above.

The example below is retained as a general example of adding custom controls and for users working with older DMC versions.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

toolbar = {
    "sticky": True,
    "controlsGroups": [
        [

            {
                "CustomControl": {
                    "aria-label": "Insert Table",
                    "title": "Insert Table",
                    "children": [DashIconify(icon="mdi:table-plus", width=20, height=20)],
                    "onClick": {"function": "insertTable"},
                },
            },
            {
                "CustomControl": {
                    "aria-label": "Add Column Before",
                    "title": "Add Column Before",
                    "children": [DashIconify(icon="mdi:table-column-plus-before", width=20, height=20)],
                    "onClick": {"function": "addColumnBefore"},
                },
            },
            {
                "CustomControl": {
                    "aria-label": "Delete Column",
                    "title": "Delete Column",
                    "children": [DashIconify(icon="mdi:table-column-remove", width=20, height=20)],
                    "onClick": {"function": "deleteColumn"},
                },
            },
        ],
        [
            "Bold",
            "Italic",
            "Underline",
        ],
    ],
}

component = dmc.RichTextEditor(
    html= '<div>Click controls to insert table, add column before, or delete column</div>',
    toolbar = toolbar,
    className="rte"  # applies custom table styles to this component only
)
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.insertTable = ({editor}) => {
    editor?.chain().focus().insertTable({ rows: 5, cols: 3, withHeaderRow: true }).run()
}

dmcfuncs.addColumnBefore = ({editor}) => {
    editor?.chain().focus().addColumnBefore().run()
}

dmcfuncs.deleteColumn= ({editor}) => {
    editor?.chain().focus().deleteColumn().run()
}
```

```css
.rte :is(table, th, td) {
    border: 1px solid var(--table-border-color);
}
```

#### Example: Font size controls
*New in V2.3.0* 

```python

import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.RichTextEditor(
    html="<p>Change font size with the controls!</p>",
    toolbar={
        "controlsGroups": [
            ["H1", "H2", "H3", "H4"],
            [
                {
                    "CustomControl": {
                        "aria-label": "Increase font size",
                        "title": "Increase font size",
                        "children": DashIconify(icon="mdi:format-font-size-increase", width=16),
                        "onClick": {"function": "increaseFontSize"},
                    },
                },
                {
                    "CustomControl": {
                        "aria-label": "Decrease font size",
                        "title": "Decrease font size",
                        "children": DashIconify(icon="mdi:format-font-size-decrease", width=16),
                        "onClick": {"function": "decreaseFontSize"},
                    },
                },
            ],
         ],
    },
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

function changeFontSize(editor, delta) {
  if (!editor) return;
  const { from, to } = editor.state.selection;
  let size = 16; // default

  editor.state.doc.nodesBetween(from, to, (node) => {
    if (node.isText) {
      const mark = node.marks.find(m => m.type.name === "textStyle");
      if (mark?.attrs.fontSize) {
        size = parseInt(mark.attrs.fontSize, 10);
      }
    }
  });

  const newSize = Math.min(Math.max(size + delta, 8), 72) + "px";
  editor.chain().focus().setFontSize(newSize).run();
}

dmcfuncs.increaseFontSize = ({ editor }) => changeFontSize(editor, 2);
dmcfuncs.decreaseFontSize = ({ editor }) => changeFontSize(editor, -2);
```


### Selected text

The `selected` prop contains the currently selected text.  Note that it is text only and does not include any formatting.

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

component = html.Div(
    [
        dmc.RichTextEditor(
            html="<p>Welcome to the editor.</p><p><strong>Select some text</strong></p>",
            extensions=[
                "StarterKit",
            ],
            toolbar={
                "controlsGroups": [
                    [
                        "Bold",
                        "Italic",
                        "Underline",
                        "Strikethrough",
                        "Highlight",
                    ],
                ]
            },
            id="rte",
        ),
        dmc.Box(id="rte-selected", mt="lg"),
    ]
)


@callback(Output("rte-selected", "children"), Input("rte", "selected"))
def update_content(content: str):
    return f"Your selected text: {content}"
```
### Accessing the Editor Instance clientside

The `dash_mantine_components.getEditor(id)` function provides direct access to the underlying Tiptap editor instance 
in clientside callbacks. This allows you full access to the editor API including executing commands, inspecting
content, and updating the editor state.  See the [Tiptap editor API](https://tiptap.dev/docs/editor/api/commands) for more details.


This returns the Tiptap editor instance for the specified component ID, or `undefined` if the editor doesn't exist:

```javascript
const editor = dash_mantine_components.getEditor('editor-id');
```

This example shows how to access the editor in a clientside callback and provide a word count of the content.

```python
import dash_mantine_components as dmc
from dash import Dash, Input, Output, clientside_callback

component = dmc.Box([
    dmc.RichTextEditor(
        id="get-editor-id",
        toolbar={
                "controlsGroups": [
                    [
                        "Bold",
                        "Italic",
                        "Underline",
                        "Strikethrough",
                    ],
                ],
            },
        html="<p>Try typing some text in this editor. Click the button below to see your character and word count.</p>"
    ),
    dmc.Button("Get Stats", id="btn-rte-stats", n_clicks=0),
    dmc.Box(id="stats"),
])

clientside_callback(
    """
    function(n_clicks) {
        if (n_clicks > 0) {
            const editor = dash_mantine_components.getEditor('get-editor-id');
            if (editor) {
                const text = editor.getText();
                const chars = text.length;
                const words = text.split(/\\s+/).filter(Boolean).length;
                return `Characters: ${chars} | Words: ${words}`;
            }
        }
        return dash_clientside.no_update;
    }
    """,
    Output("stats", "children"),
    Input("btn-rte-stats", "n_clicks"),
)
```
### Debounce

The `debounce` prop controls how updates to the `html`, `json`, and `selected` props are triggered in the `RichTextEditor`.

Enabling debounce helps prevent excessive callbacks by delaying updates until the user stops interacting. If set to
`True`, updates occur only when the editor loses focus. Alternatively, you can specify a delay in milliseconds to
fine-tune when updates should be sent.

```python
dmc.RichTextEditor(       
     debounce=500   # # Delay updates by 500ms 
)
```

### Persistence

Dash provides built-in persistence props that allow components to retain their values across page reloads or app
sessions. In `RichTextEditor`, this means the editor content can be saved and restored automatically.  

The following persistence-related props are available:  
- `persistence` – Enables persistence (`True`, `"local"`, `"session"`, or `"memory"`).  
- `persisted_props` – Specifies which props should be persisted.  By default it's  `["html, json"]` 
- `persistence_type` – Defines where the data is stored (`"local"`, `"session"`, or `"memory"`).  

For more details on how Dash handles persistence, refer to the [Dash persistence documentation](https://dash.plotly.com/persistence).


Notes:
 - The component must have an `id` for persistence to work.
 - If you want to set an initial value while also enabling persistence, set `persisted_props` to only the prop used for the initial value.
For example `persisted_props=['html']`.



### CSS Extensions

As of DMC 1.2.0, RichTextEditor component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.


### 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.


#### RichTextEditor Selectors

| Selector                    | Static Selector                       | Description                                                      |
|-----------------------------|---------------------------------------|------------------------------------------------------------------|
| `root`                      | `.mantine-RichTextEditor-root`        | Root element                                                     |
| `toolbar`                   | `.mantine-RichTextEditor-toolbar`     | Toolbar element                                                  |
| `content`                   | `.mantine-RichTextEditor-content`     | Content area                                                     |
| `typographyStylesProvider`  | `.mantine-RichTextEditor-typographyStylesProvider` | (Deprecated, use Typography) Typography component, wraps content |
| `Typography`                | `.mantine-RichTextEditor-Typography`  | Typography component, wraps content                              |
| `control`                   | `.mantine-RichTextEditor-control`     | `RichTextEditor.Control` root element, used as a base for all controls |
| `controlIcon`               | `.mantine-RichTextEditor-controlIcon` | Control icon element                                             |
| `controlsGroup`             | `.mantine-RichTextEditor-controlsGroup` | `RichTextEditor.ControlsGroup` component root                    |
| `linkEditor`                | `.mantine-RichTextEditor-linkEditor`  | Link editor root element                                         |
| `linkEditorSave`            | `.mantine-RichTextEditor-linkEditorSave` | Link editor save button                                          |
| `linkEditorInput`           | `.mantine-RichTextEditor-linkEditorInput` | Link editor URL input                                            |
| `linkEditorExternalControl` | `.mantine-RichTextEditor-linkEditorExternalControl` | Link editor external button                                      |
| `linkEditorDropdown`        | `.mantine-RichTextEditor-linkEditorDropdown` | Link editor popover dropdown element                             |

#### RichTextEditor Data Attributes

| Selector  | Attribute     | Condition                 |
|-----------|--------------|---------------------------|
| `control` | `data-active` | Control is active        |


### Keyword Arguments
#### RichTextEditor

- 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.

- 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.

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

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

- debounce (number | boolean; optional):
    If True, changes will be sent back to Dash only when losing focus.
    If False, data will be sent on every change. If a number, data
    will be sent when the value has been stable for that number of
    milliseconds.

- editable (boolean; optional):
    If True, the editor will be editable. True by default.

- extensions (list; optional):
    List of extensions to be loaded by the editor. Each item can be
    either a string with the extension name (e.g. 'Color') or an
    object with the extension name as key and options as value (e.g.
    {'TextAlign': {'types': ['heading', 'paragraph']}}).
    ['StarterKit', 'Underline', 'Link', 'Superscript', 'Subscript',
    'Highlight', 'Table', 'TableCell', 'TableHeader', 'TableRow',
    {'Placeholder': {'placeholder': 'Write or paste content
    here...'}}, {'TextAlign': {'types': ['heading', 'paragraph']}},
    'Color', 'TextStyle', 'Image'] by default.

- focus (number | boolean; optional):
    If True, the editor will be focused. If False, the editor will be
    blurred. Can also be a string ('start', 'end', 'all') or number to
    focus at a specific position. Positive values start at the
    beginning of the document - negative values at the end.

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

- html (string; optional):
    HTML string representation of the editor content. Affected by
    debounce. If both json and html are provided, json takes
    precedence.

- json (dict; optional):
    JSON object (ProseMirror) representation of the editor content.
    Affected by debounce. If both json and html are provide, json
    takes precedence.

- labels (dict; optional):
    Labels that are used in controls. If not set, default labels are
    used.

    `labels` is a dict with keys:

- 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.

- n_blur (number; optional):
    An integer that represents the number of times that this element
    has lost focus.

- 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.

- selected (string; optional):
    Currently selected text. Affected by debounce.

- 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.

- toolbar (dict; optional):
    Toolbar property definition. Empty by default.

    `toolbar` is a dict with keys:

- variant (a value equal to: 'default', 'subtle'; optional):
    Variant of the editor.

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

- withCodeHighlightStyles (boolean; optional):
    Determines whether code highlight styles should be added, True by
    default.

- withTypographyStyles (boolean; optional):
    Determines whether typography styles should be added, True by
    default.

## 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:
* a list of primitive values (strings, numbers, booleans): - use when label and value are same.
* alist 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: 'vertical', 'horizontal'; 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.

## Slider  
Use Slider component to capture user feedback from a range of values.  
Category: Inputs  

### Introduction

### Simple Usage

Use the `value` prop to get the value of the slider.

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

component = html.Div(
    [
        dmc.Slider(
            id="slider-callback",
            value=26,
            marks=[
                {"value": 20, "label": "20%"},
                {"value": 50, "label": "50%"},
                {"value": 80, "label": "80%"},
            ],
            mb=35,
        ),
        dmc.Text(id="slider-output"),
    ]
)


@callback(Output("slider-output", "children"), Input("slider-callback", "value"))
def update_value(value):
    return f"You have selected: {value}"
```
### Range Slider

Note: The `RangeSlider` has a `minRange` prop that defaults to 10. Make sure `minRange` is not greater than the
slider's maximum value, or the slider won't work properly.


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

component = html.Div(
    [
        dmc.RangeSlider(
            id="range-slider-callback",
            value=[26, 50],
            marks=[
                {"value": 20, "label": "20%"},
                {"value": 50, "label": "50%"},
                {"value": 80, "label": "80%"},
            ],
            mb=35,
        ),
        dmc.Text(id="range-slider-output"),
    ]
)


@callback(
    Output("range-slider-output", "children"), Input("range-slider-callback", "value")
)
def update_value(value):
    return f"You have selected: [{value[0]}, {value[1]}]"
```
### minRange

Use `minRange` prop to control minimum range between from and to values in `RangeSlider`. The default value is 10.
The example below shows how to use `minRange` prop to capture decimal values from the user:


```python
import dash_mantine_components as dmc

component = dmc.RangeSlider(
    minRange=0.2, min=0, max=1, step=0.0005, value=[0.1245, 0.5535]
)
```
### Update Mode

By default, slider value is updated once the user has stopped dragging the handle. But it can be changed by changing
the `updatemode` to "drag" instead of "mouseup" (default).

Below is a slider with `updatemode` set to "drag", observe how the output text changes as you drag the slider handle.

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

component = html.Div(
    [
        dmc.Slider(
            id="drag-slider",
            value=26,
            updatemode="drag",
            marks=[
                {"value": 20, "label": "20%"},
                {"value": 50, "label": "50%"},
                {"value": 80, "label": "80%"},
            ],
        ),
        dmc.Space(h=35),
        dmc.Text(id="drag-output"),
    ]
)


@callback(Output("drag-output", "children"), Input("drag-slider", "value"))
def update_value(value):
    return f"You have selected: {value}"
```
### Control label
To change label behavior and appearance, set the following props:


- `label` – set to `None` to disable the label. You can also provide a formatter function (via `{"function": "..."}`) to customize the label text. The function receives the `value` as its argument.
- `labelAlwaysOn` – if `True` – label will always be displayed, by default label is visible only when user is dragging
- `labelTransitionProps` – props passed down to the `Transition` component, can be used to customize label animation


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Text("No label", size="sm"),
    dmc.Slider(value=40, label=None),

    dmc.Text("Label formatted with a function", size="sm", mt="xl"),
    dmc.Slider(
        value=40,
        label={"function": "celsiusLabel"}
    ),

    dmc.Text("Label always visible", size="sm", mt="xl"),
    dmc.Slider(value=40, labelAlwaysOn=True),

    dmc.Text("Custom label transition", size="sm", mt="xl"),
    dmc.Slider(
        value=40,
        labelTransitionProps={
            "transition": "skew-down",
            "duration": 150,
            "timingFunction": "linear"
        }
    ),
])
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.celsiusLabel = (value) => `${value} °C`;
```


### Min, Max, and Step

You can set `min`, `max` and `step` values for `Slider` component. This will work even for negative and decimal values.

```python
import dash_mantine_components as dmc

component = dmc.Slider(min=-10, max=10, step=0.5)
```
The following example uses a function to format the `label`


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python

import dash_mantine_components as dmc

marks = [
    {"value": 0, "label": "xs"},
    {"value": 25, "label": "sm"},
    {"value": 50, "label": "md"},
    {"value": 75, "label": "lg"},
    {"value": 100, "label": "xl"},
]

component = dmc.Container([
    dmc.Text("Decimal step"),
    dmc.Slider(
        value=0,
        min=-10,
        max=10,
        step=0.1,
        label={"function": "formatDecimal"},
        styles={"markLabel": {"display": "none"}},
    ),

    dmc.Text("Step matched with marks", mt="md"),
    dmc.Slider(
        value=50,
        step=25,
        marks=marks,
        label={"function": "labelFromMarks", "options": {"marks": marks}},
        styles={"markLabel": {"display": "none"}},
    ),
], p="xl")
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDecimal = function (value) {
  return value.toFixed(1);
};

dmcfuncs.labelFromMarks = function (value, { marks }) {
  const match = marks.find(m => m.value === value);
  return match ? match.label : null;
};
```


### Domain
By default, min and max values define the possible range of values. `domain` prop allows setting the possible range
of values independently of the min and max values:


```python
import dash_mantine_components as dmc

component = dmc.Slider(
    domain=[0, 100],
      min=10,
      max=90,
      value=25,
      marks=[
        { "value": 10, "label": 'min' },
        { "value": 90, "label": 'max' },
      ]
)
```
### pushOnOverlap
`pushOnOverlap` prop controls whether the thumbs should push each other when they overlap. By default, `pushOnOverlap`
is `True`, if you want to disable this behavior, set it to `False`.

Example of `pushOnOverlap=False`:


```python
import dash_mantine_components as dmc

component = dmc.RangeSlider(
    pushOnOverlap=False,
    minRange=20,
    value=[25, 65]
)
```
### Marks

Add any number of marks to the Slider by setting `marks` prop to an array of objects.

```python
marks = [
  { "value": 20 },                          # displays mark on slider track
  { "value": 40, "label": '40%' },          # adds mark label below slider track
]
```

### Restrict selection to marks
Setting `restrictToMarks=True` ensures that users can only select values matching the specific marks defined. This 
feature is especially helpful when you have uneven or non-standard marks and want to ensure users can only pick 
from those specific points.

Note: The `step` prop is ignored when `restrictToMarks=True`.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Slider(
            restrictToMarks=True,
            value=25,
            marks=[{"value": index * 25} for index in range(5)],
        ),
        dmc.RangeSlider(
            restrictToMarks=True,
            value=[5, 15],
            marks=[
                {"value": 5},
                {"value": 15},
                {"value": 25},
                {"value": 35},
                {"value": 70},
                {"value": 80},
                {"value": 90},
            ],
        ),
    ]
)
```
### Hidden marks

Hidden marks allow you to snap to specific values without displaying them visually on the track. This is useful when
you want to create a "sticky" snapping behavior to certain values that you don't want to show to the user. Use this
feature together with the `restrictToMarks` prop.


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

marks = [
    {"value": 0, "label": "0%"},
    {"value": 25, "hidden": True},
    {"value": 50, "label": "50%"},
    {"value": 75, "hidden": True},
    {"value": 100, "label": "100%"},
]

component = dmc.Stack(
    [
        dmc.Text(
            id="hidden-marks-slider-value",
            size="sm",
            children="Hidden marks allow you to snap to specific values "
            "without displaying them visually. Current value: 50",
        ),
        dmc.Slider(
            id="hidden-marks-slider",
            value=50,
            min=0,
            max=100,
            step=1,
            restrictToMarks=True,
            marks=marks,
        ),
    ],
)

@callback(
    Output("hidden-marks-slider-value", "children"),
    Input("hidden-marks-slider", "value"),
)
def update_value(value):
    return (
        "Hidden marks allow you to snap to specific values without displaying "
        f"them visually. Current value: {value}"
    )
```
### Disabled

```python
import dash_mantine_components as dmc


component = dmc.Stack(
    [
        dmc.Slider(value=60, disabled=True),
        dmc.RangeSlider(
            mt="xl",
            mb="xl",
            value=[25, 75],
            disabled=True,
            marks=[
                {"value": 0, "label": "xs"},
                {"value": 25, "label": "sm"},
                {"value": 50, "label": "md"},
                {"value": 75, "label": "lg"},
                {"value": 100, "label": "xl"},
            ],
        ),
    ]
)
```
### Thumb size
```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Text("Standard size", size="sm"),
        dmc.Slider(value=40, label=None),
        dmc.Text("Thumb size number", size="sm", mt="xl"),
        dmc.Slider(value=40, thumbSize=50),
    ]
)
```
### Thumb children
```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = [
    dmc.Slider(
        thumbChildren=DashIconify(icon="mdi:heart", width=16),
        color="red",
        label=None,
        value=40,
        thumbSize=26,
        styles={"thumb": {"borderWidth": 2, "padding": 3}},
    ),
    dmc.RangeSlider(
        mt="xl",
        styles={"thumb": {"borderWidth": 2, "padding": 3}},
        color="red",
        label=None,
        value=[20, 60],
        thumbSize=26,
        thumbChildren=[
            DashIconify(icon="mdi:heart", width=16),
            DashIconify(icon="mdi:heart-broken", width=16),
        ],
    ),
]
```
### Scale
You can use the scale prop to represent the value on a different scale.

In the following demo, the value x represents the value 2^x. Increasing x by one increases the represented value by 2 to the power of x.



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


### Start point
Use the `startPointValue` prop to change the origin of the filled bar. When set, the bar extends from the given value
toward the current value – to the left for values below the start point and to the right for values above it. This prop
is ignored when `inverted` is set.  Available in `Slider` component only.


```python
import dash_mantine_components as dmc

component = dmc.Slider(
    startPointValue=0,
    updatemode="drag",
    min=-100,
    max=100,
    value=40,
    marks=[
        {"value": -100, "label": "-100"},
        {"value": -50, "label": "-50"},
        {"value": 0, "label": "0"},
        {"value": 50, "label": "50"},
        {"value": 100, "label": "100"},
    ],
)
```
### Inverted
You can invert the track by setting `inverted=True`:

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Slider(inverted=True, value=80),
        dmc.RangeSlider(inverted=True, value=[40, 60], mt="xl"),
    ]
)
```
### Vertical slider

Set `orientation="vertical"` to render the slider vertically. In vertical orientation, the minimum value is at the 
bottom and the maximum value is at the top.


```python
import dash_mantine_components as dmc

marks = [
    {"value": 20, "label": "20%"},
    {"value": 50, "label": "50%"},
    {"value": 80, "label": "80%"},
]

component = dmc.Group(
    [
        dmc.Slider(
            orientation="vertical",
            value=45,
            marks=marks,
        ),
        dmc.RangeSlider(
            orientation="vertical",
            value=[25, 65],
            marks=marks,
        ),
    ],
    gap=60,
)
```
### 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.


#### Slider selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | `.mantine-Slider-root` | Root element |
| label | `.mantine-Slider-label` | Thumb label |
| thumb | `.mantine-Slider-thumb` | Thumb element |
| trackContainer | `.mantine-Slider-trackContainer` | Wraps track element |
| track | `.mantine-Slider-track` | Slider track |
| bar | `.mantine-Slider-bar` | Track filled part |
| markWrapper | `.mantine-Slider-markWrapper` | Contains `mark` and `markLabel` elements |
| mark | `.mantine-Slider-mark` | Mark displayed on track |
| markLabel | `.mantine-Slider-markLabel` | Label of the associated mark, displayed below track |

#### Slider CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | `--slider-size` | Controls track `height` |
| root | `--slider-color` | Controls filled track, thumb and marks `background` |
| root | `--slider-thumb-size` | Controls thumb `width` and `height` |
| root | `--slider-radius` | Controls `border-radius` of track and thumb |

#### Slider data attributes

| Selector | Attribute | Condition |
|----------|-----------|-----------|
| trackContainer, track, bar, thumb, mark | `data-disabled` | `disabled` prop is set |
| track, bar | `data-inverted` | `inverted` prop is set |
| thumb | `data-dragging` | slider is being dragged |
| mark | `data-filled` | mark position is less or equal slider value |



### Keyword Arguments
#### Slider

- 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.

- 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, controls color of
    track and thumb, `theme.primaryColor` by default.

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

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

- disabled (boolean; optional):
    Disables slider.

- domain (list of 2 elements: [number, number]; optional):
    Domain of the slider, defines the full range of possible values,
    `[min, max]` by default.

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

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- inverted (boolean; optional):
    Determines whether track value representation should be inverted,
    `False` by default.

- label (a list of or a singular dash component, string or number; optional):
    Function to generate label (See
    https://www.dash-mantine-components.com/functions-as-props) or any
    react node to render instead, set to None to disable label.

- labelAlwaysOn (boolean; optional):
    Determines whether the label should be visible when the slider is
    not being dragged or hovered, `False` by default.

- labelTransitionProps (dict; optional):
    Props passed down to the `Transition` component, `{ transition:
    'fade', duration: 0 }` by default.

    `labelTransitionProps` is a dict with keys:

- 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:

- marks (list of dicts; optional):
    Marks displayed on the track. Type: list of dictionaries. Each
    dictionary must contain a `value` (number) specifying the position
    of the mark and can optionally contain a `label` (str or
    component) and `hidden` (boolean) to hide the mark.

    `marks` is a list of dicts with keys:

- max (number; optional):
    Maximum possible value, `100` by default.

- min (number; optional):
    Minimal possible value, `0` by default.

- 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):
    Hidden input name, use with uncontrolled component.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Slider orientation default 'horizontal'.

- 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.

- precision (number; optional):
    Number of significant digits after the decimal point.

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

- restrictToMarks (boolean; optional):
    Determines whether the selection should be only allowed from the
    given marks array, False by default.

- scale (boolean | number | string | dict | list; optional):
    Function to generate scale (See
    https://www.dash-mantine-components.com/functions-as-props) A
    transformation function to change the scale of the slider.

- showLabelOnHover (boolean; optional):
    Determines whether the label should be displayed when the slider
    is hovered, `True` by default.

- size (number; optional):
    Controls size of the track, `'md'` by default.

- startPointValue (number; optional):
    Value at which the filled bar starts. When set, the bar extends
    from this point toward the current value. Ignored when `inverted`
    is set.

- step (number; optional):
    Number by which value will be incremented/decremented with thumb
    drag and arrows, `1` 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.

- thumbChildren (a list of or a singular dash component, string or number; optional):
    Content rendered inside thumb.

- thumbLabel (string; optional):
    Thumb `aria-label`.

- thumbProps (dict; optional):
    Props passed down to thumb element.

- thumbSize (string | number; optional):
    Thumb `width` and `height`, by default value is computed based on
    `size` prop.

- updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'):
    Determines when the component should update its value property. If
    mouseup (the default) then the slider will only trigger its value
    when the user has finished dragging the slider. If drag, then the
    slider will update its value continuously as it is being dragged.

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

- variant (string; optional):
    variant.

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

- 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.

- 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, controls color of
    track and thumb, `theme.primaryColor` by default.

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

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

- disabled (boolean; optional):
    Disables slider.

- domain (list of 2 elements: [number, number]; optional):
    Domain of the slider, defines the full range of possible values,
    `[min, max]` by default.

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

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- inverted (boolean; optional):
    Determines whether track values representation should be inverted,
    `False` by default.

- label (a list of or a singular dash component, string or number; optional):
    Function to generate label (See
    https://www.dash-mantine-components.com/functions-as-props) or any
    react node to render instead, set to None to disable label.

- labelAlwaysOn (boolean; optional):
    Determines whether the label should be visible when the slider is
    not being dragged or hovered, `False` by default.

- labelTransitionProps (dict; optional):
    Props passed down to the `Transition` component, `{ transition:
    'fade', duration: 0 }` by default.

    `labelTransitionProps` is a dict with keys:

- 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:

- marks (list of dicts; optional):
    Marks displayed on the track. Type: list of dictionaries. Each
    dictionary must contain a `value` (number) specifying the position
    of the mark and can optionally contain a `label` (str or
    component) and `hidden` (boolean) to hide the mark.

    `marks` is a list of dicts with keys:

- max (number; optional):
    Maximum possible value, `100` by default.

- maxRange (number; optional):
    Maximum range interval, `Infinity` by default.

- min (number; optional):
    Minimal possible value, `0` by default.

- minRange (number; optional):
    Minimal range interval, `10` by default.

- 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):
    Hidden input name, use with uncontrolled component.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Slider orientation default 'horizontal'.

- 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.

- precision (number; optional):
    Number of significant digits after the decimal point.

- pushOnOverlap (boolean; optional):
    Determines whether the other thumb should be pushed by the current
    thumb dragging when minRange/maxRange is reached, True by default.

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

- restrictToMarks (boolean; optional):
    Determines whether the selection should be only allowed from the
    given marks array, False by default.

- scale (boolean | number | string | dict | list; optional):
    Function to generate scale (See
    https://www.dash-mantine-components.com/functions-as-props) A
    transformation function to change the scale of the slider.

- showLabelOnHover (boolean; optional):
    Determines whether the label should be displayed when the slider
    is hovered, `True` by default.

- size (number; optional):
    Controls size of the track, `'md'` by default.

- step (number; optional):
    Number by which value will be incremented/decremented with thumb
    drag and arrows, `1` 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.

- thumbChildren (a list of or a singular dash component, string or number; optional):
    Content rendered inside thumb.

- thumbFromLabel (string; optional):
    First thumb `aria-label`.

- thumbLabel (string; optional):
    `aria-label` for both thumbs (overridden by
    thumbFromLabel/thumbToLabel if provided).

- thumbSize (string | number; optional):
    Thumb `width` and `height`, by default value is computed based on
    `size` prop.

- thumbToLabel (string; optional):
    Second thumb `aria-label`.

- thumbValueText (boolean | number | string | dict | list; optional):
    `aria-valuetext` for both thumbs. When a function is provided, it
    receives the scaled value.

- updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'):
    Determines when the component should update its value property. If
    mouseup (the default) then the Rangeslider will only trigger its
    value when the user has finished dragging the Rangeslider. If
    drag, then the Rangeslider will update its value continuously as
    it is being dragged.

- value (list of 2 elements: [number, number]; optional):
    Controlled component value.

- variant (string; optional):
    variant.

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

## Switch  
Use the Switch component to capture boolean input from user.  
Category: Inputs  

### Introduction

### Callbacks

Use the property `checked` to use dmc.Switch in callbacks.

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

component = html.Div(
    [
        dmc.Switch(id="switch-example", label="Use default settings.", checked=True),
        dmc.Space(h=10),
        dmc.Text(id="switch-settings"),
    ]
)


@callback(Output("switch-settings", "children"), Input("switch-example", "checked"))
def settings(checked):
    return f"Using {'default' if checked else 'custom'} settings"
```
### Inner Labels



```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Switch(onLabel="ON", offLabel="OFF", radius="xl", size=x)
        for x in ["xs", "sm", "md", "lg", "xl"]
    ]
)
```
### Radius and Size

Set the radius and size of the Switch component using the `radius` and `size` prop respectively.

```python
import dash_mantine_components as dmc

dmc.Switch(
    size="lg",
    radius="sm",
    label="Enable this option",
    checked=True
)
```

### Icon Labels

You can also add icons in the switch labels.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Switch(
    offLabel=DashIconify(icon="radix-icons:moon", width=20),
    onLabel=DashIconify(icon="radix-icons:sun", width=20),
    size="xl",
)
```
### Thumb Icon

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Switch(
    thumbIcon=DashIconify(
        icon="tabler:walk", width=16, color= "var(--mantine-color-teal-5)"
    ),
    size="lg",
    color="teal",
    checked=True,
)
```
### 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-Switch-root         | Root element                                    |
| track        | .mantine-Switch-track        | Switch track, contains `thumb` and `trackLabel` |
| trackLabel   | .mantine-Switch-trackLabel   | Label displayed inside `track`                  |
| thumb        | .mantine-Switch-thumb        | Thumb displayed inside `track`                  |
| input        | .mantine-Switch-input        | Input element, hidden by default                |
| body         | .mantine-Switch-body         | Input body, contains all other elements         |
| labelWrapper | .mantine-Switch-labelWrapper | Contains `label`, `description` and `error`     |
| label        | .mantine-Switch-label        | Label element                                   |
| description  | .mantine-Switch-description  | Description displayed below the label           |
| error        | .mantine-Switch-error        | Error message displayed below the label         |


### Keyword Arguments
#### Switch

- 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.

- checked (boolean; optional):
    State of check box.

- 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 to set input color in
    checked state, `theme.primaryColor` by default.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Description displayed below the label.

- disabled (boolean; optional):
    A checkbox can show it is currently unable to be interacted with.

- error (a list of or a singular dash component, string or number; optional):
    Error displayed below the label.

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

- label (a list of or a singular dash component, string or number; optional):
    Content of the `label` associated with the radio.

- labelPosition (a value equal to: 'left', 'right'; optional):
    Position of the label relative to the input, `'right'` by default.

- 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.

- offLabel (a list of or a singular dash component, string or number; optional):
    Inner label when the `Switch` is in unchecked state.

- onLabel (a list of or a singular dash component, string or number; optional):
    Inner label when the `Switch` is in checked state.

- 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,` "xl" by default.

- size (optional):
    Controls size of all elements.

- 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.

- thumbIcon (a list of or a singular dash component, string or number; optional):
    Icon inside the thumb of the switch.

- variant (string; optional):
    variant.

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

- withThumbIndicator (boolean; optional):
    If set, the indicator will be displayed inside thumb, `True` by
    default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## TextInput  
Use TextInput component to capture string input from user. Customize the input with label, description, error message etc.  
Category: Inputs  

### Introduction

### Loading state

Set `loading` prop to display a loading indicator. By default, the loader is displayed on the right side of the input.
You can change the position with the `loadingPosition` prop to 'left' or 'right'.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.TextInput(
    label="Your Email",
    w=200,
    placeholder="Enter Your Email",
    loading=True
)
```
### Error State

Use `error` prop to convey an error with an error message and a red border around the input.

Note: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. 
In order to correct this, just add the following css to your app.

```css
input:invalid {
    outline: none !important;
}
```

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.TextInput(label="Your Email:", w=200, error=True),
        dmc.TextInput(label="Your Email:", w=200, error="Enter a valid email"),
    ],
)
```
### Success state

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.TextInput(
            label="Success as boolean",
            placeholder="Success as boolean",
            success=True,
        ),
        dmc.TextInput(
            label="Success as React node",
            placeholder="Success as React node",
            success="Username is available",
        ),
    ],
)
```
### Disabled State

Convey disabled input with `disabled` prop.

```python
import dash_mantine_components as dmc

component = dmc.TextInput(label="Disabled Input", w=200, disabled=True)
```
### With Icon

Add icon to the left side of the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.TextInput(
    label="Your Email",
    w=200,
    placeholder="Your Email",
    leftSection=DashIconify(icon="ic:round-alternate-email"),
)
```
### With right section

Add icon or loading indicator to the right section of the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.Stack(
    children=[
        dmc.TextInput(
            w=200,
            placeholder="9876543210",
            rightSection=DashIconify(icon="emojione-v1:mobile-phone"),
        ),
        dmc.TextInput(
            w=200,
            placeholder="9876543210",
            rightSection=dmc.Loader(size="xs"),
        ),
    ],
)
```
### 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                                      |
|:------------|:-------------------------------|:-------------------------------------------------|
| wrapper     | .mantine-TextInput-wrapper     | Root element of the Input                        |
| input       | .mantine-TextInput-input       | Input element                                    |
| section     | .mantine-TextInput-section     | Left and right sections                          |
| root        | .mantine-TextInput-root        | Root element                                     |
| label       | .mantine-TextInput-label       | Label element                                    |
| required    | .mantine-TextInput-required    | Required asterisk element, rendered inside label |
| description | .mantine-TextInput-description | Description element                              |
| error       | .mantine-TextInput-error       | Error element                                    |


### Keyword Arguments
#### TextInput

- 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.

- autoComplete (string; default 'off'):
    (string; default "off") Enables the browser to attempt
    autocompletion based on user history.  For more information, see:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.

- 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.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

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

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

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

- spellCheck (boolean; optional):
    Spell check property.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (string; default ''):
    Value for controlled input.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## Textarea  
Use Textarea component to capture string input in a text area with an auto-size variant. Customize the input with label, description, error message etc.  
Category: Inputs  

### Introduction

### Autosize

Textarea will grow until `maxRows` are reached or indefinitely if `maxRows` is not set.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Textarea(
            label="Autosize with no rows limit",
            placeholder="Autosize with no rows limit",
            w=500,
            autosize=True,
            minRows=2,
        ),
        dmc.Textarea(
            label="Autosize with 4 rows max",
            placeholder="Autosize with 4 rows max",
            w=500,
            autosize=True,
            minRows=2,
            maxRows=4,
        ),
    ],
)
```
### bottom section

Use `bottomSection` prop to render content inside the input border at the bottom. This is useful for displaying
character counters, hints, or other supplementary information:

```python
import dash_mantine_components as dmc
from dash import  Input, Output, clientside_callback

component = dmc.Textarea(
    id="textarea-bottom-section",
    autosize=True,
    minRows=3,
    label="Message",
    bottomSection=dmc.Text(
        id="char-count",
        size="xs",
        c="dimmed",
    ),
)

clientside_callback(
    """
    function(value) {
        const length = (value || "").length;
        return `${length}/500 characters`;
    }
    """,
    Output("char-count", "children"),
    Input("textarea-bottom-section", "value"),
)
```
### Error State

Use `error` prop to convey an error with an error message and a red border around the input.

Note: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. 
In order to correct this, just add the following css to your app.

```css
input:invalid {
    outline: none !important;
}
```

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Textarea(label="Your message", w=500, error=True),
        dmc.Textarea(label="Your message", w=500, error="Message can't be empty!"),
    ],
)
```
### Success state

```python
import dash_mantine_components as dmc

component = dmc.Textarea(label="Textarea", w=200, success="Looks good!")
```
### inputProps

Use the `inputProps` dictionary to pass attributes directly to the underlying [`<input>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes).

In this example, `maxLength` is used to limit the number of characters a user can enter.

```python
import dash_mantine_components as dmc

component = dmc.Textarea(
    inputProps={"maxLength": 3},
    label="Enter text",
    description="Max length of 3 characters",
)
```
### 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                                      |
|:------------|:------------------------------|:-------------------------------------------------|
| wrapper     | .mantine-Textarea-wrapper     | Root element of the Input                        |
| input       | .mantine-Textarea-input       | Input element                                    |
| section     | .mantine-Textarea-section     | Left and right sections                          |
| root        | .mantine-Textarea-root        | Root element                                     |
| label       | .mantine-Textarea-label       | Label element                                    |
| required    | .mantine-Textarea-required    | Required asterisk element, rendered inside label |
| description | .mantine-Textarea-description | Description element                              |
| error       | .mantine-Textarea-error       | Error element                                    |


### Keyword Arguments
#### Textarea

- 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.

- autoComplete (string; default 'off'):
    (string; default "off") Enables the browser to attempt
    autocompletion based on user history.  For more information, see:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.

- autosize (boolean; optional):
    Determines whether the textarea height should grow with its
    content, `False` by default.

- bottomSection (a list of or a singular dash component, string or number; optional):
    Content rendered at the bottom of the input, inside the border.

- bottomSectionProps (dict; optional):
    Props passed down to the `bottomSection` element.

- 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.

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

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

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

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

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

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

- loading (boolean; optional):
    Displays loading indicator in the left or right section default
    False.

- loadingPosition (a value equal to: 'left', 'right'; optional):
    Position of the loading indicator default 'right'.

- 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:

- maxRows (number; optional):
    Maximum rows for autosize textarea to grow, ignored if `autosize`
    prop is not set.

- minRows (number; optional):
    Minimum rows of autosize textarea, ignored if `autosize` prop is
    not set.

- 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.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- 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.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- 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):
    Readonly.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- resize (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'block', 'inline', 'both', 'horizontal', 'vertical'; optional):
    Controls `resize` CSS property, `'none'` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

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

- spellCheck (boolean; optional):
    Spell check property.

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

- success (a list of or a singular dash component, string or number; optional):
    Determines whether the input should have success styles.

- successProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Success` component.

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

- value (string; default ''):
    Content.

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withSuccessStyles (boolean; optional):
    Determines whether the input should have green border when the
    `success` prop is set @,default,True.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

## AppShell  
Responsive shell for your application with header, navbar, aside and footer.  
Category: Layout  

### Examples  

Since `AppShell` components have fixed position, it is not possible to include live demos on this page.


Please see the code in the [dmc-docs GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell).  The Appshell example apps are deployed on [Plotly Cloud](https://plotly.com/cloud/).

 
1 Basic AppShell with Header and Navbar
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/basic_appshell.py)  
   - [Live Demo on Plotly Cloud](https://dmc-appshell-basic.plotly.app/)  

```python
"""
Basic Appshell with header and  navbar that collapses on mobile.
"""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False),
                    dmc.Image(src=logo, h=40, flex=0),
                    dmc.Title("Demo App", c="blue"),
                ],
                h="100%",
                px="md",
            )
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=[
                "Navbar",
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
            ],
            p="md",
        ),
        dmc.AppShellMain("Main"),
    ],
    header={"height": 60},
    padding="md",
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    id="appshell",
)


app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)
```

2 Responsive Width and Height
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/responsive_sizes.py)  
   - [Live Demo on Plotly Cloud](https://dmc-appshell-responsive-sizes.plotly.app/)  

```python
"""
Responsive width and height

App shell with responsive navbar width and height
"""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Burger(
                        id="burger",
                        size="sm",
                        hiddenFrom="sm",
                        opened=False,
                    ),
                    dmc.Image(src=logo, h=40, flex=0),
                    dmc.Title("Demo App", c="blue"),
                ],
                h="100%",
                px="md",
            )
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=[
                "Navbar",
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
            ],
            p="md",
        ),
        dmc.AppShellMain("Main"),
    ],
    header={
        "height": {"base": 60, "md": 70, "lg": 80},
    },
    navbar={
        "width": {"base": 200, "md": 300, "lg": 400},
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    padding="md",
    id="appshell",
)

app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def toggle_navbar(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)
```

3 Mobile-Only Navbar
   - Buttons in the header are displayed in the navbar on mobile.  
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/mobile_navbar.py)  
   - [Live Demo on Plotly Cloud](https://dmc-appshell-mobile-navbar.plotly.app/)  
   
```python
"""
Mobile only navbar

Navbar is only visible on mobile, links that are rendered in the header
on desktop are hidden on mobile in header and rendered in navbar instead.
"""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"
buttons = [
    dmc.Button("Home", variant="subtle", color="gray"),
    dmc.Button("Blog", variant="subtle", color="gray"),
    dmc.Button("Contacts", variant="subtle", color="gray"),
    dmc.Button("Support", variant="subtle", color="gray"),
]

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Group(
                        [
                            dmc.Burger(
                                id="burger",
                                size="sm",
                                hiddenFrom="sm",
                                opened=False,
                            ),
                            dmc.Image(src=logo, h=40, flex=0),
                            dmc.Title("Demo App", c="blue"),
                        ]
                    ),
                    dmc.Group(
                        children=buttons,
                        ml="xl",
                        gap=0,
                        visibleFrom="sm",
                    ),
                ],
                justify="space-between",
                style={"flex": 1},
                h="100%",
                px="md",
            ),
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=buttons,
            py="md",
            px=4,
        ),
        dmc.AppShellMain(
            "Navbar is only visible on mobile, links that are rendered in the header on desktop are hidden on mobile in header and rendered in navbar instead."
        ),
    ],
    header={"height": 60},
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"desktop": True, "mobile": True},
    },
    padding="md",
    id="appshell",
)

app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def toggle_navbar(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened, "desktop": True}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)
```

4 Collapsible Navbar on Desktop and Mobile
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/responsive_sizes.py)  
   - [Live Demo on Plotly Cloud](https://dmc-appshell-responsive-sizes.plotly.app/)  

```python
"""
Responsive width and height

App shell with responsive navbar width and height
"""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Burger(
                        id="burger",
                        size="sm",
                        hiddenFrom="sm",
                        opened=False,
                    ),
                    dmc.Image(src=logo, h=40, flex=0),
                    dmc.Title("Demo App", c="blue"),
                ],
                h="100%",
                px="md",
            )
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=[
                "Navbar",
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
            ],
            p="md",
        ),
        dmc.AppShellMain("Main"),
    ],
    header={
        "height": {"base": 60, "md": 70, "lg": 80},
    },
    navbar={
        "width": {"base": 200, "md": 300, "lg": 400},
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    padding="md",
    id="appshell",
)

app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def toggle_navbar(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)
```

5 Full AppShell Layout
   - Includes all elements: navbar, header, aside, and footer.  
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/full_layout.py)  
   - [Live Demo on Plotly Cloud](https://dmc-appshell-full-layout.plotly.app/) 

```python
"""
AppShell with all elements

Navbar, header, aside and footer used together
"""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Burger(
                        id="burger",
                        size="sm",
                        hiddenFrom="sm",
                        opened=False,
                    ),
                    dmc.Image(src=logo, h=40, flex=0),
                    dmc.Title("Demo App", c="blue"),
                ],
                h="100%",
                px="md",
            )
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=[
                "Navbar",
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
            ],
            p="md",
        ),
        dmc.AppShellMain(
            "Aside is hidden on md breakpoint and cannot be opened when it is collapsed"
        ),
        dmc.AppShellAside("Aside", p="md"),
        dmc.AppShellFooter("Footer", p="md"),
    ],
    header={"height": 60},
    footer={"height": 60},
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    aside={
        "width": 300,
        "breakpoint": "md",
        "collapsed": {"desktop": False, "mobile": True},
    },
    padding="md",
    id="appshell",
)

app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def toggle_navbar(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)
```

6 Scrollable Navbar with 60 Links
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/navbar_scroll.py)  
   - [Live Demo on Plotly CLoud](https://dmc-appshell-navbar-scroll.plotly.app/)   

```python
"""
Scrollable Navbar with 60 links
"""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback


app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False),
                    dmc.Image(src=logo, h=40, flex=0),
                    dmc.Title("Demo App", c="blue"),
                ],
                h="100%",
                px="md",
            )
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=dmc.ScrollArea(
                [
                    "60 links in a scrollable section",
                    *[
                        dmc.Skeleton(height=28, mt="sm", animate=False)
                        for _ in range(60)
                    ],
                ]
            ),
            p="md",
        ),
        dmc.AppShellMain("Main"),
    ],
    header={"height": 60},
    padding="md",
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    id="appshell",
)


app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)
```

7 Alternate AppShell Layout
   - Navbar and aside are rendered on top of the header and footer.  
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/alt_layout.py)  
   - [Live Demo on Plotly Cloud](https://dmc-appshell-alt-layout.plotly.app/)    

```python
"""
Alt Layout
Navbar and Aside are rendered on top on Header and Footer

"""

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False),
                    dmc.Image(src=logo, h=40, flex=0),
                    dmc.Title("Demo App", c="blue"),
                ],
                h="100%",
                px="md",
            )
        ),
        dmc.AppShellNavbar(
            p="md",
            children=[
                dmc.Group(
                    [
                        dmc.Burger(
                            id="navbar-burger", size="sm", hiddenFrom="sm", opened=False
                        ),
                        dmc.Text("Navbar"),
                    ]
                ),
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
            ],
        ),
        dmc.AppShellMain(
            "Alt layout – Navbar and Aside are rendered on top of Header and Footer"
        ),
        dmc.AppShellAside("Aside", p="md"),
        dmc.AppShellFooter("Footer", p="md"),
    ],
    layout="alt",
    header={"height": 60},
    footer={"height": 60},
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    aside={
        "width": 300,
        "breakpoint": "md",
        "collapsed": {"desktop": False, "mobile": True},
    },
    padding="md",
    id="appshell",
)

app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def toggle_navbar(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)
```

8 AppShell with Theme Switch Component
   - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/appshell_with_theme_switch.py)  
   - [Live Demo on Plotly Cloud](https://dmc-appshell-with-theme-switch.plotly.app/)  

```python
"""
Basic Appshell with header and  navbar that collapses on mobile.  Also includes a theme switch.
"""

import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, Input, Output, State, callback, clientside_callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

theme_toggle = dmc.Switch(
    offLabel=DashIconify(
        icon="radix-icons:sun", width=15, color= "var(--mantine-color-yellow-8)"
    ),
    onLabel=DashIconify(
        icon="radix-icons:moon",
        width=15,
        color= "var(--mantine-color-yellow-6)",
    ),
    id="color-scheme-toggle",
    persistence=True,
    color="grey",
)

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Group(
                        [
                            dmc.Burger(
                                id="burger",
                                size="sm",
                                hiddenFrom="sm",
                                opened=False,
                            ),
                            dmc.Image(src=logo, h=40, flex=0),
                            dmc.Title("Demo App", c="blue"),
                        ]
                    ),
                    theme_toggle,
                ],
                justify="space-between",
                style={"flex": 1},
                h="100%",
                px="md",
            ),
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=[
                "Navbar",
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
            ],
            p="md",
        ),
        dmc.AppShellMain("Main"),
    ],
    header={"height": 60},
    padding="md",
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    id="appshell",
)


app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


clientside_callback(
    """ 
    (switchOn) => {
       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');  
       return window.dash_clientside.no_update
    }
    """,
    Output("color-scheme-toggle", "id"),
    Input("color-scheme-toggle", "checked"),
)

if __name__ == "__main__":
    app.run(debug=True)
```

### Basic usage

AppShell is a layout component. It can be used to implement a common Header - Navbar - Footer - Aside layout pattern.
All AppShell components have `position: fixed` style - they are not scrolled with the page.

The documentation app that you are viewing uses AppShell with Header, Aside, and Navbar.

This is the code for the first example above for the basic app shell with header and navbar.  The navbar collapses on mobile.

```python

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback

app = Dash()

logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"

layout = dmc.AppShell(
    [
        dmc.AppShellHeader(
            dmc.Group(
                [
                    dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False),
                    dmc.Image(src=logo, h=40),
                    dmc.Title("Demo App", c="blue"),
                ],
                h="100%",
                px="md",
            )
        ),
        dmc.AppShellNavbar(
            id="navbar",
            children=[
                "Navbar",
                *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)],
            ],
            p="md",
        ),
        dmc.AppShellMain("Main"),
    ],
    header={"height": 60},
    padding="md",
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    id="appshell",
)


app.layout = dmc.MantineProvider(layout)


@callback(
    Output("appshell", "navbar"),
    Input("burger", "opened"),
    State("appshell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run(debug=True)

```

### AppShell components

* `AppShell` - root component, it is required to wrap all other components, used to configure layout properties
* `AppShellHeader` - section rendered at the top of the page
* `AppShellNavbar` - section rendered on the left side of the page
* `AppShellAside` - section rendered on the right side of the page
* `AppShellFooter` - section rendered at the bottom of the page
* `AppShellMain` - main section rendered at the center of the page, has static position, all other sections are offset by its padding
* `AppShellSection` - utility component that can be used to render group of content inside `AppShellNavbar` and `AppShellAside`

### AppShell Configuration
`AppShell` component accepts, `header`, `footer`, `navbar` and `aside` props to configure corresponding sections. It is 
required to set these props if you want to use corresponding components. For example, if you want to use `AppShellHeader`
component, you need to set `header` prop on the `AppShell` component.

### header and footer properties

`header` and `footer` configuration dictionaries are the same and have the following properties:

- `height`: Height of the section: number, string or dict  with breakpoints as keys and height as value
- `collapsed`: boolean; If section is collapsed it is hidden from the viewport and is not offset in `AppShellMain`
- `offset`: boolean; Determines whether the section should be offset by the `AppShellMain`. For example, it is useful if you want to hide header based on the scroll position.

### navbar and aside properties

`navbar` and `aside` configuration dictionaries are the same as well and have the following properties:

- `width`: Width of the section: number, string or dict with breakpoints as keys and width as value 
- `breakpoint`: Breakpoint at which section should switch to mobile mode. In mobile mode the section always has 
100% width and its collapsed state is controlled by the `collapsed.mobile` instead of `collapsed.desktop` 
- `collapsed`: Determines whether the section should be collapsed.  Example:  {"desktop": False; "mobile": True };

### layout prop
`layout` prop controls how `AppShellHeader` / `AppShellFooter` and `AppShellNavbar` / `AppShellAside` are positioned 
relative to each other. It accepts `alt` and `default` values:

- `alt` – `AppShellNavbar`/`AppShellAside` height is equal to viewport height, `AppShellHeader`/`AppShellFooter` width 
is equal to viewport width less the `AppShellNavbar` and `AppShellAside` width.  See example #7 above.

- `default` – `AppShellNavbar`/`AppShellAside` height is equal to viewport height - `AppShellHeader`/ `AppShellFooter` 
height, `AppShellHeader`/`AppShellFooter` width is equal to viewport width 

### height prop
`height` property in `header` and `footer` configuration dicts works the following way:

- If you pass a number, the value will be converted to rem and used as height at all viewport sizes.
- To change height based on viewport width, use dict with breakpoints as keys and height as values. It works the same way as `style` props.

Examples:
```python
# Height is a number, it will be converted to rem  and used as height at all viewport sizes
dmc.AppShell(
    children=[
        dmc.AppShellHeader("Header")
        # ...
     ],
    header={"height": 48}    
)
```

```python

# Height is an dict with breakpoints:
# - height is 48 when viewport width is < theme.breakpoints.sm
# - height is 60 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg
# - height is 76 when viewport width is >= theme.breakpoints.lg
dmc.AppShell(
    children=[
       dmc.AppShellHeader("Header")
    ],
    header={"height": {"base": 48, "sm": 60, "lg": 76}}    
)
```

### Width configuration
`width` property in `navbar` and `aside`  configuration dictionaries works the following way:

- If you pass a number, the value will be converted to rem and used as width when the viewport is larger than breakpoint.
- To change `width` based on viewport width, use dict with breakpoints as keys and width as values. It works the same way as `style` props. Note that width is always 100% when the viewport is smaller than breakpoint.

Examples

```python
# Width is a number, it will be converted to rem and used as width when viewport is larger than theme.breakpoints.sm
dmc.AppShell(
    children=[
        dmc.AppShellNavbar("Navbar")
        # ...
     ],
    navbar={"width": 48, "breakpoint": "sm"}    
)
```

```python

# Width is an object with breakpoints:
# - width is 100% when viewport width is < theme.breakpoints.sm
# - width is 200 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg
# - width is 300 when viewport width is >= theme.breakpoints.lg
dmc.AppShell(
    children=[
        dmc.AppShellNavbar("Navbar")
        # ...
     ],
    navbar={"width": {"sm": 200, "lg": 300 }, "breakpoint": 'sm' } 
)
```

### padding prop
`padding` prop controls the padding of the `AppShellMain` component. It is important to use it instead of setting padding
on the `AppShellMain` directly because padding of the `AppShellMain` is also used to offset `AppShellHeader`, `AppShellNavbar`, `AppShellAside` and `AppShellFooter` components.

`padding` prop works the same way as `style` props and accepts numbers, strings and dicts with breakpoints as keys and padding as values. You can reference theme.spacing values or use any valid CSS values.

```python
# Padding is always theme.spacing.md
dmc.AppShell(
   # content
   padding="md"
)
```


```python

# Padding is:
# - 10 when viewport width is < theme.breakpoints.sm
# - 15 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg
# - theme.spacing.xl when viewport width is >= theme.breakpoints.lg
dmc.AppShell(
   # content
   padding={"base": 10, "sm": 15, "lg": "xl" }
)
```
### Collapsed navbar/aside configuration
`navbar` and `aside` props have `collapsed` property. The property accepts an dict { mobile: boolean; desktop: boolean } which
allows to configure collapsed state depending on the viewport width.

See example #4 above: Collapsible Navbar on Desktop and Mobile

### withBorder prop
`withBorder` prop is available on `AppShell` and associated sections: `AppShellHeader`, `AppShellNavbar`, `AppShellAside`
and `AppShellFooter`. By default, `withBorder` prop is True – all components have a border on the side that is adjacent 
to the `AppShellMain` component. For example, `AppShellHeader` is located at the top of the page – it has a border on the
bottom side, `AppShellNavbar` is located on the left side of the page – it has a border on the right side.

To remove the border from all components, set `withBorder=False` on the `AppShell`:

```python
dmc.AppShell(withBorder=False)
```

To remove the border from a specific component, set `withBorder=False` on that component:

```python
dmc.AppShell(
   children=[
      dmc.AppShellHeader(withBorder=False)
   ]
)
```



### zIndex prop

`zIndex` prop is available on AppShell and associated sections: `AppShellHeader`, `AppShellNavbar`, `AppShellAside` and `AppShellFooter`.

By default, all sections z-index is 200.

To change z-index of all sections, set `zIndex` prop on the AppShell:

```python
import dash_mantine_components as dmc

dmc.AppShell(
    zIndex=100,
    children=[
        # content
    ]
)
```

To change z-index of individual sections, set `zIndex` prop on each of them:

```python
import dash_mantine_components as dmc

dmc.AppShell(
    children=[
        dmc.AppShellHeader("Header", zIndex=2000),
        dmc.AppShellNavbar("Navbar", zIndex=2000),
    ]
)
```

### Control transitions
Set `transitionDuration` and `transitionTimingFunction` props on the `AppShell` to control transitions:

```python
dmc.AppShell(
   transitionDuration=500,
   transitionTimingFunction="ease"   ,
)
```

### disabled prop
Set `disabled` prop on the `AppShell` to prevent all sections except `AppShellMain` from rendering. It is useful when 
you want to hide the shell on some pages of your application.

```python
dmc.AppShell(disabled=True)
```


### Usage in docs

```python
import dash_mantine_components as dmc

dmc.AppShell(
    [
        dmc.AppShellHeader("Header", px=25),
        dmc.AppShellNavbar("Navbar"),
        dmc.AppShellAside("Aside", withBorder=False),
        dmc.AppShellMain(children=[...]),
    ],
    header={"height": 70},
    padding="xl",    
    navbar={
        "width": 300,
        "breakpoint": "sm",
        "collapsed": {"mobile": True},
    },
    aside={
        "width": 300,
        "breakpoint": "xl",
        "collapsed": {"desktop": False, "mobile": True},
    },
)
```


### 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.


#### AppShell Selectors

| Selector | Static selector            | Description                       |
|----------|-----------------------------|-----------------------------------|
| root     | .mantine-AppShell-root      | Root element (AppShell component) |
| navbar   | .mantine-AppShell-navbar    | AppShell.Navbar root element      |
| header   | .mantine-AppShell-header    | AppShell.Header root element      |
| main     | .mantine-AppShell-main      | AppShell.Main root element        |
| aside    | .mantine-AppShell-aside     | AppShell.Aside root element       |
| footer   | .mantine-AppShell-footer    | AppShell.Footer root element      |
| section  | .mantine-AppShell-section   | AppShell.Section root element     |

#### AppShell CSS Variables

| Selector | Variable                                 | Description                                   |
|----------|------------------------------------------|-----------------------------------------------|
| root     | --app-shell-transition-duration          | Controls transition duration of all children  |
|          | --app-shell-transition-timing-function   | Controls transition timing function of all children |

#### AppShell Data Attributes

| Selector         | Attribute         | Condition                    | Value                                |
|------------------|-------------------|------------------------------|--------------------------------------|
| root             | data-resizing     | User is resizing the window  | –                                    |
| root             | data-layout       | –                            | Value of the `layout` prop           |
| root             | data-disabled     | `disabled` prop is set       | –                                    |
| navbar, header, aside, footer | data-with-border | `withBorder` prop is set either on the AppShell or on the associated component | – |
| section          | data-grow         | `grow` prop is set on the AppShell.Section | – |


### Keyword Arguments
### AppShell
- children (a list of or a singular dash component, string or number; required):
    Content.

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

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

- aside (dict; optional):
    AppShell.Aside configuration, controls width, breakpoints and
    collapsed state. Required if you use AppShell.Aside component.

    `aside` is a dict with keys:

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

- 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.

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

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

- disabled (boolean; optional):
    If set, Navbar, Aside, Header and Footer components be hidden.

- footer (dict; optional):
    AppShell.Footer configuration, controls height, offset and
    collapsed state. Required if you use AppShell.Footer component.

    `footer` is a dict with keys:

- header (dict; optional):
    AppShell.Header configuration, controls height, offset and
    collapsed state. Required if you use AppShell.Header component.

    `header` is a dict with keys:

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

- layout (a value equal to: 'default', 'alt'; optional):
    Determines how Navbar/Aside are arranged relative to
    Header/Footer, `default` by default.

- 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.

- mode (a value equal to: 'fixed', 'static'; optional):
    Determines positioning mode of all sections default 'fixed'.

- navbar (dict; optional):
    AppShell.Navbar configuration, controls width, breakpoints and
    collapsed state. Required if you use AppShell.Navbar component.

    `navbar` is a dict with keys:

- offsetScrollbars (boolean; optional):
    Determines whether Header and Footer components should include
    styles to offset scrollbars. Based on `react-remove-scroll`.
    `True` by default.

- padding (number; optional):
    Controls padding of the main section, `0` by default. !important!:
    use `padding` prop instead of `p`.

- 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):
    Duration of all transitions in ms, `200` by default.

- transitionTimingFunction (optional):
    Timing function of all transitions, `ease` by default.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether associated components should have a border,
    `True` by default.

- zIndex (string | number; optional):
    `z-index` of all associated elements, `200` by default.
#### Navbar

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether component should have a border, overrides
    `withBorder` prop on `AppShell` component.

- zIndex (string | number; optional):
    Component `z-index`, by default inherited from the `AppShell`.
#### Header

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether component should have a border, overrides
    `withBorder` prop on `AppShell` component.

- zIndex (string | number; optional):
    Component `z-index`, by default inherited from the `AppShell`.
#### Aside

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether component should have a border, overrides
    `withBorder` prop on `AppShell` component.

- zIndex (string | number; optional):
    Component `z-index`, by default inherited from the `AppShell`.
#### Footer

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether component should have a border, overrides
    `withBorder` prop on `AppShell` component.

- zIndex (string | number; optional):
    Component `z-index`, by default inherited from the `AppShell`.
#### Section

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- grow (boolean; optional):
    Determines whether the section should take all available space,
    `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.

- 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.

- variant (string; optional):
    variant.

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

## AspectRatio  
Use the Aspect component to maintain responsive consistent width/height ratio.  
Category: Layout  

### Image 

```python
import dash_mantine_components as dmc

component = dmc.AspectRatio(
    dmc.Image(
        src="https://www.nasa.gov/wp-content/uploads/2022/07/web_first_images_release.png",
        alt="Carina Nebula",
    ),
    ratio=4/3,
)
```
### Map embed

```python
import dash_mantine_components as dmc
from dash import html

component = dmc.AspectRatio(
    html.Iframe(
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.3063874233135!2d-74.04668908358428!3d40.68924937933441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue%20of%20Liberty%20National%20Monument!5e0!3m2!1sen!2sru!4v1644262070010!5m2!1sen!2sru",
        title="Google map",
    ),
    ratio=16 / 9,
)
```
### Video embed

```python
import dash_mantine_components as dmc
from dash import html

component = dmc.AspectRatio(
    html.Iframe(
        src="https://www.youtube.com/embed/KsTKREWoVC4",
        title="YouTube video player",
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen",
    ),
    ratio=16 / 9,
)
```
### Inside flex container
By default, `AspectRatio` does not have fixed width and height, it will take as much space as possible in a regular
container. To make it work inside flex container, you need to set `width` or `flex` property.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    dmc.AspectRatio(
        ratio=1,
        style={"flex": "0 0 100px"},
        children=[
            dmc.Image(
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-6.png",
                alt="Avatar",
            )
        ],
    ),
    style={"display": "flex"},
)
```
### 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.


#### AspectRatio Selectors

| Selector | Static selector                 | Description   |
|----------|----------------------------------|---------------|
| root     | .mantine-AspectRatio-root        | Root element  |

---

#### AspectRatio CSS Variables

| Selector | Variable      | Description     |
|----------|---------------|-----------------|
| root     | --ar-ratio    | Aspect ratio    |




### Keyword Arguments
#### AspectRatio

- children (a list of or a singular dash component, string or number; optional)

- 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.

- 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.

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

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

- 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.

- ratio (number; optional):
    Aspect ratio, e.g. `16 / 9`, `4 / 3`, `1920 / 1080`, `1` 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.

- variant (string; optional):
    variant.

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

## Center  
Use Center component to center content vertically and horizontally.  
Category: Layout  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.Center(
    style={"height": 200, "width": "100%"},
    children=[
        dmc.Badge("Free", style={"marginRight": 5}),
        dmc.Anchor("Click now!", href="https://mantine.dev/"),
    ],
)
```
### Inline

To use `Center` with inline elements set `inline` prop. For example, you can center link icon and label:

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Box(
    dmc.Anchor(
        href="https://mantine.dev",
        target="_blank",
        children=dmc.Center(
            [
                DashIconify(
                    icon="tabler:arrow-left",  # Use the Tabler Arrow Left icon
                    width=12,
                    height=12,
                ),
                dmc.Box("Back to Mantine website", ml=5),
            ],
            inline=True,
        ),
    )
)
```
### 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-Card-root | Root element |


### Keyword Arguments
#### Center

- children (a list of or a singular dash component, string or number; optional)

- 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.

- 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.

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

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

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

- inline (boolean; optional):
    Determines whether `inline-flex` should be used instead of `flex`,
    `False` by default.

- 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.

- 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.

- variant (string; optional):
    variant.

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

## Container  
Container is the most basic layout element, it centers content horizontally and adds horizontal padding from theme.  
Category: Layout  

### Simple Example

Container is the most basic layout element, it centers content horizontally and adds horizontal padding from Mantine's 
theme.

Component accepts these props:

  * `size` – controls default max width 
  * `fluid` – overwrites size prop and sets max width to 100%

```python
import dash_mantine_components as dmc
from dash import html

style = {
    "height": 100,
    "border": "1px solid var(--mantine-color-blue-outline)",
    "marginTop": 20,
    "marginBottom": 20,
}

component = html.Div(
    children=[
        dmc.Container("Default container", style=style),
        dmc.Container(
            "xs container with xs horizontal padding", size="xs", px="xs", style=style
        ),
        dmc.Container(
            "200px container with 0px horizontal padding", size=200, px=0, style=style
        ),
    ]
)
```
### Fluid
Set `fluid` prop to make container fluid, it will take 100% of available width, it is the same as setting `size="100%"`.

```python
import dash_mantine_components as dmc
from dash import html


component = dmc.Container(
    "Fluid container has 100% max-width",
    fluid=True,
    h=50,
    bg="var(--mantine-color-blue-light)"
)
```
### Grid strategy

Starting from 2.2.0, `Container` supports `strategy="grid"` prop which enables more features.

Differences from the default `strategy="block"`:

- Uses `display: grid` instead of `display: block`
- Does not include default inline padding
- Does not set `max-width` on the root element (uses grid template columns instead)

Features supported by `strategy="grid"`:

- Everything that is supported by `strategy="block"`
- Children with `data-breakout` attribute take the entire width of the container's parent element
- Children with `data-container` inside `data-breakout` have the same width as the main grid column

Example of using breakout feature:


```python
import dash_mantine_components as dmc
from dash import html


component = dmc.Container(
    [
        dmc.Box("Main Content", bg="var(--mantine-color-indigo-light)", h=50),
        html.Div(
            [
                "Breakout",
                html.Div(
                    "Container inside breakout",
                    style={
                        "backgroundColor": "var(--mantine-color-indigo-filled)",
                        "color": "white",
                        "height": 50,
                    },
                    **{"data-container": ""}
                ),
            ],
            style={
                "backgroundColor": "var(--mantine-color-indigo-light)",
                "marginTop": 16,
            },
            **{"data-breakout": ""}
        ),
    ],
    size=500,
    strategy="grid",
)
```
**Note — Adding custom HTML attributes to Dash components:**

* For `dash-html-components`, you can add custom attributes using Python’s `**` unpacking syntax:

  ```python
  html.Div(**{"data-breakout": ""})
  ```

* For DMC components that support the [Styles API](/styles-api), use the `attributes` prop to pass attributes to elements of the component:

  ```python
  dmc.Paper(attributes={"root": "data-breakout"})
  ```




### 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.


#### Container Selectors

| Selector | Static selector            | Description   |
|----------|-----------------------------|---------------|
| root     | .mantine-Container-root     | Root element  |


#### Container CSS Variables

| Selector | Variable          | Description               |
|----------|-------------------|---------------------------|
| root     | --container-size  | Controls container max-width |




### Keyword Arguments
#### Container

- children (a list of or a singular dash component, string or number; optional)

- 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.

- 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.

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

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

- fluid (boolean; optional):
    Determines whether the container should take 100% of its parent
    width. If set, `size` prop is ignored. `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.

- size (number; optional):
    Sets `max-width` of the container, value is not responsive – it is
    the same for all screen sizes. Numbers are converted to rem.
    Ignored when `fluid` prop is set. `'md'` by default.

- strategy (a value equal to: 'block', 'grid'; optional):
    Centering strategy. Default value: 'block'.

- 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.

- variant (string; optional):
    variant.

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

## Flex  
Use the Flex component to compose elements in a flex container.  
Category: Layout  

### Introduction

### Supported Props

| Prop        | CSS Property     | Theme Key       |
|-------------|------------------|-----------------|
| gap         | gap              | theme.spacing   |
| rowGap      | rowGap           | theme.spacing   |
| columnGap   | columnGap        | theme.spacing   |
| align       | alignItems       | –               |
| justify     | justifyContent   | –               |
| wrap        | flexWrap         | –               |
| direction   | flexDirection    | –               |



### Responsive Props

Flex component props can have responsive values the same way as other style props:

```python
import dash_mantine_components as dmc

component = dmc.Flex(
    [
        dmc.Button("Button 1"),
        dmc.Button("Button 2"),
        dmc.Button("Button 3"),
    ],
    direction={"base": "column", "sm": "row"},
    gap={"base": "sm", "sm": "lg"},
    justify={"sm": "center"},
)
```
### Comparison: Group, Stack, and Flex

`Flex` component is an alternative to `Group` and `Stack`. 
`Flex` is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.

| Feature                    | Group | Stack | Flex |
|----------------------------|-------|-------|------|
| Direction                  | horizontal | vertical | both |
| Equal width children       | ✅     | ❌    | ❌   |
| flex-wrap support          | ✅     | ❌    | ✅   |
| Responsive flexbox props   | ❌     | ❌    | ✅   |




### Browser support
`Flex` uses flexbox gap to add spacing between children. In older browsers, `Flex` children may not have spacing.




### 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-Flex-root | Root element |


### Keyword Arguments
#### Flex

- children (a list of or a singular dash component, string or number; optional)

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

- align (dict; optional):
    `align-items` CSS property. Supports dict for responsive values.

- 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.

- 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.

- columnGap (string | number | dict; optional):
    theme.spacing key, `column-gap` CSS property, or dict for
    responsive values.

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

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

- direction (dict; optional):
    `flex-direction` CSS property. Supports dict for responsive
    values.

- gap (string | number | dict; optional):
    theme.spacing key, `gap` CSS property, or dict for responsive
    values.

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

- justify (dict; optional):
    `justify-content` CSS property.  Supports dict for responsive
    values.

- 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.

- rowGap (string | number | dict; optional):
    theme.spacing key, `row-gap` CSS property, or dict for responsive
    values.

- 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.

- variant (string; optional):
    variant.

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

- wrap (dict; optional):
    `flex-wrap` CSS property. Supports dict for responsive values.

## Grid  
Responsive 12 columns grid system  
Category: Layout  

### Usage

Use Grid component to create layouts with a flexbox grid system.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=6),
        dmc.GridCol(dmc.Box("2", style=style), span=3),
        dmc.GridCol(dmc.Box("3", style=style), span=3),
    ],
    gap="xl",
)
```
### Columns span
`The GridCol` `span` prop controls the ratio of column width to the total width of the row. By default, grid uses 
12 columns layout, so `span` prop can be any number from 1 to 12.

Examples:
```python
dmc.GridCol(span=3)  # 3 / 12 = 25% of row width
dmc.GridCol(span=4)  # 4 / 12 = 33% of row width
dmc.GridCol(span=6)  # 6 / 12 = 50% of row width
dmc.GridCol(span=12) # 12 / 12 = 100% of row width
```
`span` prop also supports dictionary syntax to change column width based on viewport width, it accepts `xs`, `sm`, `md`,
`lg` and `xl` keys and values from 1 to 12. The syntax is the same as in `style` props.

In the following example `span={'base': 12, 'md': 6, 'lg': 3`}:

- `base` – 12 / 12 = 100% of row width when viewport width is less than `md` breakpoint
- `md` – 6 / 12 = 50% of row width when viewport width is between md and `lg` breakpoints
- `lg` – 3 / 12 = 25% of row width when viewport width is greater than `lg` breakpoint


```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span={"base": 12, "md": 6, "lg":3}),
        dmc.GridCol(dmc.Box("2", style=style), span={"base": 12, "md": 6, "lg":3}),
        dmc.GridCol(dmc.Box("3", style=style), span={"base": 12, "md": 6, "lg":3}),
        dmc.GridCol(dmc.Box("4", style=style), span={"base": 12, "md": 6, "lg":3}),
    ],
)
```
### Gap

Set `gap` prop to control spacing between columns. The prop works the same way as `style` props – you can reference
theme.spacing values with `xs`, `sm`, `md`, `lg` and `xl` strings and use dictionary syntax to change gap based on
viewport width.  You can also set gap to a number to set spacing in px.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=4),
        dmc.GridCol(dmc.Box("2", style=style), span=4),
        dmc.GridCol(dmc.Box("3", style=style), span=4),
    ],
    gap={ "base": 5, "xs": "md", "md": "xl", "xl": 50 },
)
```
### Row and column gap
Use `rowGap` and `columnGap` props to set different spacing for rows and columns. `rowGap` and `columnGap` override
`gap` prop if both are set:


```python
import dash_mantine_components as dmc

style = {
    "border": "1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    [
        dmc.GridCol(dmc.Box("1", style=style), span=3),
        dmc.GridCol(dmc.Box("2", style=style), span=3),
        dmc.GridCol(dmc.Box("3", style=style), span=3),
        dmc.GridCol(dmc.Box("4", style=style), span=3),
        dmc.GridCol(dmc.Box("5", style=style), span=3),
        dmc.GridCol(dmc.Box("6", style=style), span=3),
        dmc.GridCol(dmc.Box("7", style=style), span=3),
        dmc.GridCol(dmc.Box("8", style=style), span=3),
    ],
    rowGap="xl",
    columnGap="sm",
)
```
### Grow

Set `grow` prop on Grid to force last row to take 100% of container width.

### Column Offset

Set `offset` prop on `GridCol` component to add gaps to the grid. `offset` prop supports the same syntax as span
prop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=3),
        dmc.GridCol(dmc.Box("2", style=style), span=3),
        dmc.GridCol(dmc.Box("3", style=style), span=3, offset=3),
    ],
    gap="xl",
)
```
### Order
Set the `order` prop on `GridCol` component to change the order of columns. `order` prop supports the same syntax as
`span` prop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12.


```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("2", style=style), span=3, order={"base": 2, "sm": 1, "lg": 3}),
        dmc.GridCol(dmc.Box("3", style=style), span=3, order={"base": 3, "sm": 2, "lg": 2}),
        dmc.GridCol(dmc.Box("1", style=style), span=3, order={"base": 1, "sm": 3, "lg": 1}),
    ],
)
```
### Multiple rows

Once children columns span and offset sum exceeds `columns` prop (defaults to 12), columns are placed on next row.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=4),
        dmc.GridCol(dmc.Box("2", style=style), span=4),
        dmc.GridCol(dmc.Box("3", style=style), span=4),
        dmc.GridCol(dmc.Box("4", style=style), span=4),
    ],
    gap="xl",
)
```
### Justify and Align

Since grid is a flexbox container, you can control justify-content and align-items properties by using `justify` and 
`align` props respectively. Note the minimum height set on column 2 and 3.

```python
import dash_mantine_components as dmc

dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1"), span=4),
        dmc.GridCol(dmc.Box("2", style={"minHeight":80}), span=4),
        dmc.GridCol(dmc.Box("3", style={"minHeight":120}), span=4),
    ],
    justify="center",
    align="stretch",

)
```

### Auto Sized Columns

All columns in a row with `span` or a `breakpoint` of `auto` will have equal size, growing as much as they can to fill the row.
In this example, the second column takes up 50% of the row while the other two columns automatically resize to fill the remaining space.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("span=auto", style=style), span="auto"),
        dmc.GridCol(dmc.Box("span=6", style=style), span=6),
        dmc.GridCol(dmc.Box("span=auto", style=style), span="auto"),
    ],
    gap="xl",
)
```
### Fit Content

If you set `span` or a `breakpoint` to `content`, the column's size will automatically adjust to match the width of its content.

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("content width", style=style), span="content"),
        dmc.GridCol(dmc.Box("2", style=style), span=6),
    ],
    gap="xl",
)
```
### Change columns count
By default, grids uses 12 columns layout, you can change it by setting `columns` prop on `Grid` component. Note that
in this case, columns span and offset will be calculated relative to this value.

In the following example, first column takes 50% with 12 span (12/24), second and third take 25% (6/24):


```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Grid(
    children=[
        dmc.GridCol(dmc.Box("1", style=style), span=12),
        dmc.GridCol(dmc.Box("2", style=style), span=6),
        dmc.GridCol(dmc.Box("3", style=style), span=6),
    ],
    columns=24
)
```
### Container queries
To use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead 
of media queries, set `type='container'`. With container queries, all responsive values are adjusted based on the
container width, not the viewport width.

Note that, when using container queries, it is also required to set `breakpoints` prop to the exact container width values.

To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right
corner of the demo:

```python
import dash_mantine_components as dmc

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Box(
    # Wrapper div is added for demonstration purposes only,
    # it is not required in real projects
    dmc.Grid(
        children=[
            dmc.GridCol(dmc.Box("1", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(dmc.Box("2", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(dmc.Box("3", style=style), span={"base": 12, "md": 6, "lg": 3}),
            dmc.GridCol(dmc.Box("4", style=style), span={"base": 12, "md": 6, "lg": 3}),
        ],
        gap="xl",
        type="container",
        breakpoints={
            "xs": "100px",
            "sm": "200px",
            "md": "300px",
            "lg": "400px",
            "xl": "500px",
        },
    ),
    style={"resize": 'horizontal', "overflow": 'hidden', "maxWidth": '100%', "margin": 24 },
)
```
### overflow: hidden
By default, `Grid` has `overflow: visible` style on the root element. In some cases you might want to change it to
`overflow: hidden` to prevent negative margins from overflowing the grid container. For example, if you use `Grid` 
without parent container which has padding.

```python
dmc.Grid([
    dmc.GridCol("1", span=6),
    dmc.GridCol("2", span=6),
], overflow="hidden")
```


### 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.


#### Grid Selectors

| Selector   | Static selector            | Description                              |
|------------|-----------------------------|------------------------------------------|
| container  | .mantine-Grid-container     | Container element, only used with `type="container"` prop |
| root       | .mantine-Grid-root          | Root element                             |
| inner      | .mantine-Grid-inner         | Columns wrapper                          |
| col        | .mantine-Grid-col           | `Grid.Col` root element                  |

---

#### Grid CSS Variables

| Selector | Variable          | Description                      |
|----------|-------------------|----------------------------------|
| root     | --grid-overflow   | Controls `overflow` property     |
|          | --grid-align      | Controls `align-items` property  |
|          | --grid-justify    | Controls `justify-content` property |


### Keyword Arguments
#### Grid

- children (a list of or a singular dash component, string or number; optional)

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

- align (optional):
    Sets `align-items`, `stretch` by default.

- 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.

- breakpoints (dict; optional):
    Breakpoints values, only applicable when `type="container"` is
    set, ignored when `type` is not set or `type="media"` is set.

    `breakpoints` is a dict with keys:

- 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.

- columnGap (number; optional):
    Column gap, overrides `gap` for horizontal spacing.

- columns (number; optional):
    Number of columns in each row, `12` by default.

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

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

- gap (number; optional):
    Gutter between columns, key of `theme.spacing` or any valid CSS
    value, `'md'` by default.

- grow (boolean; optional):
    Determines whether columns in the last row should expand to fill
    all available space, `False` by default.

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

- justify (optional):
    Sets `justify-content`, `flex-start` by default.

- 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.

- overflow (optional):
    Sets `overflow` CSS property on the root element, `'visible'` by
    default.

- rowGap (number; optional):
    Row gap, overrides `gap` for vertical spacing.

- 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.

- type (a value equal to: 'media', 'container'; optional):
    Determines typeof of queries that are used for responsive styles,
    `'media'` by default.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional)

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

- align (optional):
    Vertical alignment of the column, controls `align-self` CSS
    property.

- 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.

- 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.

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

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

- 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.

- offset (number; optional):
    Column offset on the left side – number of columns that should be
    left empty before this column.

- order (number; optional):
    Column order, can be used to reorder columns at different viewport
    sizes.

- span (number; optional):
    Column span, `12` 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.

- variant (string; optional):
    variant.

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

## Group  
Use Group component to place components in a horizontal flex container.  
Category: Layout  

### Usage

### Align

Since `Group` is a flexbox container, you can control `justify-content` and `align-items` properties by using `justify` 
and `align` props respectively. Note the minimum height set on component 2 and 3 in the example above.

```python

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
    "margin": 2,
    "width": 100
}

target = dmc.Grid(
    children=[
        dmc.Box("1", style=style),
        dmc.Box("2", style={**style, "minHeight": 80}),
        dmc.Box("3", style={**style, "minHeight": 120}),
    ],
)
```



### preventGrowOverflow
`preventGrowOverflow` prop allows you to control how `Group` children should behave when there is not enough space to
fit them all on one line. By default, children are not allowed to take more space than (1 / children.length) * 100%
of parent width (`preventGrowOverflow` is set to True). To change this behavior, set `preventGrowOverflow` to False and 
children will be allowed to grow and take as much space as they need.


```python
import dash_mantine_components as dmc

component = dmc.Box(
    style={"overflow": "hidden"},
    children=[
        dmc.Box(
            maw=500,
            p="md",
            mx="auto",
            bg="var(--mantine-color-blue-light)",
            children=[
                dmc.Text(
                    size="sm",
                    mb=5,
                    children=(
                        "preventGrowOverflow: true – each child width is always limited "
                        "to 33% of parent width (since there are 3 children)"
                    ),
                ),
                dmc.Group(
                    grow=True,
                    wrap="nowrap",
                    children=[
                        dmc.Button("First button", variant="default"),
                        dmc.Button("Second button with large content", variant="default"),
                        dmc.Button("Third button", variant="default"),
                    ],
                ),
                dmc.Text(
                    size="sm",
                    mb=5,
                    mt="md",
                    children=(
                        "preventGrowOverflow: false – children will grow based on their "
                        "content, they can take more than 33% of parent width"
                    ),
                ),
                dmc.Group(
                    grow=True,
                    preventGrowOverflow=False,
                    wrap="nowrap",
                    children=[
                        dmc.Button("First button", variant="default"),
                        dmc.Button("Second button with large content", variant="default"),
                        dmc.Button("Third button", variant="default"),
                    ],
                ),
            ],
        )
    ],
)
```
### Group children
`Group` works correctly only with components. Strings, or numbers may have incorrect styles if `grow` prop is set:

```python
# don't do this
dmc.Group([
    "Some text",
    dmc.Text("Some more text"),
    20,
], grow=True)
```

### Browser support
`Group` uses flexbox `gap` to add spacing between children. In older browsers, `Group` children may not have spacing.

### 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.


#### Group Selectors

| Selector | Static selector        | Description    |
|----------|-------------------------|----------------|
| root     | .mantine-Group-root     | Root element   |



#### Group CSS Variables

| Selector | Variable                 | Description                                                  |
|----------|--------------------------|--------------------------------------------------------------|
| root     | --group-align            | Controls `align-items` property                              |
|          | --group-justify          | Controls `justify-content` property                          |
|          | --group-gap              | Controls `gap` property                                      |
|          | --group-wrap             | Controls `flex-wrap` property                                |
|          | --group-child-width      | Controls max-width of child elements when `grow` and `preventGrowOverflow` are set |



#### Group Data Attributes

| Selector | Attribute   | Condition       |
|----------|-------------|-----------------|
| root     | data-grow   | `grow` prop is set |


### Keyword Arguments
#### Group

- children (a list of or a singular dash component, string or number; optional)

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

- align (optional):
    Controls `align-items` CSS property, `'center'` by default.

- 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.

- 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.

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

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

- gap (string | number; optional):
    Key of `theme.spacing` or any valid CSS value for `gap`, numbers
    are converted to rem, `'md'` by default.

- grow (boolean; optional):
    Determines whether each child element should have `flex-grow: 1`
    style, `False` by default.

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

- justify (optional):
    Controls `justify-content` CSS property, `'flex-start'` by
    default.

- 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.

- preventGrowOverflow (boolean; optional):
    Determines whether children should take only dedicated amount of
    space (`max-width` style is set based on the number of children),
    `True` 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.

- variant (string; optional):
    variant.

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

- wrap (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'wrap', 'nowrap', 'wrap-reverse'; optional):
    Controls `flex-wrap` CSS property, `'wrap'` by default.

## Layout Overview  
This guide gives an overview of layout components available in Dash Mantine components.  
Category: Layout  

### SimpleGrid
Use [SimpleGrid](/components/simplegrid) if you need columns with equal size. The `cols`, `spacing` and `verticalSpacing` props accepts dictionaries to set responsive values based on viewport width.


### Grid
Use [Grid](/components/grid) if you need columns with different sizes.   You can also set spans, spacing, offsets, and ordering and more.


### Group
Use [Group](/components/group) if you want to put items next to each other horizontally.

### Stack
Use [Stack](/components/stack) if you want to put items next to each other vertically


### Flex
Use [Flex](/components/flex) if you want to create both horizontal and vertical flexbox layouts. It's more flexible than `Group` and `Stack` but requires more configuration.


### AspectRatio
Use [AspectRatio](/components/aspectratio) to ensure that content always maintains a specific width-to-height ratio,
no matter the screen size.  Great for images and videos.


### Center
Use [Center](/components/center) component to center content vertically and horizontally.
This example centers an icon with a link with the `inline` prop:


### Container
Use [Container](/components/container) to center content horizontally and add horizontal padding from theme. Good for limiting width and centering content on large screens.


###  Box
[Box](/components/box) is like an `html.Div` but also includes Mantine style props.


### Paper

Use [Paper](/components/paper) to group content visually like a card.  It includes props for background, padding, shadow, borders, and rounded corners.


### AppShell

The [AppShell](/components/appshell) component is a layout component designed to create responsive and consistent app layouts.
It includes:
- `AppShell` - root component, it is required to wrap all other components, used to configure layout properties
- `AppShellHeader` - section rendered at the top of the page
- `AppShellNavbar` - section rendered on the left side of the page
- `AppShellAside` - section rendered on the right side of the page
- `AppShellFooter` - section rendered at the bottom of the page
- `AppShellMain` - main section rendered at the center of the page, has static position, all other sections are offset by its padding
- `AppShellSection` - utility component that can be used to render group of content inside `AppShellNavbar` and `AppShellAside`

This DMC documentation app is built using `AppShell` components.

See the [AppShell](/components/appshell) docs for more info and examples:



## SimpleGrid  
Use SimpleGrid component to create a grid where each column takes equal width. You can use it to create responsive layouts.  
Category: Layout  

### Usage

`SimpleGrid` is a responsive grid system with equal-width columns. It uses CSS grid layout. If you need to set different
widths for columns, use `Grid` component instead.

### spacing and verticalSpacing props
`spacing` prop is used both for horizontal and vertical spacing if `verticalSpacing` is not set:

```python

# `spacing` is used for both horizontal and vertical spacing
dmc.SimpleGrid(spacing="xl")

# `spacing` is used for horizontal spacing, `verticalSpacing` for vertical
dmc.SimpleGrid(spacing="xl", verticalSpacing="lg")
```

### Responsive Props

`cols`, `spacing` and `verticalSpacing` props support object notation for responsive values, 
it works the same way as [style props](/style-props): the object may have `base`, `xs`, `sm`, `md`, `lg` and `xl` key, 
and values from those keys will be applied according to current viewport width.

`cols` prop can be understood from the below example as:

- 1 column if viewport width is less than `sm` breakpoint
- 2 columns if viewport width is between `sm` and `lg` breakpoints
- 5 columns if viewport width is greater than `lg` breakpoint

Same logic applies to `spacing` and `verticalSpacing` props.

Resize browser to see breakpoints behavior.

```python
import dash_mantine_components as dmc
from dash import html

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.SimpleGrid(
    cols={"base": 1, "sm": 2, "lg": 5},
    spacing={"base": 10, "sm": "xl"},
    verticalSpacing={"base": "md", "sm": "xl"},
    children=[
        html.Div("1", style=style),
        html.Div("2", style=style),
        html.Div("3", style=style),
        html.Div("4", style=style),
        html.Div("5", style=style),
    ],
)
```
### Container queries
To use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead
of media queries, set `type='container'`. With container queries, grid columns and spacing will be adjusted based on the
container width, not the viewport width.

Note that, when using container queries, `cols`, `spacing` and `verticalSpacing` props cannot reference `theme.breakpoints`
values in keys. It is required to use exact `px` or `em` values.

To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right
corner of the demo:


```python
import dash_mantine_components as dmc
from dash import html

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = html.Div(
    # Wrapper div is added for demonstration purposes only,
    # it is not required in real projects
    dmc.SimpleGrid(
        type="container",
        cols={"base": 1, "300px": 2, "500px": 5},
        spacing={"base": 10, "300px": "xl"},
        children=[
            html.Div("1", style=style),
            html.Div("2", style=style),
            html.Div("3", style=style),
            html.Div("4", style=style),
            html.Div("5", style=style),
        ],
        p="xs",
    ),
    style={"resize": "horizontal", "overflow": "hidden", "maxWidth": "100%"},
)
```
### Auto-fill columns
Set the `minColWidth` prop to use CSS Grid `auto-fill` to automatically adjust the number of columns based on available
space and minimum column width. When `minColWidth` is set, the cols prop is ignored.


```python
import dash_mantine_components as dmc
from dash import html

style = {
    "border": "1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.SimpleGrid(
    minColWidth="200px",
    children=[
        html.Div("1", style=style),
        html.Div("2", style=style),
        html.Div("3", style=style),
        html.Div("4", style=style),
        html.Div("5", style=style),
    ],
)
```
### auto-fill vs auto-fit

By default, `minColWidth` uses `auto-fill` behavior. You can change it to `auto-fit` with the
`autoFlow` prop. The difference between the two:

- `auto-fill` creates as many tracks as possible without overflowing the container, leaving empty tracks if items don't fill the row
- `auto-fit` works the same way but collapses empty tracks, allowing items to stretch and fill the remaining space


```python
import dash_mantine_components as dmc
from dash import html

style = {
    "border": "1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.Stack([
    # auto-fill: empty tracks are preserved, items do not stretch
    dmc.Text("auto-fill"),
    dmc.SimpleGrid(
        minColWidth="200px",
        autoFlow="auto-fill",
        children=[
            html.Div("1", style=style),
            html.Div("2", style=style),
            html.Div("3", style=style),
        ],
    ),

    # auto-fit: empty tracks are collapsed, items stretch to fill the row
    dmc.Text("auto-fit"),
    dmc.SimpleGrid(
        minColWidth="200px",
        autoFlow="auto-fit",
        children=[
            html.Div("1", style=style),
            html.Div("2", style=style),
            html.Div("3", style=style),
        ],
    ),
])
```
### Auto rows
Set the `autoRows` prop to control the size of implicitly created grid rows. This is useful when you need all rows to
have equal height or a minimum height.


```python
import dash_mantine_components as dmc
from dash import html

style = {
    "border": "1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.SimpleGrid(
    cols=3,
    autoRows="minmax(100px, auto)",
    children=[
        html.Div("1", style=style),
        html.Div("2", style=style),
        html.Div("3", style=style),
        html.Div("4", style=style),
        html.Div("5", style=style),
    ],
)
```
### 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-SimpleGrid-root | Root element                                     |


### Keyword Arguments
#### SimpleGrid

- children (a list of or a singular dash component, string or number; optional)

- 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.

- autoFlow (a value equal to: 'auto-fit', 'auto-fill'; optional):
    Grid repeat type when minColWidth is set @,default,'auto-fill'.

- autoRows (string; optional):
    Sets the size of implicitly created grid rows.

- 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.

- cols (number; optional):
    Number of columns, `1` by default.

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

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

- 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:

- minColWidth (string | number; optional):
    Minimum column width when using auto-fit/auto-fill. When set, cols
    prop is ignored.

- 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.

- spacing (number; optional):
    Spacing between columns, `'md'` 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.

- type (a value equal to: 'media', 'container'; optional):
    Determines typeof of queries that are used for responsive styles,
    'media' by default.

- variant (string; optional):
    variant.

- verticalSpacing (number; optional):
    Spacing between rows, `'md'` by default.

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

## Space  
Use the Space component to add horizontal or vertical spacing from theme.  
Category: Layout  

### Simple Example

Space component can be customized with two props: `h` and `w`, shortcuts for height and width. These can take either 
values from Mantine's theme i.e. xs, sm, md, lg, xl or number.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Group([dmc.Badge("Badge 1"), dmc.Badge("Badge 2")]),
        dmc.Space(h="xl"),
        dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w="lg"), dmc.Badge("Badge 2")]),
        dmc.Space(h=30),
        dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w=45), dmc.Badge("Badge 2")]),
    ]
)
```
### Where to use

In most cases, you would want to use margin props instead of `Space` when working with Mantine components:

```python
import dash_mantine_components as dmc
from dash import html

html.Div([
    dmc.Text("First line"),    
    dmc.Text("Second line", mt="md"),    
])
```

But when you work with other components like `html` or `dcc`, you do not have access to Mantine's theme spacing,
and you may want to use dmc.Space component:

```python
import dash_mantine_components as dmc
from dash import html

html.Div([
    html.P("First line"),
    dmc.Space(h="md"),    
    html.P("Second line"),    
])
```


### Keyword Arguments
#### Space

- children (a list of or a singular dash component, string or number; optional)

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

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

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

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

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

- 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.

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

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

## Splitter  
Resizable split pane layout  
Category: Layout  

### Usage

`Splitter` component provides resizable split pane layout.

```python
import dash_mantine_components as dmc

component = dmc.Splitter(
    h=200,
    classNames={"pane": "splitter-examples"},
    children=[
        dmc.SplitterPane(
            "First pane",
            defaultSize=50,
            min=20,
            bg="blue",
        ),
        dmc.SplitterPane(
            "Second pane",
            defaultSize=50,
            min=20,
            bg="teal",
        ),
    ],
)
```
### CSS units

`SplitterPane` `defaultSize`, `min` and `max` props accept CSS units in addition to plain numbers:

* A plain `number` or a `%` string (`'30%'`) is a flexible size – the pane shares the leftover
  space with other flexible panes.
* A `px` or `rem` string (`'240px'`, `'15rem'`) is a fixed size – the pane keeps its pixel size
  when the container is resized and only changes when its own handle is dragged.

`sizes`  use the unit the pane was declared with: a `'240px'` pane stays `'240px'`,
a flexible pane reports a percentage. When the container is smaller than the sum of the fixed panes,
fixed panes shrink proportionally.


```python
import dash_mantine_components as dmc

component = dmc.Splitter(
    h=200,
    classNames={"pane": "splitter-examples"},
    children=[
        dmc.SplitterPane(
            "Fixed 240px sidebar",
            defaultSize="240px",
            min="160px",
            max="50%",
            bg="blue",
        ),
        dmc.SplitterPane(
            "Flexible content",
            defaultSize=100,
            bg="teal",
        ),
    ],
)
```
### Vertical orientation

Set `orientation="vertical"` to split panes vertically:


```python
import dash_mantine_components as dmc

component = dmc.Splitter(
    orientation="vertical",
    h=300,
    classNames={"pane": "splitter-examples"},
    children=[
        dmc.SplitterPane(
            "Top pane",
            defaultSize=60,
            min=20,
            bg="blue",
        ),
        dmc.SplitterPane(
            "Bottom pane",
            defaultSize=40,
            min=20,
            bg="teal",
        ),
    ],
)
```
### Collapsible panes

Set `collapsible` prop on `SplitterPane` to allow the pane to be collapsed
by dragging past its minimum size.

The `collapsed` prop is a list of indices of collapsed panes. Set this prop to collapse or expand collapsible panes,
restoring their previous sizes. Updated when panes are collapsed or expanded.


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

component = dmc.Box([
    dmc.Splitter(
        id="splitter-collapse",
        h=200,
        classNames={"pane": "splitter-examples"},
        children=[
            dmc.SplitterPane(
                "Collapsible sidebar",
                collapsible=True,
                defaultSize=30,
                min=20,
                bg="blue",
            ),
            dmc.SplitterPane(
                "Main content",
                defaultSize=70,
                min=30,
                bg="teal",
            ),
        ],
    ),
    dmc.Button("Toggle Sidebar", id="splitter-collapse-toggle-button", mt="md")
])

@callback(
    Output("splitter-collapse", "collapsed"),
    Input("splitter-collapse-toggle-button", "n_clicks"),
    State("splitter-collapse", "collapsed"),
    prevent_initial_call=True,
)
def toggle_sidebar(n_clicks, collapsed):
    return [0] if not collapsed or 0 not in collapsed else []
```
### Set pane sizes
Use the `sizes` prop to set the size of each pane. You can update it in a callback to let users switch between 
predefined layouts or display the current pane sizes.

When resizing by dragging, sizes updates when the user releases the handle. It updates immediately when resizing with
the keyboard, collapsing or expanding a pane, or double-clicking a handle to reset the sizes.

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

component = dmc.Box([
        dmc.Splitter(
        h=200,
        mb="md",
        classNames={"pane": "splitter-examples"},
        resetOnDoubleClick=True,
        id="splitter-sizes",
        children=[
            dmc.SplitterPane(
                "Panel A (50%)",
                id="panel-a",
                defaultSize=50,
                min=20,
                bg="blue",
            ),
            dmc.SplitterPane(
                "Panel B (50%)",
                id="panel-b",
                defaultSize=50,
                min=20,
                bg="teal",
            ),
        ],
    ),
    dmc.Button("30/70", id="button-30-70", mr="sm"),
    dmc.Button("50/50", id="button-50-50", mr="sm"),
    dmc.Button("70/30", id="button-70-30"),
])


@callback(
    Output("splitter-sizes", "sizes"),
    Input("button-30-70", "n_clicks"),
    Input("button-50-50", "n_clicks"),
    Input("button-70-30", "n_clicks"),
    prevent_initial_call=True
)
def handle_size_buttons_click(n_clicks_30_70, n_clicks_50_50, n_clicks_70_30):
    if ctx.triggered_id == "button-30-70":
        return [30, 70]
    elif ctx.triggered_id == "button-70-30":
        return [70, 30]
    else:
        return [50, 50]

@callback(
    Output("panel-a", "children"),
    Output("panel-b", "children"),
    Input("splitter-sizes", "sizes"),
    prevent_initial_call=True
)
def handle_size_change(sizes):
    sizes = sizes or [50, 50]
    return f"Panel A ({sizes[0]:.0f}%)", f"Panel B ({sizes[1]:.0f}%)"
```
### Multiple panes

`Splitter` supports any number of panes. Handles are automatically rendered between panes:


```python
import dash_mantine_components as dmc

component = dmc.Splitter(
    h=200,
    classNames={"pane": "splitter-examples"},
    children=[
        dmc.SplitterPane(
            "First",
            defaultSize=25,
            min=10,
            bg="blue",
        ),
        dmc.SplitterPane(
            "Second",
            defaultSize=50,
            min=10,
            bg="teal",
        ),
        dmc.SplitterPane(
            "Third",
            defaultSize=25,
            min=10,
            bg="grape",
        ),
    ],
)
```
### Nested splitters

You can nest `Splitter` components to create complex layouts:

```python
import dash_mantine_components as dmc

component = dmc.Splitter(
    h=350,
    children=[
        dmc.SplitterPane(
            "Sidebar",
            defaultSize=30,
            min=15,
            bg="blue",
            classNames={"pane": "splitter-examples"},
        ),
        dmc.SplitterPane(
            defaultSize=70,
            min=30,
            children=[
                dmc.Splitter(
                    orientation="vertical",
                    h="100%",
                    children=[
                        dmc.SplitterPane(
                            "Editor",
                            defaultSize=60,
                            min=20,
                            bg="teal",
                            classNames={"pane": "splitter-examples"},
                        ),
                        dmc.SplitterPane(
                            "Terminal",
                            defaultSize=40,
                            min=20,
                            bg="grape",
                            classNames={"pane": "splitter-examples"},
                        )
                    ]
                )
            ]
        )
    ],
)
```
### Redistribute

When using multiple panes, set `redistribute` prop to control how space is borrowed from
non-adjacent panels when the immediate neighbor is at its min/max:


```python
import dash_mantine_components as dmc

component = dmc.Splitter(
    redistribute="nearest",
    h=200,
    classNames={"pane": "splitter-examples"},
    children=[
        dmc.SplitterPane(
            "Panel A",
            defaultSize=25,
            min=10,
            bg="blue",
        ),
        dmc.SplitterPane(
            "Panel B",
            defaultSize=25,
            min=10,
            bg="teal",
        ),
        dmc.SplitterPane(
            "Panel C",
            defaultSize=25,
            min=10,
            bg="grape",
        ),
        dmc.SplitterPane(
            "Panel D",
            defaultSize=25,
            min=10,
            bg="orange",
        ),
    ],
)
```
### Line Size, Line Color, Show Handle


- Use  the `lineSize` prop to control the thickness of the separator line between panes
- Use `handleColor` to set the line color. The default is the body color, which may blend into panes without a background color.
- Use `withHandle` prop to display or hide the handle


### Thumb styling

- Use `thumbIcon` to use a different grip icon.
- Use the styles API to change the background color of the thumb.  By default, it's the body color.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

from docs.checkbox import iconcolor

component = dmc.Splitter(
    h=200,
    classNames={"pane": "splitter-examples"},
    handleIcon=DashIconify(icon="fa7-solid:grip-lines-vertical"),
    styles={
        "handle": {"backgroundColor": "var(--mantine-color-red-filled)"},
        "thumb": {
            "backgroundColor": "var(--mantine-color-green-filled)",
            "color": "var(--mantine-color-white)"
        },
    },
    bd="1px solid var(--mantine-color-default-border)",
    children=[
        dmc.SplitterPane(
            "First pane",
            defaultSize=50,
            min=20,
        ),
        dmc.SplitterPane(
            "Second pane",
            defaultSize=50,
            min=20,
        ),
    ],
)
```
### Don't Wrap SplitterPane

`Splitter` component relies on `SplitterPane` order. Wrapping `SplitterPane` in another component is not supported,
`SplitterPane` must be a direct child of `Splitter`.

```python

dmc.Splitter(
    children=[
        dmc.SplitterPane("First pane"),
        # will not work - do not wrap SplitterPane in another component
        dmc.Box(dmc.SplitterPane("Second pane")),
    ]
)
```


### 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.


#### Splitter Selectors


| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Splitter-root | Root element |
| pane | .mantine-Splitter-pane | Pane element (`SplitterPane` component) |
| handle | .mantine-Splitter-handle | Handle element between panes, contains the separator line and the thumb |
| thumb | .mantine-Splitter-thumb | Thumb element inside the handle, contains the grip icon |


#### Splitter CSS Variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --splitter-line-size | Controls the thickness of the separator line between panes |
| root | --splitter-handle-color | Controls the color of the separator line between panes |


### Keyword Arguments
#### Splitter

- children (a list of or a singular dash component, string or number; optional):
    SplitterPane components must be direct children of Splitter. Put
    containers, content, or nested splitters inside a pane.
    SplitterPane defines the pane's size   and behavior within
    Splitter.

- 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.

- 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.

- collapsed (list of numbers; optional):
    Indices of collapsed panes. Set this prop to collapse or expand
    collapsible panes, restoring their previous sizes. Updated when
    panes are collapsed or expanded.

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

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

- handleColor (string; optional):
    Key of theme.colors or any valid CSS color for the separator line.

- handleIcon (a list of or a singular dash component, string or number; optional):
    Custom icon displayed in the handle thumb.

- 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`.

- lineSize (string | number; optional):
    CSS value for separator line thickness between panes Default
    value: 2.

- 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.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Layout direction, '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.

- redistribute (a value equal to: 'nearest', 'equal'; optional):
    How space is borrowed from non-adjacent panes at their size
    limits.

- resetOnDoubleClick (boolean; optional):
    Restore adjacent panes to their default ratio when a handle is
    double-clicked.

- shiftStep (number; optional):
    Keyboard step when Shift is held. A number or a CSS value with
    units, such as "50%", "200px", or "10rem". Default 10.

- sizes (list of numbers; optional):
    Pane sizes. Updated on release after dragging and immediately for
    keyboard resizing, collapse/expand, and double-click reset. Each
    value keeps the unit it was declared in (number/`%` flexible,
    `px`/`rem` fixed).

- step (number; optional):
    Keyboard arrow step. Numbers and percentages are relative; px and
    rem are fixed. default 1.

- 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.

- variant (string; optional):
    variant.

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

- withHandle (boolean; optional):
    Determines whether the handle thumb is displayed, True by default.
#### SplitterPane

- children (a list of or a singular dash component, string or number; optional):
    Pane content.

- 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.

- 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.

- collapseThreshold (number; optional):
    Size below which the pane snaps to collapsed, defaults to min.

- collapsible (boolean; optional):
    Determines whether the pane can be collapsed, False by default.

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

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

- defaultSize (number; required):
    Initial size. Numbers and percentage strings are flexible sizes;
    px and rem strings are fixed sizes.

- 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:

- max (number; optional):
    Maximum pane size, unlimited by default.

- min (number; optional):
    Minimum pane size, 0 by default.

- 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.

- 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.

- variant (string; optional):
    variant.

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

## Stack  
Use Stack component to compose elements and components in a vertical flex container  
Category: Layout  

### Usage

`Stack` is a vertical flex container. If you need a horizontal flex container, use `Group` component instead. If you
need to have full control over flex container properties, use `Flex` component.

Adjust stack styles with `align`, `justify`, and `gap` props.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Button("1", variant="outline"),
        dmc.Button("2", variant="outline"),
        dmc.Button("3", variant="outline"),
    ],
    align="center",
    gap="xl",
)
```
### Interactive Demo

### 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.


#### Stack Selectors

| Selector | Static selector        | Description    |
|----------|-------------------------|----------------|
| root     | .mantine-Stack-root     | Root element   |



#### Stack CSS Variables

| Selector | Variable         | Description                     |
|----------|------------------|---------------------------------|
| root     | --stack-align    | Controls `align-items` property |
|          | --stack-justify  | Controls `justify-content` property |
|          | --stack-gap      | Controls `gap` property         |



### Keyword Arguments
#### Stack

- children (a list of or a singular dash component, string or number; optional)

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

- align (optional):
    Controls `align-items` CSS property, `'stretch'` by default.

- 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.

- 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.

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

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

- gap (string | number; optional):
    Key of `theme.spacing` or any valid CSS value to set `gap`
    property, numbers are converted to rem, `'md'` by default.

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

- justify (optional):
    Controls `justify-content` CSS property, `'flex-start'` by
    default.

- 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.

- 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.

- variant (string; optional):
    variant.

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

## Box  
Base component for all Mantine components  
Category: Miscellaneous  

### Usage

The `Box` component serves as a  base for all other components and can be used as a replacement for `html.Div` as a basic container.

The key advantage of using `Box` is its support for [Style Props](/style-props), allowing for cleaner, more readable styling directly within the component.

### Example
Both examples below produce the same result:

```python
# Using html.Div
html.Div(
    [
        # your content here
    ],
    style={"marginTop": 8, "padding": 24}
)

# Using dmc.Box with Style Props
dmc.Box(
    [
        # your content here
    ],
    mt=8, p=24
)

```

> Please see the [Style Props](/style-props) section for more information.




### Keyword Arguments
#### Box

- children (a list of or a singular dash component, string or number; optional)

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

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

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

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

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

- 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.

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

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

## Collapse  
Use the Collapse component to animate presence with slide down/up transition  
Category: Miscellaneous  

### Simple Example


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

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-btn", n_clicks=0),
    dmc.Collapse(
        children=dmc.Text("Hello World!", my="lg"),
        opened=False,
        id="collapse-simple"
    )
])

@callback(
    Output("collapse-simple", "opened"),
    Input("collapse-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
### Horizontal Orientation Example

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

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-horizontal-btn", n_clicks=0),
    dmc.Collapse(
        children=dmc.Text("Hello World!", my="lg", w=200, bg="blue.3", c="white", p="lg"),
        orientation="horizontal",
        opened=False,
        id="collapse-horizontal"
    )
], h=120)

@callback(
    Output("collapse-horizontal", "opened"),
    Input("collapse-horizontal-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
### Change transition
Set following props to control transition:

- `transitionDuration` – duration in ms
- `transitionTimingFunction` – [CSS timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) ("ease", "linear", etc.), defaults to "ease"

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

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-transition-btn", n_clicks=0),
    dmc.Collapse(
        children=dmc.Text("Hello World!", my="lg"),
        opened=False,
        transitionDuration=1000,
        transitionTimingFunction="linear",
        id="collapse-transition"
    )
])

@callback(
    Output("collapse-transition", "opened"),
    Input("collapse-transition-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
### Nested Collapse components

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

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-root-btn", n_clicks=0, mb="sm", size="lg"),
    dmc.Collapse(
        children=dmc.Box([
            dmc.Text("Hello World!", mt="lg"),
            dmc.Button(
                "Toggle Content",
                id="collapse-inner-btn",
                n_clicks=0,
                variant="outline",
                size="sm",
                my="lg",
                ml="lg"
            ),
            dmc.Collapse(children= dmc.Text("Hello Nested Worlds!", ml="lg"), id="collapse-inner")
        ]),
        opened=False,
        id="collapse-root"
    )
])

@callback(
    Output("collapse-root", "opened"),
    Input("collapse-root-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True


@callback(
    Output("collapse-inner", "opened"),
    Input("collapse-inner-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
### Keyword Arguments
#### Collapse

- children (a list of or a singular dash component, string or number; optional):
    Content.

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

- animateOpacity (boolean; optional):
    Determines whether opacity should be animated, `True` by default.

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

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

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

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

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

- keepMounted (boolean; optional):
    If set, the element is kept in the DOM when collapsed. When
    `True`, React 19 `Activity` is used to preserve state while
    collapsed. When `False`, the element is unmounted after the exit
    animation. default True.

- keepMountedMode (a value equal to: 'activity', 'display-none'; optional):
    Controls how the element is hidden when `keepMounted` is set:
    `'activity'` – hidden with React 19 `Activity` component,
    `'display-none'` – hidden with `display: none` styles default
    'activity'.

- 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.

- opened (boolean; default False):
    Opened state.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Collapse orientation default 'vertical'.

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

- transitionDuration (number; optional):
    Transition duration in ms, `200` by default.

- transitionTimingFunction (string; optional):
    Transition timing function, default value is `ease`.

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

## Divider  
Use Divider component as an alternative to html.Hr.  
Category: Miscellaneous  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Divider(variant="solid"),
        dmc.Divider(variant="dashed"),
        dmc.Divider(variant="dotted"),
    ],
)
```
### With Label

You can provide `label` and `labelPosition` to customize dmc.Divider.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Divider(label="Click on update button to refresh"),
        dmc.Divider(label="Divider with centered content", labelPosition="center"),
        dmc.Divider(label="Divider with content on the right", labelPosition="right"),
    ],
)
```
### Different Sizes

Set the `size` property to change the size of the divider.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    children=[
        dmc.Divider(size="xs"),
        dmc.Divider(size="sm"),
        dmc.Divider(size="md"),
        dmc.Divider(size="lg"),
        dmc.Divider(size="xl"),
        dmc.Divider(size=10),
    ],
)
```
### Vertical Divider

Divider can be used in vertical orientations by setting `orientation="vertical"` and providing it some height.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Badge("Badge 1"),
        dmc.Divider(orientation="vertical", style={"height": 20}),
        dmc.Badge("Badge 2"),
        dmc.Divider(orientation="vertical", style={"height": 20}),
        dmc.Badge("Badge 3"),
    ]
)
```
### With Color

Set the Divider color from one of the colors of Mantine default theme using the `color` prop.

```python
import dash_mantine_components as dmc

component = dmc.Divider(color="red")
```
### 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-Divider-root  | Root element  |
| label | .mantine-Divider-label | Label element |


### Keyword Arguments
#### Divider

- 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.

- 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 value, by default
    value depends on color scheme.

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

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

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

- label (a list of or a singular dash component, string or number; optional):
    Divider label, visible only when `orientation` is `horizontal`.

- labelPosition (a value equal to: 'left', 'right', 'center'; optional):
    Controls label position, `'left'` by default.

- 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.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Controls orientation, `'horizontal'` by default.

- size (number; optional):
    Controls width/height (depends on orientation), `'xs'` 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.

- variant (string; optional):
    variant.

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

## Marquee  
Create continuous scrolling animation for content  
Category: Miscellaneous  

### Usage

`Marquee` component creates a continuous scrolling animation for its children.
It is commonly used for displaying logos, testimonials, or any repeating content.

Set a width on the Marquee children to ensure smooth scrolling when the content repeats.

```python
import dash_mantine_components as dmc

component = dmc.Marquee(
    children=[
        dmc.Badge("Python", color="red", variant="light", w=80),
        dmc.Badge("Plotly", color="blue", variant="light", w=80),
        dmc.Badge("Dash", color="violet", variant="light", w=80),
        dmc.Badge("Mantine", color="yellow", variant="light", w=80),
        dmc.Badge("React", color="teal", variant="light", w=80),
    ],
    gap="lg"
)
```
### Pause on hover

Set `pauseOnHover` prop to pause the animation when the user hovers over the component:


```python
import dash_mantine_components as dmc


component = dmc.Marquee(
    children=[
        dmc.Badge("Python", color="red", variant="light", w=80),
        dmc.Badge("Plotly", color="blue", variant="light", w=80),
        dmc.Badge("Dash", color="violet", variant="light", w=80),
        dmc.Badge("Mantine", color="yellow", variant="light", w=80),
        dmc.Badge("React", color="teal", variant="light", w=80),
    ],
    pauseOnHover=True,
)
```
### Vertical orientation

Set `orientation="vertical"` to scroll content vertically. Note that you need to set
a fixed height on the container for vertical scrolling:


```python
import dash_mantine_components as dmc


component = dmc.Marquee(
    children=[
        dmc.Badge("Python", color="red", variant="light", w=80),
        dmc.Badge("Plotly", color="blue", variant="light", w=80),
        dmc.Badge("Dash", color="violet", variant="light", w=80),
        dmc.Badge("Mantine", color="yellow", variant="light", w=80),
        dmc.Badge("React", color="teal", variant="light", w=80),
    ],
    h=300,
    orientation="vertical",
)
```
### Multiple rows

You can combine multiple `Marquee` components with different directions to create
more complex layouts:


```python
import dash_mantine_components as dmc

marquee_content = [
    dmc.Badge("Python", color="red", variant="light", w=80),
    dmc.Badge("Plotly", color="blue", variant="light", w=80),
    dmc.Badge("Dash", color="violet", variant="light", w=80),
    dmc.Badge("Mantine", color="yellow", variant="light", w=80),
    dmc.Badge("React", color="teal", variant="light", w=80),
]

component = dmc.Stack([
    dmc.Marquee(marquee_content),
    dmc.Marquee(marquee_content, reverse=True),
])
```
### Fade edges

By default, `Marquee` displays gradient fade on edges to create a smooth transition effect.
You can customize the fade using the following props:

* `fadeEdges` – enables/disables fade gradient (default: `true`)
* `fadeEdgeColor` – color of the fade gradient (default: `var(--mantine-color-body)`)
* `fadeEdgeSize` – size of the fade area (default: `5%`)


```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Box(
            [
                dmc.Text("Default fade (5%)", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="red", variant="light", w=80),
                        dmc.Badge("Plotly", color="blue", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="yellow", variant="light", w=80),
                    ],
                    gap="lg",
                ),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("Larger fade (15%)", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="red", variant="light", w=80),
                        dmc.Badge("Plotly", color="blue", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="yellow", variant="light", w=80),
                    ],
                    gap="lg",
                    fadeEdgeSize="15%",
                ),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("Custom fade color", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="red", variant="light", w=80),
                        dmc.Badge("Plotly", color="blue", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="yellow", variant="light", w=80),
                    ],
                    gap="lg",
                    fadeEdgeColor="var(--mantine-color-red-light)",
                ),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("No fade", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="blue", variant="light", w=80),
                        dmc.Badge("Plotly", color="indigo", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="teal", variant="light", w=80),
                    ],
                    gap="lg",
                    fadeEdges=False,
                ),
            ]
        ),
    ]
)
```
### Customization

Use the following props to customize the marquee behavior:

* `reverse` – reverses animation direction
* `repeat` – number of times children are repeated (default: 4)
* `duration` – animation duration in ms (default: 100000)
* `gap` – gap between repeated children, key of `theme.spacing` or any valid CSS 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.



#### Marquee selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Marquee-root | Root element |
| content | .mantine-Marquee-content | Animated scrolling container |
| group | .mantine-Marquee-group | Repeated children wrapper |

#### Marquee CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --marquee-duration | Controls animation duration |
| root | --marquee-gap | Controls gap between items |
| root | --marquee-repeat | Number of times content is repeated |
| root | --marquee-fade-color | Controls the fade edge gradient color |
| root | --marquee-fade-size | Controls the size of the fade gradient |

#### Marquee data attributes

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| root | data-orientation | Value depends on `orientation` prop | horizontal \| vertical |
| root | data-reverse | `reverse` prop is set | - |
| root | data-pause-on-hover | `pauseOnHover` prop is set | - |
| root | data-fade-edges | `fadeEdges` prop is `true` (default) | - |


### Keyword Arguments
#### Marquee

- children (a list of or a singular dash component, string or number; optional):
    Content to scroll.

- 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.

- 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.

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

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

- duration (number; optional):
    Animation duration in ms, `100000` by default.

- fadeEdgeColor (string; optional):
    Color of the fade gradient, `'var(--mantine-color-body)'` by
    default.

- fadeEdgeSize (string; optional):
    Size of the fade gradient, `'5%'` by default.

- fadeEdges (boolean; optional):
    Whether to show gradient fade on edges, `True` by default.

- gap (number; optional):
    Gap between repeated children, key of `theme.spacing` or any valid
    CSS value, `'md'` 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.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Scroll orientation, `'horizontal'` by default. Set a fixed height
    (e.g. `h=300`) when using `'vertical'`.

- pauseOnHover (boolean; optional):
    Pauses animation on hover, `False` by default.

- repeat (number; optional):
    Number of times children are repeated inline for seamless
    scrolling, `4` by default.

- reverse (boolean; optional):
    Reverses animation direction, `False` 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.

- variant (string; optional):
    variant.

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

## Paper  
Render white or dark background depending on color scheme with Paper component with border, shadow, etc.  
Category: Miscellaneous  

### Introduction

Paper component renders white (or theme.colors.dark[7] for dark theme) background with shadow, border-radius and
padding from theme.

### Shadow

```python
import dash_mantine_components as dmc

dmc.Paper(
    children=[],
    shadow="xs",
)
```

### Padding

```python
import dash_mantine_components as dmc

dmc.Paper(
    children=[],
    p="xs", # or p=10 for padding of 10px
)
```

### Radius

```python
import dash_mantine_components as dmc

dmc.Paper(
    children=[],
    radius="sm", # or p=10 for border-radius of 10px
)
```

### 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-Paper-root | Root element |


### Keyword Arguments
#### Paper

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

- 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.

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

- shadow (optional):
    Key of `theme.shadows` or any valid CSS value to set `box-shadow`.

- 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.

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Adds border to the root element.

## ScrollArea  
Use the ScrollArea component to customize scrollbars.  
Category: Miscellaneous  

### Introduction

The ScrollArea component supports the following props:

- `type` defines scrollbars behavior:
    - `hover` - scrollbars are visible on hover
    - `scroll` - scrollbars are visible on scroll
    - `auto` - similar to `overflow: auto` - scrollbars are always visible when the content is overflowing
    - `always` - same as auto but scrollbars are always visible regardless of whether the content is overflowing
    - `never` - scrollbars are always hidden
- `offsetScrollbars` - offset scrollbars with padding
    - x – adds padding to offset horizontal scrollbar only
    - y – adds padding to offset vertical scrollbar only
    - xy – adds padding to offset both scrollbars
    - present – adds padding only when scrollbars are visible

- `scrollbarSize` - scrollbar size, controls scrollbar and thumb width/height
- `scrollHideDelay` - delay in ms to hide scrollbars, applicable only when type is hover or scroll
- `overscrollBehavior` – controls overscroll-behavior of the viewport
- `scrollTo` sets scroll position of the viewport

This example has a vertical scroll bar. 

This is how the ScrollArea height and width is defined in the example above 

```python

html.Div(
    [
        dmc.Title("Charizard (Pokémon)", order=3),
        dmc.ScrollArea(
            h=250, w=350,
            children = dmc.Paper(dmc.Text(text), withBorder=True),        
        )
    ]
)
```
### Horizontal scrollbars

The horizontal scroll bar will be displayed when the content of the ScrollArea is wider than the ScrollArea.

```python
import dash_mantine_components as dmc

from docs.scrollarea.text import text

component = dmc.Center(
    dmc.ScrollArea(
        h=250,
        w=350,
        children=dmc.Paper(
            [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600
        ),
    ),
)
```
### Disable horizontal scrollbars
To disable horizontal scrollbars set `scrollbars="y"` prop:


```python
import dash_mantine_components as dmc

from docs.scrollarea.text import text

component = dmc.Center(
    dmc.ScrollArea(
        h=250,
        w=350,
        scrollbars="y",
        children=dmc.Paper(
            [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600
        ),
    ),
)
```
### Vertical scrollbar position
By default, the vertical scrollbar follows the inline-end edge: it is rendered on the right side in LTR and on the left
side in RTL. Set the `verticalScrollbarPosition` prop to `left` or `right` to pin the vertical scrollbar to a physical
side regardless of direction.

This is useful for RTL applications where users expect the vertical scrollbar to stay on the right, matching the behavior
of most desktop software (Windows, Office, Gmail, etc.). The prop also realigns the offset padding, the corner and the
horizontal scrollbar gap, so it works correctly with `offsetScrollbars` and `scrollbars="xy"`. When the prop is omitted,
the default direction-based behavior is preserved.

### Scroll To

The `scrollTo` prop sets the scroll position of the viewport with the following options:

  * `top` – The vertical position as pixels (number) or percentage (string) from '0%' to '100%'
  * `left` – The horizontal position as pixels (number) or percentage (string) from '0%' to '100%'
  * `behavior` – scroll behavior: `auto` (instant) or `smooth` (animated), `smooth` by default

For example:

```python
# Scroll to specific pixel positions
dmc.ScrollArea(scrollTo={"top": 100, "left": 50})

# Scroll to percentage positions
dmc.ScrollArea(scrollTo={"top": "25%", "left": "75%"})

# Mixed usage
dmc.ScrollArea(scrollTo={"top": 200, "left": "50%", "behavior": "auto"})
```

---

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


content = [
    dmc.Box([
        dmc.Title(f"Section {i}", order=4, mt="sm", id=f"section-{i}"),
        dmc.Text("""
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Dicta perspiciatis reiciendis voluptate eaque itaque quos.
            Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos
            necessitatibus expedita delectus veniam culpa!            
        """)
    ])
    for i in range(1, 11)
]

component = dmc.Box([
    dmc.ScrollArea(
        content,
        id="scrollArea",
        h=250, w=350,
    ),
    dmc.Group([
        dmc.Button("Scroll to Top", id="scrollto-top"),
        dmc.Button("Scroll to Middle", id="scrollto-middle"),
        dmc.Button("Scroll to Bottom", id="scrollto-bottom"),
    ], mt="lg"),
])


@callback(
    Output("scrollArea", "scrollTo"),
    Input("scrollto-top", "n_clicks"),
    Input("scrollto-middle", "n_clicks"),
    Input("scrollto-bottom", "n_clicks"),
)
def scroll_to(t, m, b):
    if ctx.triggered_id == "scrollto-middle":
        return {"top": "50%"}
    if ctx.triggered_id == "scrollto-bottom":
        return {"top": "100%"}
    return {"top": 0}
```
### Start scroll position
Use the `startScrollPosition` prop to set the initial scroll position when the component mounts. This approach avoids
the flash of content at position (0, 0):


```python
import dash_mantine_components as dmc

from docs.scrollarea.text import text

component = dmc.Center(
    dmc.ScrollArea(
        h=200,
        w=350,
        startScrollPosition={ "y": 250},
        children=dmc.Paper(
            [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600
        ),
    ),
)
```
### ScrollAreaAutosize

`ScrollAreaAutosize` component allows to create scrollable containers when given max-height is reached.

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

lorem = (
    "Lorem ipsum, dolor sit amet consectetur adipisicing elit. "
    "Dicta perspiciatis reiciendis voluptate eaque itaque quos. "
    "Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos "
    "necessitatibus expedita delectus veniam culpa!"
)

component = dmc.Stack(
    [
        dmc.ScrollAreaAutosize(mah=300, maw=400, p="sm", id="scrollarea-autosize"),
        dmc.Group(
            m="lg",
            children=[
                dmc.Button(
                    "1 paragraph",
                    id="btn-1-paragraph",
                    color="red",
                ),
                dmc.Button(
                    "4 paragraphs",
                    id="btn-4-paragraphs",
                ),
            ],
        ),
    ]
)


@callback(
    Output("scrollarea-autosize", "children"),
    Input("btn-1-paragraph", "n_clicks"),
    Input("btn-4-paragraphs", "n_clicks"),
)
def update_paragraphs(inc, dec):
    if ctx.triggered_id == "btn-1-paragraph":
        return dmc.Box(lorem, p="sm")
    return [dmc.Box(lorem, p="sm") for _ in range(4)]
```
### 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.


####  ScrollArea Selectors
| Selector  | Static selector                 | Description                                       |
| --------- | ------------------------------- | ------------------------------------------------- |
| root      | `.mantine-ScrollArea-root`      | Root element                                      |
| content   | `.mantine-ScrollArea-content`   | Wraps component children                          |
| viewport  | `.mantine-ScrollArea-viewport`  | Main scrollable area                              |
| scrollbar | `.mantine-ScrollArea-scrollbar` | Horizontal or vertical scrollbar root             |
| thumb     | `.mantine-ScrollArea-thumb`     | Scrollbar thumb                                   |
| corner    | `.mantine-ScrollArea-corner`    | Corner between horizontal and vertical scrollbars |



#### ScrollArea CSS variables

| Selector | Variable                     | Description    |
|----------|------------------------------|----------------|
| root     | `--scrollarea-scrollbar-size`   | Scrollbar size |


#### ScrollArea data attributes

| Selector         | Attribute          | Condition                          | Value                               |
|------------------|--------------------|------------------------------------|-------------------------------------|
| scrollbar, corner| `data-hidden`         | `type="never"`                     | –                                   |
| corner           | `data-hovered`        | One of the scrollbars is hovered   | –                                   |
| scrollbar        | `data-orientation`    | –                                  | "horizontal" or "vertical" depending on scrollbar position |





### Keyword Arguments
#### ScrollArea

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

- 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.

- offsetScrollbars (boolean; optional):
    Determines whether scrollbars should be offset with padding on
    given axis, `False` by default.

- overscrollBehavior (optional):
    Defines `overscroll-behavior` of the viewport.
    https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior.

- scrollHideDelay (number; optional):
    Scroll hide delay in ms, applicable only when type is set to
    `hover` or `scroll`, `1000` by default.

- scrollTo (dict; optional):
    Scroll to a position in the scroll area.

    `scrollTo` is a dict with keys:

- scrollbarSize (string | number; optional):
    Scrollbar size, any valid CSS value for width/height, numbers are
    converted to rem, default value is 0.75rem.

- scrollbars (boolean; optional):
    Axis at which scrollbars must be rendered, `'xy'` by default.

- startScrollPosition (dict; optional):
    Initial scroll position set on mount. Type: dictionary with
    optional `x` and `y` number properties.

    `startScrollPosition` is a dict with keys:

- 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.

- type (a value equal to: 'auto', 'always', 'scroll', 'hover', 'never'; optional):
    Defines scrollbars behavior, `hover` by default - `hover` –
    scrollbars are visible when mouse is over the scroll area -
    `scroll` – scrollbars are visible when the scroll area is scrolled

- variant (string; optional):
    variant.

- verticalScrollbarPosition (a value equal to: 'left', 'right'; optional):
    Pins the vertical scrollbar to a physical side (`left` or `right`)
    regardless of direction. By default, the scrollbar follows the
    inline-end edge (right in LTR, left in RTL).

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

## VisuallyHidden  
Hide element visually but keep it accessible for screen readers  
Category: Miscellaneous  

### Usage


`VisuallyHidden` is a utility component that hides content visually but leaves it available to screen readers.

This example uses it with the `ActionIcon` component:

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.ActionIcon([
    DashIconify(icon="mdi:heart-outline"),
    dmc.VisuallyHidden("Like post")
], variant="outline")
```
### Keyword Arguments


#### VisuallyHidden

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

## Anchor  
Use the Anchor component to add links with Mantine's theme styles.  
Category: Navigation  

### Simple Example

dmc.Anchor is a wrapper around dmc.Text component and works similar to dcc.Link, so you can use it with multipage apps.
It takes the same props as dmc.Text.

```python
import dash_mantine_components as dmc

component = dmc.Anchor(
    "Dash Mantine Components Announcement",
    href="https://community.plotly.com/t/dash-mantine-components/58414",
)
```
### Underline


```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.Anchor(
        "Underline always",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "always",
    ),
    dmc.Anchor(
        "Underline on hover",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "hover",
    ),
    dmc.Anchor(
        "Underline never",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "never",
    ),
    dmc.Anchor(
        "Underline not hover",
        href="https://www.dash-mantine-components.com/",
        target="_blank",
        underline = "not-hover",
    ),

])
```
You can also configure underline prop for all Anchor components with default props:

```python
dmc.MantineProvider(    
    theme={
        "components": {
            "Anchor": {
                "defaultProps": {
                    "underline": "always",
                },
            },
        },
    }
)

```

### Text props

Text props
`Anchor` components supports all `Text` component props. For example, you can use gradient variant:


```python
import dash_mantine_components as dmc

component = dmc.Anchor(
    "A link with pink to yellow gradient",
    href="#text-props",
    variant="gradient",
    gradient={"from": "pink", "to": "yellow"},
    fw=500,
    fz="lg",
)
```
### 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.


#### Anchor selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root     | .mantine-Anchor-root | Root element |

#### Anchor CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root     | --text-fz | Controls font-size property |
| root     | --text-lh | Controls line-height property |
| root     | --text-gradient | Text fill gradient |
| root     | --text-line-clamp | Number of lines that should be visible |

#### Anchor data attributes

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| root     | data-truncate | `truncate` prop is set | Value of `truncate` prop |
| root     | data-line-clamp | `lineClamp` prop is a number | – |
| root     | data-inline | `inline` prop is set | – |
| root     | data-inherit | `inherit` prop is set | – |
| root     | data-underline | – | Value of `underline` prop |


### Keyword Arguments
#### Anchor

- children (a list of or a singular dash component, string or number; optional):
    Content.

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

- anchorProps (dict; optional):
    Props passed down to the `Anchor` component.

    `anchorProps` is a dict with keys:

- 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.

- 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.

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

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

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

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

- href (string; required):
    href.

- inherit (boolean; optional):
    Determines whether font properties should be inherited from the
    parent, `False` by default.

- inline (boolean; optional):
    Sets `line-height` to 1 for centering, `False` by default.

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

- lineClamp (number; optional):
    Number of lines after which Text will be truncated.

- 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.

- refresh (boolean; optional):
    Whether to refresh the page.

- size (optional):
    Controls `font-size` and `line-height`, `'md'` 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.

- target (a value equal to: '_blank', '_self'; optional):
    Target.

- textWrap (a value equal to: 'wrap', 'nowrap', 'balance', 'pretty', 'stable'; optional):
    Controls `text-wrap` CSS property.

- truncate (boolean; optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- underline (a value equal to: 'always', 'hover', 'never'; optional):
    Determines in which cases link should have `text-decoration:
    underline` styles, `hover` by default.

- variant (string; optional):
    variant.

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

## Breadcrumbs  
Breadcrumbs is a navigation component that is used to indicate current page's location within a navigational hierarchy.  
Category: Navigation  

### Simple Example

Breadcrumbs accept any react nodes as children and places given separator (defaults to `/`) between them.

```python
import dash_mantine_components as dmc
from dash import dcc, html

component = html.Div(
    [
        # default separator
        dmc.Breadcrumbs(
            children=[
                dcc.Link("Home", href="/"),
                dcc.Link("Dash Mantine Components", href="/"),
                dcc.Link("Breadcrumbs", href="/components/breadcrumbs"),
            ],
        ),
        dmc.Space(h=20),
        # separator provided
        dmc.Breadcrumbs(
            separator="→",
            children=[
                dmc.Anchor("Home", href="/", underline="never"),
                dmc.Anchor("Dash Mantine Components", href="/", underline="never"),
                dmc.Anchor(
                    "Breadcrumbs", href="/components/breadcrumbs", underline="never"
                ),
            ],
        ),
    ]
)
```
### 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-Breadcrumbs-root       | Root element               |
| breadcrumb | .mantine-Breadcrumbs-breadcrumb | Breadcrumb item wrapper    |
| separator  | .mantine-Breadcrumbs-separator  | Separator between children |


### Keyword Arguments
#### Breadcrumbs

- children (a list of or a singular dash component, string or number; required):
    React nodes that should be separated with `separator`.

- 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.

- 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.

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

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

- 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.

- separator (a list of or a singular dash component, string or number; optional):
    Separator between children, `'/'` by default.

- separatorMargin (string | number; optional):
    Controls spacing between separator and breadcrumb, `'xs'` 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.

- variant (string; optional):
    variant.

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

## Burger  
Open/close navigation button. Use the dmc.Burger component to toggle navigation menus.  
Category: Navigation  

### Simple Example

Burger component renders open/close menu button. If it's burger state is clicked, the `opened` property is set to `True`,
and if it's cross state is clicked, the `opened` property is set to `False`.

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

component = html.Div(
    [dmc.Burger(id="burger-button", opened=False), dmc.Text(id="burger-state", mt="md")]
)


@callback(Output("burger-state", "children"), Input("burger-button", "opened"))
def is_open(opened):
    return str(opened)
```
### Size and Line Size

Use `size` prop to control the `Burger` width and height, numbers are converted to rem, 'md' by default.
Use the `lineSize` prop to control height of lines, by default calculated based on `size` prop.  

```python
dmc.Burger(id="burger-button", opened=False, lineSize=2, size="md")
```

### Colors

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Burger(),
        dmc.Burger(color="red"),
        dmc.Burger(color="green"),
    ]
)
```
### 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.


#### Burger Selectors

| Selector | Static selector         | Description                           |
|----------|--------------------------|---------------------------------------|
| root     | .mantine-Burger-root     | Root element (button)                 |
| burger   | .mantine-Burger-burger   | Inner element that contains burger lines |

#### Burger CSS Variables

| Selector | Variable                            | Description                                |
|----------|-------------------------------------|--------------------------------------------|
| root     | --burger-line-size                  | Controls height of lines                   |
|          | --burger-color                      | Controls background-color of lines         |
|          | --burger-size                       | Controls width and height of the button    |
|          | --burger-transition-duration        | Controls transition-duration of lines      |
|          | --burger-transition-timing-function | Controls transition-timing-function of lines |

#### Burger Data Attributes

| Selector | Attribute    | Condition          |
|----------|--------------|--------------------|
| burger   | data-opened  | `opened` prop is set |


### Keyword Arguments
#### Burger

- 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.

- 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` of any valid CSS value, by default
    `theme.white` in dark color scheme and `theme.black` in light.

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

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

- 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`.

- lineSize (number; optional):
    Height of the burger lines.

- 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.

- opened (boolean; default False):
    State of the burger, when `True` burger is transformed into X,
    `False` 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.

- size (number; optional):
    Controls burger `width` and `height`, numbers are converted to
    rem, `'md'` 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):
    `transition-duration` property value in ms, `300` by default.

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

- variant (string; optional):
    variant.

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

## NavLink  
A Navlink component.  
Category: Navigation  

### Basic usage

Use `NavLink`'s `n_clicks` property in callbacks, or you can set `href` to make it a link.

```python
import dash_mantine_components as dmc
from dash import html
from dash_iconify import DashIconify


def get_icon(icon):
    return DashIconify(icon=icon, height=16)


component = html.Div(
    [
        dmc.NavLink(
            label="With icon",
            leftSection=get_icon(icon="bi:house-door-fill"),
        ),
        dmc.NavLink(
            label="With right section",
            leftSection=get_icon(icon="tabler:gauge"),
            rightSection=get_icon(icon="tabler-chevron-right"),
        ),
        dmc.NavLink(
            label="Disabled",
            leftSection=get_icon(icon="tabler:circle-off"),
            disabled=True,
        ),
        dmc.NavLink(
            label="With description",
            description="Additional information",
            leftSection=dmc.Badge(
                "3", size="xs", variant="filled", color="red", w=16, h=16, p=0
            ),
        ),
        dmc.NavLink(
            label="Active subtle",
            leftSection=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            variant="subtle",
            active=True,
        ),
        dmc.NavLink(
            label="Active light",
            leftSection=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            active=True,
        ),
        dmc.NavLink(
            label="Active filled",
            leftSection=get_icon(icon="tabler:activity"),
            rightSection=get_icon(icon="tabler-chevron-right"),
            variant="filled",
            active=True,
        ),
    ],
    style={"width": 240},
)
```
### Active styles

Set `active` prop to add active styles to `NavLink`. You can customize active styles with `color` and `variant` properties.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

dmc.NavLink(
    label="With right section",
    leftSection=DashIconify(icon="tabler:gauge"),
    active=True,
    variant="filled",
    color="orange",
    id="navlink-interactive",
    rightSection=DashIconify(icon="tabler-chevron-right"),
),
```

### Setting Active prop based on URL

The `active` prop in `NavLink` controls whether a link is highlighted as active. It can be set manually (`True`/`False`)
or automatically based on the current URL.  


`active` can be set dynamically without using dash callbacks:  
- `"exact"` → Active when the current pathname matches `href` path
- `"exact-with-search`→ Active when the current pathname matches `href` path and query strings
- `"partial"` → Active when the current pathname starts with `href` (includes subpages)
- `"children"` → Parent link active when any child link is active


Example:
- User on `/page-1/subject-1` → The second and third links are active (since `"partial"` includes subpages).  
- User on `/page-1` → Only the second link is active.  


```python
html.Div([
    dmc.NavLink(label="Home", href="/home", active="exact"),
    dmc.NavLink(label="Page 1", href="/page-1", active="partial"),
    dmc.NavLink(label="Subject 1", href="/page-1/subject-1", active="exact"),
])
```
See a complete example in Multi-Page App Example with Active Links section.  


### Setting active prop in a callback

Use a callback to set `active` prop if you are using dash-mantine-components<1.0.0

This example demonstrates how to use a callback to set the `active` prop of the `NavLink` when the user navigates to a different page. It uses the "Dash Pages" feature but can be adapted to any other page navigation system.

```python
# Create Navlinks (using dash.page_registry)
[
    dmc.NavLink(
        label=f"{page['name']}",
        href=page["relative_path"],
        id={"type": "navlink", "index": page["relative_path"]},
    )
    for page in page_registry.values()
]

# ...

# Callback (using the dcc.location provided by Dash Pages)
@app.callback(Output({"type": "navlink", "index": ALL}, "active"), Input("_pages_location", "pathname"))
def update_navlinks(pathname):
    return [control["id"]["index"] == pathname for control in callback_context.outputs_list]

```

### Nested NavLinks

To create nested links put dmc.NavLink as children of another dmc.NavLink.

```python
import dash_mantine_components as dmc
from dash import html
from dash_iconify import DashIconify


def get_icon(icon):
    return DashIconify(icon=icon, height=16)


component = html.Div(
    style={"width": 240},
    children=[
        dmc.NavLink(
            label="First parent link",
            leftSection=get_icon(icon="tabler:gauge"),
            childrenOffset=28,
            children=[
                dmc.NavLink(label="First child link"),
                dmc.NavLink(label="Second child link"),
                dmc.NavLink(
                    label="Nested parent link",
                    childrenOffset=28,
                    children=[
                        dmc.NavLink(label="First child link"),
                        dmc.NavLink(label="Second child link"),
                        dmc.NavLink(label="Third child link"),
                    ],
                ),
            ],
        ),
        dmc.NavLink(
            label="Second parent link",
            leftSection=get_icon(icon="tabler:fingerprint"),
            childrenOffset=28,
            opened=True,
            children=[
                dmc.NavLink(label="First child link"),
                dmc.NavLink(label="Second child link"),
                dmc.NavLink(label="Third child link"),
            ],
        ),
    ],
)
```
### Multi-Page App Example with Active Links


This example uses [Dash Pages](https://dash.plotly.com/urls) to create a simple multi-page app. For simplicity, all
pages are defined in a single file instead of separate folders.

It demonstrates `active="exact-with-search"` with query strings and shows how `active="children"` keeps a parent link
active when a child route is selected.


```python
import dash
import dash_mantine_components as dmc

app = dash.Dash(use_pages=True, pages_folder="")


def reports_layout(type=None, **kwargs):
    return dmc.Box(f"{type} Report ")

dash.register_page("home", path="/", layout=dmc.Box("Home"))
dash.register_page("reports", path="/reports", layout=reports_layout)
dash.register_page("settings", path="/settings", layout=dmc.Box("Settings"))


nav = dmc.Box([
    dmc.NavLink(label="Home", href="/", active="exact"),
    dmc.NavLink(
        label="Reports",
        active="children",
        childrenOffset=28,
        children=[
            dmc.NavLink(
                label="Sales",
                href="/reports?type=Sales",
                active="exact-with-search",
            ),
            dmc.NavLink(
                label="Inventory",
                href="/reports?type=Inventory",
                active="exact-with-search",
            ),
        ],
    ),
    dmc.NavLink(label="Settings", href="/settings", active="exact"),
])

app.layout = dmc.MantineProvider(
    dmc.AppShell(
        [
            dmc.AppShellNavbar(nav),
            dmc.AppShellMain(dash.page_container),
        ],
        padding="xl",
        navbar={"width": 300},
    )
)

if __name__ == "__main__":
    app.run(debug=True)


```

### 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-NavLink-root        | Root element                                 |
| body        | .mantine-NavLink-body        | Contains label and description               |
| section     | .mantine-NavLink-section     | Left and right sections                      |
| label       | .mantine-NavLink-label       | NavLink label                                |
| description | .mantine-NavLink-description | Dimmed description displayed below the label |
| children    | .mantine-NavLink-children    | Wrapper around nested links                  |
| chevron     | .mantine-NavLink-chevron     | Default chevron icon                         |
| collapse    | .mantine-NavLink-collapse    | Nested links Collapse container              |


### Keyword Arguments
#### NavLink

- children (a list of or a singular dash component, string or number; optional):
    Child `NavLink` components.

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

- active (boolean; default False):
    Controls whether the link is styled as active (default: `False`).

- 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 button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- childrenOffset (number; optional):
    Key of `theme.spacing` or any valid CSS value to set collapsed
    links `padding-left`, `'lg'` by default.

- 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` of any valid CSS color to control active
    styles, `theme.primaryColor` by default.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Link description, displayed below the label.

- disableRightSectionRotation (boolean; optional):
    If set, right section will not be rotated when collapse is opened,
    `False` by default.

- disabled (boolean; optional):
    If set, disabled styles will be added to the root element, `False`
    by default.

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

- href (string; optional):
    href.

- keepMounted (boolean; optional):
    If set to `False`, child `NavLinks` are unmounted when collapsed.

- label (a list of or a singular dash component, string or number; optional):
    Main link label.

- leftSection (a list of or a singular dash component, string or number; optional):
    Section displayed on the left side of the label.

- 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.

- n_clicks (number; default 0):
    An integer that represents the number of times that this element
    has been clicked on.

- noWrap (boolean; optional):
    If set, label and description will not wrap to the next line,
    `False` by default.

- opened (boolean; default False):
    Controlled nested items collapse state.

- 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.

- refresh (boolean; optional):
    Whether to refresh the page.

- rightSection (a list of or a singular dash component, string or number; optional):
    Section displayed on the right side of the label.

- 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.

- target (a value equal to: '_blank', '_self'; optional):
    Target.

- variant (string; optional):
    variant.

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

## Pagination  
Display active page and navigate between multiple pages  
Category: Navigation  

### Introduction

### Siblings

Control the number of active item siblings with `siblings` prop.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Pagination(total=20, siblings=1, value=10),
        dmc.Pagination(total=20, siblings=2, value=10, my=15),
        dmc.Pagination(total=20, siblings=3, value=10),
    ]
)
```
### Boundaries

Control the number of items displayed after previous(<) and before next(>) buttons with `boundaries` prop.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Pagination(total=20, boundaries=1, value=10),
        dmc.Pagination(total=20, boundaries=2, value=10, my=15),
        dmc.Pagination(total=20, boundaries=3, value=10),
    ]
)
```
### Responsive layout
Set `layout="responsive"` to use CSS container queries to show a compact "Page X of Y" label when the container is 
narrow. Use `formatLabel prop to customize the label text.

To see the layout change, resize the demo using the handle at the bottom-right corner of the root element:

```python
import dash_mantine_components as dmc

component = dmc.Box(
    dmc.Pagination(total=20, layout="responsive"),
    style={
        "resize": "horizontal",
        "overflow": "auto",
        "minWidth": 200,
        "maxWidth": "100%",
        "border": "1px solid var(--mantine-color-gray-5)",
        "padding": "16px",
    },
)
```
Use `formatLabel` prop to customize the label text. It receives the current page and total number of pages.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
 

```python
import dash_mantine_components as dmc

component = dmc.Box(
    dmc.Pagination(total=20, layout="responsive", formatLabel={"function": "formatLabelPagination"}),
    style={
        "resize": "horizontal",
        "overflow": "auto",
        "minWidth": 200,
        "maxWidth": "100%",
        "border": "1px solid var(--mantine-color-gray-5)",
        "padding": "16px",
    },
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatLabelPagination = ({ page, totalPages }) => `${page} / ${totalPages}`;
```


### Hide pages controls
Set `withPages=False` to hide pages controls:

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


limit = 10
total = 145
total_pages = (total + limit - 1) // limit

component = dmc.Group(
    justify="flex-end",
    children=[
        dmc.Text(id="message-withPages", size="sm"),
        dmc.Pagination(id="pagination-withPages", total=total_pages, value=1, withPages=False),
    ],
)


@callback(
    Output("message-withPages", "children"),
    Input("pagination-withPages", "value"),
)
def update_message(page):
    start = limit * (page - 1) + 1
    end = min(total, limit * page)
    return f"Showing {start} – {end} of {total}"
```
### Controls size

By default, pagination controls have reduced size compared to inputs and buttons. If you want controls to have the same 
size as inputs and buttons, you can use the `input-` prefix for the size prop:


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Group([
        dmc.Pagination(total=45, size="sm"),
        dmc.Button("sm button", size="sm"),
        dmc.TextInput(size="sm", placeholder="sm input"),
    ]),
    dmc.Group([
        dmc.Pagination(total=45, size="input-sm"),
        dmc.Button("sm button", size="sm"),
        dmc.TextInput(size="sm", placeholder="sm input"),
    ], mt="md"),
])
```
### Start value

Set `startValue` to define the starting page number. For example, with `startValue=5` and `total=15`, the pagination
range will be from 5 to 15:

```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Text("Pages 5–15 (startValue=5, total=15)", mb="xs"),
    dmc.Pagination(total=15, startValue=5, value=5),
])
```
### autoContrast
`Pagination` supports the `autoContrast` prop and `theme.autoContrast`. If `autoContrast` is set either on `Pagination`
or on the `theme`, the content color will be adjusted to have sufficient contrast with the value specified in the color prop.

Note that the `autoContrast` feature works only if you use the color prop to change the background color.

```python
import dash_mantine_components as dmc

component = dmc.Box(
    [
        dmc.Text("autoContrast: off"),
        dmc.Pagination(total=10, color="lime.4"),
        dmc.Text("autoContrast: on", mt="md"),
        dmc.Pagination(total=10, autoContrast=True, color="lime.4"),
    ]
)
```
### 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-Pagination-root    | Root element                                              |
| control | .mantine-Pagination-control | Control element: items, next/previous, first/last buttons |
| dots    | .mantine-Pagination-dots    | Dots icon wrapper                                         |


### Keyword Arguments
#### Pagination

- 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 active item 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 for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- boundaries (number; optional):
    Number of elements visible on the left/right edges, `1` by
    default.

- 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`, active item color, `theme.primaryColor` by
    default.

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

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

- disabled (boolean; optional):
    Determines whether all controls should be disabled, `False` by
    default.

- formatLabel (boolean | number | string | dict | list; optional):
    Function to format the label text displayed in responsive mode.

- gap (string | number; optional):
    Key of `theme.spacing`, gap between controls, `8` by default.

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

- hideWithOnePage (boolean; optional):
    Determines whether the pagination should be hidden when only one
    page is available (total=1), False by default.

- layout (a value equal to: 'default', 'responsive'; optional):
    Determines how the pagination is displayed, `'responsive'` uses
    CSS container queries to switch between pages and a compact label
    default 'default'.

- 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.

- 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.

- siblings (number; optional):
    Number of siblings displayed on the left/right side of the
    selected page, `1` by default.

- size (number; optional):
    `height` and `min-width` of controls, `'md'` by default.

- startValue (number; optional):
    Starting page number, defaults to 1.

- 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.

- total (number; required):
    Total number of pages, must be an integer.

- value (number; optional):
    Active page for controlled component, must be an integer in [0,
    total] interval.

- variant (string; optional):
    variant.

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

- withControls (boolean; optional):
    Determines whether next/previous controls should be rendered, True
    by default.

- withEdges (boolean; optional):
    Determines whether first/last controls should be rendered, False
    by default.

- withPages (boolean; optional):
    Determines whether pages controls should be displayed, `True` by
    default.

## Stepper  
Use the Stepper, StepperStep and StepperCompleted components to display content divided into a steps sequence  
Category: Navigation  

### Basic usage

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

min_step = 0
max_step = 3
active = 1

component = html.Div(
    [
        dmc.Stepper(
            id="stepper-basic-usage",
            active=active,
            children=[
                dmc.StepperStep(
                    label="First step",
                    description="Create an account",
                    children=dmc.Text("Step 1 content: Create an account", ta="center"),
                ),
                dmc.StepperStep(
                    label="Second step",
                    description="Verify email",
                    children=dmc.Text("Step 2 content: Verify email", ta="center"),
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    children=dmc.Text("Step 3 content: Get full access", ta="center"),
                ),
                dmc.StepperCompleted(
                    children=dmc.Text(
                        "Completed, click back button to get to previous step",
                        ta="center",
                    )
                ),
            ],
        ),
        dmc.Group(
            justify="center",
            mt="xl",
            children=[
                dmc.Button("Back", id="back-basic-usage", variant="default"),
                dmc.Button("Next step", id="next-basic-usage"),
            ],
        ),
    ]
)


@callback(
    Output("stepper-basic-usage", "active"),
    Input("back-basic-usage", "n_clicks"),
    Input("next-basic-usage", "n_clicks"),
    State("stepper-basic-usage", "active"),
    prevent_initial_call=True,
)
def update(back, next_, current):
    button_id = ctx.triggered_id
    step = current if current is not None else active
    if button_id == "back-basic-usage":
        step = step - 1 if step > min_step else step
    else:
        step = step + 1 if step < max_step else step
    return step
```
### Color, radius and size

You can use any color from Mantine's theme colors. Colors can also be set on individual steps.

```python
import dash_mantine_components as dmc

dmc.Stepper(
    active=1,
    color="green",
    radius="lg",
    size="sm", 
    children=[
        dmc.StepperStep(label="First step", description="Create an account"),
        dmc.StepperStep(label="Second step", description="Verify email"),
    ],
)
```

Component size is controlled by two props: `size` and `iconSize`. `size` prop controls icon size, label and description font size.
`iconSize` allows to overwrite icon size separately from other size values.

```python
import dash_mantine_components as dmc

dmc.Stepper(
    active=1,
    iconSize=42,
    children=[
        dmc.StepperStep(label="First step", description="Create an account"),
        dmc.StepperStep(label="Second step", description="Verify email"),
    ],
)
```

### Loading state

To indicate loading state set `loading` prop on `Step` component, `Loader` will replace step icon.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Stepper(
            active=1,
            children=[
                dmc.StepperStep(
                    label="First step",
                    description="Create an account",
                    children=dmc.Text("Step 1 content: Create an account", ta="center"),
                ),
                dmc.StepperStep(
                    label="Second step",
                    description="Verify email",
                    children=dmc.Text("Step 2 content: Verify email", ta="center"),
                    loading=True,
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    children=dmc.Text("Step 3 content: Get full access", ta="center"),
                ),
            ],
        ),
    ]
)
```
### Custom icons

You can replace step icon by setting `icon` prop on Step component. To change completed check icon set `completedIcon` on Stepper component.
You can also change completed icon for each step, for example, to indicate error state.

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

min_step = 0
max_step = 3
active = 1


def get_icon(icon):
    return DashIconify(icon=icon, height=20)


component = dmc.Container(
    [
        dmc.Stepper(
            id="stepper-custom-icons",
            active=active,
            children=[
                dmc.StepperStep(
                    label="First step",
                    description="Create an account",
                    icon=get_icon(icon="material-symbols:account-circle"),
                    progressIcon=get_icon(icon="material-symbols:account-circle"),
                    completedIcon=get_icon(icon="mdi:account-check"),
                    children=[
                        dmc.Text("Step 1 content: Create an account", ta="center")
                    ],
                ),
                dmc.StepperStep(
                    label="Second step",
                    description="Verify email",
                    icon=get_icon(icon="ic:outline-email"),
                    progressIcon=get_icon(icon="ic:outline-email"),
                    completedIcon=get_icon(
                        icon="material-symbols:mark-email-read-rounded"
                    ),
                    children=[dmc.Text("Step 2 content: Verify email", ta="center")],
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    icon=get_icon(icon="material-symbols:lock-outline"),
                    progressIcon=get_icon(icon="material-symbols:lock-outline"),
                    completedIcon=get_icon(icon="material-symbols:lock-open-outline"),
                    children=[dmc.Text("Step 3 content: Get full access", ta="center")],
                ),
                dmc.StepperCompleted(
                    children=[
                        dmc.Text(
                            "Completed, click back button to get to previous step",
                            ta="center",
                        )
                    ]
                ),
            ],
        ),
        dmc.Group(
            justify="center",
            mt="xl",
            children=[
                dmc.Button("Back", id="back-custom-icons", variant="default"),
                dmc.Button("Next step", id="next-custom-icons"),
            ],
        ),
    ]
)


@callback(
    Output("stepper-custom-icons", "active"),
    Input("back-custom-icons", "n_clicks"),
    Input("next-custom-icons", "n_clicks"),
    State("stepper-custom-icons", "active"),
    prevent_initial_call=True,
)
def update_with_icons(back, next_, current):
    button_id = ctx.triggered_id
    step = current if current is not None else active
    if button_id == "back-custom-icons":
        step = step - 1 if step > min_step else step
    else:
        step = step + 1 if step < max_step else step
    return step
```
### Vertical orientation

```python
import dash_mantine_components as dmc

component = dmc.Stepper(
    active=1,
    orientation="vertical",
    children=[
        dmc.StepperStep(label="First step", description="Create an account"),
        dmc.StepperStep(label="Second step", description="Verify email"),
        dmc.StepperStep(label="Final step", description="Get full access"),
    ],
)
```
### Label position
Set `labelPosition="bottom"` to display the step label and description below the step icon:

```python
import dash_mantine_components as dmc

component = dmc.Stepper(
    [
        dmc.StepperStep(label="Account"),
        dmc.StepperStep(label="Verification"),
        dmc.StepperStep(label="Access"),
    ],
    id="stepper",
    active=1,
    labelPosition="bottom",
)
```
### 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-Stepper-root                    | Root element                                  |
| steps                   | .mantine-Stepper-steps                   | Steps controls wrapper                        |
| separator               | .mantine-Stepper-separator               | Separator line between step controls          |
| verticalSeparator       | .mantine-Stepper-verticalSeparator       | Vertical separator line between step controls |
| separatorActive         | .mantine-Stepper-separatorActive         | Separator active modifier                     |
| verticalSeparatorActive | .mantine-Stepper-verticalSeparatorActive | Vertical separator active modifier            |
| content                 | .mantine-Stepper-content                 | Current step content wrapper                  |
| stepWrapper             | .mantine-Stepper-stepWrapper             | Wrapper for the step icon and separator       |
| step                    | .mantine-Stepper-step                    | Step control button                           |
| stepIcon                | .mantine-Stepper-stepIcon                | Step icon wrapper                             |
| stepCompletedIcon       | .mantine-Stepper-stepCompletedIcon       | Completed step icon, rendered within stepIcon |
| stepBody                | .mantine-Stepper-stepBody                | Contains stepLabel and stepDescription        |
| stepLabel               | .mantine-Stepper-stepLabel               | Step label                                    |
| stepDescription         | .mantine-Stepper-stepDescription         | Step description                              |
| stepLoader              | .mantine-Stepper-stepLoader              | Step loader                                   |


### Keyword Arguments
#### Stepper

- children (a list of or a singular dash component, string or number; optional)

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

- active (number; required):
    Index of the active step.

- allowNextStepsSelect (boolean; optional):
    Determines whether next steps can be selected, `True` by default
    *.

- 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 icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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, controls colors of
    active and progress steps, `theme.primaryColor` by default.

- completedIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is completed, check icon by default.

- contentPadding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set `padding-top`
    of the content.

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

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

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

- icon (a list of or a singular dash component, string or number; optional):
    Step icon, default value is step index + 1.

- iconPosition (a value equal to: 'left', 'right'; optional):
    Icon position relative to the step body, `'left'` by default.

- iconSize (string | number; optional):
    Controls size of the step icon, by default icon size is inferred
    from `size` prop.

- keepMounted (boolean; optional):
    If set, all step content is kept mounted. React 19 `Activity` is
    used to preserve state while content is hidden. default False.

- labelPosition (a value equal to: 'bottom', 'right'; optional):
    Controls position of the step label and description relative to
    the step icon. Takes precedence over `iconPosition`. Ignored if
    `orientation="vertical"` is set. default 'right'.

- 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.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Stepper orientation, `'horizontal'` by default.

- progressIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is in progress, default value is
    step index + 1.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set steps
    border-radius, `"xl"` by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of various Stepper elements.

- 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.

- variant (string; optional):
    variant.

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

- wrap (boolean; optional):
    Determines whether steps should wrap to the next line if no space
    is available, `True` by default.
#### StepperStep

- children (a list of or a singular dash component, string or number; optional)

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

- allowStepClick (boolean; optional):
    Set to False to disable clicks on step.

- allowStepSelect (boolean; optional):
    Should step selection be allowed.

- 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.

- 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`, by default controlled by Stepper component.

- completedIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is completed.

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

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

- description (a list of or a singular dash component, string or number; optional):
    Step description.

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

- icon (a list of or a singular dash component, string or number; optional):
    Step icon, defaults to step index + 1 when rendered within
    Stepper.

- iconPosition (a value equal to: 'left', 'right'; optional):
    Icon position relative to step body, controlled by Stepper
    component.

- iconSize (number; optional):
    Icon wrapper size.

- label (a list of or a singular dash component, string or number; optional):
    Step label, render after icon.

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

- loading (boolean; optional):
    Indicates loading state of the step.

- 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.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Component orientation.

- progressIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is in progress.

- state (a value equal to: 'stepInactive', 'stepProgress', 'stepCompleted'; optional):
    Step state, controlled by Stepper component.

- step (number; optional):
    Step index, controlled by Stepper component *.

- 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.

- variant (string; optional):
    variant.

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

- withIcon (boolean; optional):
    Determines whether the icon should be displayed.
#### StepperCompleted

- children (a list of or a singular dash component, string or number; optional)

## TableOfContents  
Renders a list of headings on the page and tracks current heading visible in the viewport  
Category: Navigation  

### Usage

Use the `TableOfContents` component to display a table of contents similar to the sidebar in these docs. The
component tracks scroll position and highlights current heading in the list.

You can set the style of the `TableOfContents` items (controls) with the `variant`, `color`, `size` and `radius` props:

### Selector

`TableOfContents` is based on Mantine’s [`use-scroll-spy`](https://mantine.dev/hooks/use-scroll-spy/) hook. The `selector`
prop is passed directly to this hook.

The `selector` prop is a CSS selector string used to locate and observe heading elements in the DOM.
The default value is `'h1, h2, h3, h4, h5, h6'`.

```python
dmc.TableOfContents(
    selector="h1, h2, h3, h4, h5, h6",  # default
)
```

The selector can be scoped to a container and may use any valid CSS selector syntax, including `:is()`, class selectors, or IDs.

For example, the following selector matches `h2`, `h3`, and `h4` elements in the `AppShellMain` component, which has the class name `mantine-AppShell-main`:

```python
dmc.TableOfContents(
    selector=".mantine-AppShell-main :is(h2, h3, h4)"
)
```

### Controls

The `TableOfContents` items (controls) are rendered as HTML `<a>` elements.
Each control’s `href` attribute is the id of a heading element, and its `children` are set to the heading
element’s `textContent`.

The active control (the currently visible heading) includes a `data-active="true"` attribute, which can be used for styling or testing.

### Depth offset

Use the `minDepthToOffset` prop to control the minimum heading depth at which indentation is applied. By 
default, `minDepthToOffset` is 1, which means that first and second level headings will not be offset. Set it to 0 to
apply offset to all headings.

To control offset value in px, set `depthOffset` prop:

```python
import dash_mantine_components as dmc

component = dmc.TableOfContents(
    selector=".mantine-AppShell-main :is( h2, h3, h4)",
    variant="filled",
    color="blue",
    size="sm",
    radius="sm",
    minDepthToOffset=0,
    depthOffset=40,
    w=300
)
```
### autoContrast  

`TableOfContents` supports autoContrast prop and `theme.autoContrast`. If `autoContrast` is set either on `TableOfContents`
or on `theme`, content color will be adjusted to have sufficient contrast with the value specified in color prop.

Note that `autoContrast` feature works only if you use `color` prop to change background color. `autoContrast` works only with filled variant.


```python
import dash_mantine_components as dmc

component = dmc.TableOfContents(
    selector=".mantine-AppShell-main :is( h2, h3, h4)",
    variant="filled",
    color="yellow.3",
    autoContrast=True,
    size="sm",
    radius="sm",
    w=300
)
```
### Reinitialize

By default, heading changes are not tracked automatically. If the content updates in a callback (for example, when switching
tabs) you can trigger a refresh of the `TableOfContents` by setting `reinitialize=True` in a callback.


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

app = Dash()


def make_section(i, name):
    return dmc.Box(
        [
            dmc.Title(children=f"{name} {i}", id=f"section-{i}", order=3),
            dmc.Space(h=200),
        ],
        p="lg",
    )


app.layout = dmc.MantineProvider(
    dmc.AppShell(
        dmc.AppShellMain(
            [
                dmc.Tabs(
                    [
                        dmc.TabsList(
                            [
                                dmc.TabsTab("Tab one", value="1"),
                                dmc.TabsTab("Tab two", value="2"),
                            ]
                        ),
                    ],
                    value="1",
                    id="tabs",
                ),
                dmc.Box(id="tabs-content"),
                dmc.AppShellAside(
                    [
                        dmc.Title("Table of Contents", order=4, mt=60),
                        dmc.ScrollArea(
                            dmc.TableOfContents(
                                selector="#tabs-content :is( h2, h3, h4)", id="toc"
                            )
                        ),
                    ]
                ),
            ],
            p="md",
        )
    )
)


@callback(
    Output("tabs-content", "children"),
    Output("toc", "reinitialize"),
    Input("tabs", "value"),
)
def render_content(active):
    if active == "1":
        return html.Div([make_section(i, "Section") for i in range(30)]), True
    return html.Div([make_section(i, "Topic") for i in range(30)]), True


if __name__ == "__main__":
    app.run(debug=True)
```
    

### target_id

With Dash 3+, you do not need to set `reinitialize` in a callback. Instead, set `target_id` to the `id` of a component
that is updated by callbacks, and the `TableOfContents` will refresh automatically when that update completes.

Using the example above, the callback can be simplified. No `reinitialize` output is required when `target_id` is set:


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

app = Dash()


def make_section(i, name):
    return dmc.Box(
        [
            dmc.Title(children=f"{name} {i}", id=f"section-{i}", order=3),
            dmc.Space(h=200),
        ],
        p="lg",
    )


app.layout = dmc.MantineProvider(
    dmc.AppShell(
        dmc.AppShellMain(
            [
                dmc.Tabs(
                    [
                        dmc.TabsList(
                            [
                                dmc.TabsTab("Tab one", value="1"),
                                dmc.TabsTab("Tab two", value="2"),
                            ]
                        ),
                    ],
                    value="1",
                    id="tabs",
                ),
                dmc.Box(id="tabs-content"),
                dmc.AppShellAside(
                    [
                        dmc.Title("Table of Contents", order=4, mt=60),
                        dmc.ScrollArea(
                            dmc.TableOfContents(
                                target_id="tabs-content",
                                selector="#tabs-content :is( h2, h3, h4)",
                            )
                        ),
                    ]
                ),
            ],
            p="md",
        )
    )
)


@callback(
    Output("tabs-content", "children"),
    Input("tabs", "value"),
)
def render_content(active):
    if active == "1":
        return html.Div([make_section(i, "Section") for i in range(30)])
    return html.Div([make_section(i, "Topic") for i in range(30)])


if __name__ == "__main__":
    app.run(debug=True)
```

When using Dash Pages, `target_id` defaults to the page container id, so the table of contents is automatically
refreshed on each page change without any additional configuration.

### Dash version support

* Dash 3+: `target_id` is supported and replaces the `reinitialize` callback pattern.
* Dash 2: Use the `reinitialize` prop in a callback as shown above.

### scrollIntoViewOptions

`scrollIntoViewOptions` prop controls how the page scrolls when a heading is clicked in the `TableOfContents`.

This prop is passed directly to the browser’s [`Element.scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)
API and lets you customize the scrolling behavior and alignment of the target heading.

For example, you can enable smooth scrolling or control where the heading appears in the viewport:

```python
dmc.TableOfContents(
    scrollIntoViewOptions={
        "behavior": "smooth",
        "block": "start",
    }
)
```

### Apps with fixed headers


This example shows how to handle scrolling when the app has a fixed header, such as when using `AppShellHeader`

 - The `scrollMarginTop` CSS property is applied to headings so that when a `TableOfContents` item is clicked, the heading is not hidden behind the header.
 - The `offset` prop is passed to the `useScrollSpy` hook to track the correct heading when the app has a fixed header.
   Set it to the header height so the active item in the `TableOfContents` updates properly when scrolling.
  

```python

import dash
from dash import Dash, html
import dash_mantine_components as dmc


app = Dash(use_pages=True, pages_folder="")


logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"


def make_section(i, page):
    return dmc.Box(
        [
            dmc.Title(
                children=f"{page} Title {i}",
                id=str(i),
                order=3,
                mb=30,
                style={"scrollMarginTop": "60px"},
            ),
        ],
        p="lg",
    )


header = dmc.AppShellHeader(
    dmc.Group(
        [
            dmc.Image(src=logo, h=40, flex=0),
            dmc.Title("Demo App", c="blue"),
        ],
        h="100%",
        px="md",
    )
)

aside = dmc.AppShellAside(
    children=dmc.ScrollArea(
        dmc.Stack(
            [
                dmc.Title("Table of contents", order=5, mt=50),
                dmc.TableOfContents(
                    variant="filled",
                    color="blue",
                    size="sm",
                    radius="sm",
                    selector="#appshellmain :is( h2, h3, h4, h5, h6)",
                    offset=60,
                    id="toc",
                ),
            ]
        ),
        type="never",
    ),
    px="lg",
)

dash.register_page(
    "home",
    path="/",
    layout=html.Div([make_section(i, "home") for i in range(30)]),
)
dash.register_page(
    "page1",
    path="/page-1",
    layout=html.Div([make_section(i, "page1") for i in range(30)]),
)

app.layout = dmc.MantineProvider(
    children=dmc.AppShell(
        [
            header,
            dmc.AppShellNavbar(
                [
                    dmc.Title("Page Links", order=5),
                    dmc.NavLink(label="Home", href="/", id="home"),
                    dmc.NavLink(label="Page 1", href="/page-1", id="page-1"),
                ],
                p="md",
            ),
            dmc.AppShellMain(html.Div(dash.page_container, id="appshellmain")),
            aside,
        ],
        navbar={"width": 200},
        header={"height": 60},
    ),
)


if __name__ == "__main__":
    app.run(debug=True)
```


### 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.



#### TableOfContents selectors

| Selector | Static selector                    | Description     |
| -------- | ---------------------------------- | --------------- |
| root     | `.mantine-TableOfContents-root`    | Root element    |
| control  | `.mantine-TableOfContents-control` | Control element |



#### TableOfContents CSS variables

| Selector | Variable             | Description                                    |
| -------- | -------------------- | ---------------------------------------------- |
| root     | `--toc-bg`           | Background color of active control             |
| root     | `--toc-color`        | Text color of active control                   |
| root     | `--toc-depth-offset` | Offset between controls depending on depth     |
| root     | `--toc-radius`       | Border-radius of control                       |
| root     | `--toc-size`         | Controls font-size and padding of all elements |



#### TableOfContents data attributes

| Selector | Attribute     | Condition                                                      |
| -------- | ------------- | -------------------------------------------------------------- |
| control  | `data-active` | Associated heading is currently the best match in the viewport |

### Keyword Arguments
#### TableOfContents

- 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 with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- 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):
    Active element color. Key of `theme.colors` or any valid CSS color
    value, `theme.primaryColor` by default.

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

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

- depthOffset (string | number; optional):
    Controls padding on the left side of control, multiplied by
    (`depth` - `minDepthToOffset`), `20px` 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:

- minDepthToOffset (number; optional):
    Minimum `depth` value that requires offset, `1` by default.

- 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.

- offset (number; optional):
    Offset from the top of the viewport to use when determining the
    active heading, 0 by default.

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

- reinitialize (boolean; optional):
    Forces a re-scan of headings for dynamic content. Can be triggered
    in a callback.

- scrollIntoViewOptions (dict; optional):
    Set scrollIntoView options. {'behavior': 'auto' | 'instant' |
    'smooth', 'block': 'center' | 'end' | 'nearest' | 'start',
    'inline': 'center' | 'end' | 'nearest' | 'start'}.

    `scrollIntoViewOptions` is a dict with keys:

- selector (string; optional):
    CSS Selector to get headings, 'h1, h2, h3, h4, h5, h6' by default.

- size (string | number; optional):
    Controls font-size and padding of all elements, `'md'` 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.

- target_id (string; optional):
    Component id to observe for loading completion (Dash >= 3 only).
    Defaults to Dash Pages content container '_pages_content'. For
    Dash 2 use reinitialize prop instead.

- variant (a value equal to: 'none', 'light', 'filled'; optional):
    Controls active element style, `'filled'` by default.

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

## Tabs  
Use the Tab and Tabs component to switch between views.  
Category: Navigation  

### Usage

```python
import dash_mantine_components as dmc

dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab("Gallery", value="gallery"),
                dmc.TabsTab("Messages", value="messages"),
                dmc.TabsTab("Settings", value="settings"),
            ]
        ),
        dmc.TabsPanel("Gallery tab content", value="gallery"),
        dmc.TabsPanel("Messages tab content", value="messages"),
        dmc.TabsPanel("Settings tab content", value="settings"),
    ],
    color="red", # default is blue
    orientation="horizontal", # or "vertical"
    variant="default", # or "outline" or "pills"
    value="gallery"
)
```

### Variants

Use the `variant` can be set to `"default"`,  `"outline"` or `"pills"`

### Change colors
To change colors of all tabs, set `color` on `Tabs` component, to change color of the individual tab, set `color`
on `TabsTab`.


```python
import dash_mantine_components as dmc

component = dmc.Tabs(
    color="teal",
    value="first",
    children=[
        dmc.TabsList(
            children=[
                dmc.TabsTab("Teal tab", value="first"),
                dmc.TabsTab("Blue tab", value="second", color="blue"),
            ]
        ),
        dmc.TabsPanel(
            "First tab color is teal, it gets this value from context",
            value="first",
            pt="xs",
        ),
        dmc.TabsPanel(
            "Second tab color is blue, it gets this value from props, props have the priority and will override context value",
            value="second",
            pt="xs",
        ),
    ],
)
```
### Icons on right or left

You can use any dash component as icon and rightSection in dmc.TabsTab component.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab(
                    "Gallery",
                    leftSection=DashIconify(icon="tabler:photo"),
                    value="gallery",
                ),
                dmc.TabsTab(
                    "Messages",
                    leftSection=DashIconify(icon="tabler:message"),
                    value="messages",
                ),
                dmc.TabsTab(
                    "Settings",
                    leftSection=DashIconify(icon="tabler:settings"),
                    value="settings",
                ),
            ]
        ),
    ],
    value="messages",
)
```
```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab(
                    "Messages",
                    rightSection=dmc.Badge(
                        "6", size="xs", p=0, variant="filled", circle=True
                    ),
                    value="messages",
                ),
                dmc.TabsTab(
                    "Settings",
                    rightSection=DashIconify(icon="tabler:alert-circle", width=16),
                    value="settings",
                ),
            ]
        ),
    ],
    value="messages",
)
```
### Tabs Position

`Tabs` controls position is controlled with `grow` and `justify` properties in `TabsList` component. If `grow` property 
is set to `True`, controls will take 100% of available space and `justify` property is ignored.

```python
import dash_mantine_components as dmc

dmc.Tabs(
    children=[
        dmc.TabsList(
            justify="right",
            grow=False,
            children=[...],
        )
        # tabs panel below
    ]
)
```

### Separated Tabs

To display tab on the opposite side, set `margin-left` to auto with `ml="auto"` in `TabsTab` component.

```python
import dash_mantine_components as dmc

component = dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab("Gallery", value="gallery"),
                dmc.TabsTab("Messages", value="messages"),
                dmc.TabsTab("Settings", value="settings", ml="auto"),
            ]
        ),
    ],
    value="gallery",
)
```
### Inverted Tabs

To make tabs inverted, place `TabsPanel` components before `TabsList` and add `inverted=True` prop to `Tabs` component.

```python
import dash_mantine_components as dmc

component = dmc.Tabs(
    [
        dmc.TabsPanel("Gallery tab content", value="gallery", pb="xs"),
        dmc.TabsPanel("Messages tab content", value="messages", pb="xs"),
        dmc.TabsPanel("Settings tab content", value="settings", pb="xs"),
        dmc.TabsList(
            [
                dmc.TabsTab("Gallery", value="gallery"),
                dmc.TabsTab("Messages", value="messages"),
                dmc.TabsTab("Settings", value="settings", ml="auto"),
            ]
        ),
    ],
    value="gallery",
    inverted=True,
)
```
### Vertical Tabs placement

To change placement of `TabsList` in vertical orientation, set `placement` prop in `Tabs`.

### Disabled tabs

Set `disabled=True` prop on `TabsTab` component to disable tab. Disabled tab cannot be activated with mouse or keyboard,
and they will be skipped when user navigates with arrow keys:

```python
import dash_mantine_components as dmc

component = dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab("Gallery", value="gallery"),
                dmc.TabsTab("Messages", value="messages", disabled=True),
                dmc.TabsTab("Settings", value="settings"),
            ]
        ),
        dmc.TabsPanel("Gallery tab content", value="gallery"),
        dmc.TabsPanel("Messages tab content", value="messages"),
        dmc.TabsPanel("Settings tab content", value="settings"),
    ],
    value="gallery"
)
```
### Activation mode
By default, tabs are activated when user presses arrows keys or Home/End keys. To disable that set
`activateTabWithKeyboard=False` on `Tabs` component.  

This can be useful if the tab content is updated in a long running callback.  Try clicking on a tab to focus, then
navigate to other tabs with arrow keys, or home/end keys:

```python
import dash_mantine_components as dmc

dmc.Tabs(
    activateTabWithKeyboard=False,
    children=[
        # tabs content
    ],    
)
```

### Tab deactivation
By default, active tab cannot be deactivated. To allow that set `allowTabDeactivation=True` on Tabs component:

Try clicking on the active tab to see the deactivated state:


### Unmount inactive tabs
By default, inactive `TabsPanel` will stay mounted; to unmount inactive tabs, set `keepMounted=False` on Tabs. This is
useful when you want to render components that impact performance inside `TabsPanel`. Note that components that are
rendered inside `TabsPanel` will reset their state on each mount (tab change).

### Content As Callback

Attach a callback to the Tabs `value` prop and update a container's `children` property in your callback.

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

from utils.utils import create_graph

component = html.Div(
    [
        dmc.Tabs(
            [
                dmc.TabsList(
                    [
                        dmc.TabsTab("Tab one", value="1"),
                        dmc.TabsTab("Tab two", value="2"),
                    ]
                ),
            ],
            id="tabs-example",
            value="1",
        ),
        html.Div(id="tabs-content", style={"paddingTop": 10}),
    ]
)


@callback(Output("tabs-content", "children"), Input("tabs-example", "value"))
def render_content(active):
    if active == "1":
        return [dmc.Text("Tab One selected", my=10), create_graph()]
    else:
        return [dmc.Text("Tab Two selected", my=10), create_graph()]
```
### Content As Tab Children

Instead of displaying the content through a callback, you can embed the content directly as the `children` property in
the Tab component.

```python
import dash_mantine_components as dmc

from utils.utils import create_graph

component = dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab("Tab one", value="1"),
                dmc.TabsTab("Tab two", value="2"),
                dmc.TabsTab("Tab three", value="3"),
            ]
        ),
        dmc.TabsPanel(create_graph(), value="1"),
        dmc.TabsPanel(create_graph(), value="2"),
        dmc.TabsPanel(create_graph(), value="3"),
    ],
    value="1",
)
```
### Styling the Tabs

#### With Props  

This example demonstrates how to style tabs using only props, without requiring additional CSS files:  

- **Variant**: Sets `variant="pills"` to make the tabs resemble buttons.  
- **Grow Prop**: Uses the `grow` prop on the `TabsList` component, causing the tabs to expand and fill the full width of the viewport.  
- **Border**: Adds a border around the tabs with the `bd` prop. For more details, see the [Style Props](/style-props) section.  
- **Border Color**: Sets the border color using the Mantine CSS variable `var(--mantine-color-default-border)`, ensuring a border color that works well in both light and dark modes. See the [Colors](/colors) section for more details.  
- **Active Tab Color**: Sets the active tab color with `color="green.3"`. This specifies a lighter shade of a built-in color. Mantine’s color palette includes 10 shades for each color, indexed from 0 (lightest) to 9 (darkest). Learn more in the [Colors](/colors) section.  
- **Auto Contrast**: Enables `autoContrast=True` to automatically adjust the text color for better readability when using lighter or darker background colors. Additional details can be found in the [Colors](/colors) section.  

```python
import dash_mantine_components as dmc

component = dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab("Gallery", value="gallery"),
                dmc.TabsTab("Messages", value="messages"),
                dmc.TabsTab("Settings", value="settings"),
            ],
            grow=True,
            bd="1px solid var(--mantine-color-default-border)"
        ),
        dmc.TabsPanel("Gallery tab content", value="gallery"),
        dmc.TabsPanel("Messages tab content", value="messages"),
        dmc.TabsPanel("Settings tab content", value="settings"),
    ],
    color="green.3",
    autoContrast=True,
    variant="pills",
    value="gallery",
)
```
#### With Styles API  

This example demonstrates styling tabs using the Styles API, allowing for precise control over the appearance of each element in the tabs component. For more information, see the Styles API section below.  

```python
import dash_mantine_components as dmc

component = dmc.Tabs(
    [
        dmc.TabsList(
            [
                dmc.TabsTab("Gallery", value="gallery"),
                dmc.TabsTab("Messages", value="messages"),
                dmc.TabsTab("Settings", value="settings"),
            ],
            grow=True
        ),
        dmc.TabsPanel("Gallery tab content", value="gallery"),
        dmc.TabsPanel("Messages tab content", value="messages"),
        dmc.TabsPanel("Settings tab content", value="settings"),
    ],
    value="gallery",
    classNames={"tab": "dmc-tabs"}
)
```
Put the following in a `.css` file in the `/assets` folder

```css
.dmc-tabs {
  position: relative;
  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));

  &:first-of-type {
    border-radius: 4px 0 0 4px;
  }

  &:last-of-type {
    border-radius: 0 4px 4px 0;
  }

  & + & {
    border-left-width: 0;
  }

  &:hover {
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
  }

  &[data-active] {
    z-index: 1;
    background-color: var(--mantine-color-blue-filled);
    border-color: var(--mantine-color-blue-filled);
    color: var(--mantine-color-white);

    &:hover {
      background-color: var(--mantine-color-blue-filled-hover);
    }
  }
}

```

### 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.


Refer to the Mantine Tabs Style API [interactive demo](https://mantine.dev/core/tabs/#styles-api) for help in identifying each selector.

#### Tabs Selectors


| Selector     | Static selector             | Description                              |
|--------------|------------------------------|------------------------------------------|
| root         | .mantine-Tabs-root           | Root element (Tabs component)            |
| list         | .mantine-Tabs-list           | List of tabs (Tabs.List component)       |
| panel        | .mantine-Tabs-panel          | Panel with tab content (Tabs.Panel component) |
| tab          | .mantine-Tabs-tab            | Tab button (Tabs.Tab component)          |
| tabLabel     | .mantine-Tabs-tabLabel       | Label of Tabs.Tab                        |
| tabSection   | .mantine-Tabs-tabSection     | Left and right sections of Tabs.Tab      |



#### Tabs CSS Variables

| Selector | Variable        | Description                                                  |
|----------|-----------------|--------------------------------------------------------------|
| root     | --tabs-color    | Controls colors of Tabs.Tab, only applicable for `pills` or `default` variant |
|          | --tabs-radius   | Controls Tabs.Tab border-radius                              |



#### Tabs Data Attributes

| Selector          | Attribute          | Condition                                 | Value                        |
|-------------------|--------------------|-------------------------------------------|------------------------------|
| root, tab, list, panel | data-orientation  | –                                         | Value of `orientation` prop |
| root, tab, list   | data-placement     | `orientation` is "vertical" on Tabs component | Value of `placement` prop   |
| tab, list         | data-inverted      | `inverted` prop is set on Tabs component  | –                            |
| list              | data-grow          | `grow` prop is set on Tabs.List component | –                            |
| tabSection        | data-position      | –                                         | Position of the section (left or right) |




### Keyword Arguments
#### Tabs

- children (a list of or a singular dash component, string or number; required):
    Tabs content.

- id (string; optional):
    Base id, used to generate ids to connect labels with controls,
    generated randomly by default.

- activateTabWithKeyboard (boolean; optional):
    Determines whether tab should be activated with arrow key press,
    `True` by default.

- allowTabDeactivation (boolean; optional):
    Determines whether tab can be deactivated, `False` by default.

- 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 active item 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 for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`. Only applicable when `variant="pills"`.

- 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):
    Changes colors of `Tabs.Tab` components when variant is `pills` or
    `default`, does nothing for other variants.

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

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

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

- inverted (boolean; optional):
    Determines whether tabs should have inverted styles, `False` by
    default.

- keepMounted (boolean; optional):
    If set to `False`, `Tabs.Panel` content will be unmounted when the
    associated tab is not active, `True` by default.

- keepMountedMode (a value equal to: 'activity', 'display-none'; optional):
    Controls how inactive tabs content is hidden when `keepMounted` is
    `True`, `'activity'` – hidden with `Activity` component,
    `'display-none'` – hidden with `display: none` styles
    @,default,'activity'.

- 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:

- loop (boolean; optional):
    Determines whether arrow key presses should loop though items
    (first to last and last to first), `True` by default.

- 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.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Tabs orientation, `'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.

- placement (a value equal to: 'left', 'right'; optional):
    `Tabs.List` placement relative to `Tabs.Panel`, applicable only
    when `orientation="vertical"`, `'left'` by default.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` 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.

- value (string; optional):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; required):
    `Tabs.Tab` components.

- 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.

- 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.

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

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

- grow (boolean; optional):
    Determines whether tabs should take all available space, `False`
    by default.

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

- justify (optional):
    Tabs alignment, `flex-start` by default.

- 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.

- 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; required):
    Panel content.

- 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.

- 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.

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

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

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

- keepMounted (boolean; optional):
    If set to `True`, the content will be kept mounted, even if
    `keepMounted` is set `False` in the parent `Tabs` component.

- 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.

- 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.

- value (string; required):
    Value of associated control.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    Tab label.

- 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.

- buttonProps (dict; optional):
    Props passed down to the `Button` component.

- 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, controls control
    color based on `variant`.

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

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

- disabled (boolean; optional):
    Indicates disabled state.

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

- leftSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the left side of the label, for example,
    icon.

- 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.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content displayed on the right side of the label, for example,
    icon.

- size (string | number; optional):
    Size passed from parent component.

- 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.

- value (string; required):
    Value of associated panel.

- variant (string; optional):
    variant.

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

## Tree  
Display a Tree structure  
Category: Navigation  

### Simple Example

`Tree` component is used to display hierarchical data. `Tree` component has minimal styling by default, you can
customize styles with Styles API.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Tree(data=data)
```
### Data

Data passed to the `data` prop should follow these rules:

- Data must be an array
- Each item in the array represents a node in the tree
- Each node must be a dictionary with value and label keys
- Each node can have children key with an array of child nodes
- The value of each node must be unique


```python
# ✅ Valid data, all values are unique
valid_data = [
    {
        "value": "src",
        "label": "src",
        "children": [
            {"value": "src/components", "label": "components"},
            {"value": "src/hooks", "label": "hooks"},
        ],
    },
    {"value": "package.json", "label": "package.json"},
]

# ❌ Invalid data, values are not unique (components is used twice)
invalid_data = [
    {
        "value": "src",
        "label": "src",
        "children": [{"value": "components", "label": "components"}],
    },
    {"value": "components", "label": "components"},
]

```

### Icon Side

The expanded and collapsed icons are on the left side of the label by default.  To move them to the right side, set `iconSide="right`


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Tree(data=data, iconSide="right")
```
### Remove Expanded Icon

By default the `Tree` includes a chevron to indicate expanded and collapsed nodes.  To remove the icons, set `expandedIcon=None`


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Tree(data=data, expandedIcon=None)
```
### Change Expanded Icon

Use any icon in the `expandedIcon` prop.  If no `collapsedIcon` is set, the icon will be rotated to indicate the collapsed state.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from .data import data

component = dmc.Tree(
    data=data,
    expandedIcon=DashIconify(icon="fa6-solid:arrow-down")
)
```
### Change Expanded and Collapsed Icons

When both the  `expandedIcon` and `collapsedIcon` props are set, the icons will not be rotated.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from .data import data

component = dmc.Tree(
    data=data,
    expandedIcon=DashIconify(icon="fa6-regular:folder-open"),
    collapsedIcon=DashIconify(icon="fa6-solid:folder-plus"),
)
```
### Set Expanded state

To set the state of the nodes, use the `expanded` prop.  Note that leaf nodes can be included, but it will only change
the expanded/collapsed display of the nodes with children.


```python
import json
import dash_mantine_components as dmc
from dash import  callback, Input, Output
from .data import data

component = dmc.Stack([
    dmc.Tree(
        data=data,
        expanded=[
            "node_modules",
            "node_modules/@mantine",
            "node_modules/@mantine/form",
            "node_modules/@mantine/form/index.d.ts",
        ],
        id="tree-expanded"
    ),
    dmc.CodeHighlight(id="expanded-nodes", code="", language="json"),
])


@callback(
    Output("expanded-nodes", "code"),
    Input("tree-expanded", "expanded")
)
def update(expanded):
    return  json.dumps( expanded, indent=4)
```
### Connecting lines
Set `withLines` prop to display connecting lines showing parent-child relationships. Lines adapt to `levelOffset` spacing automatically.

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

component = dmc.Tree(
    data=data,
    withLines=True,
    levelOffset=40,
    expanded=[
        "node_modules",
        "node_modules/@mantine",
        "node_modules/@mantine/form",
        "node_modules/@mantine/form/index.d.ts",
    ],
)
```
### Expand or Collapse All

Expand all will include all items of the `data` prop in the `expanded` prop.

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

component = dmc.Box([
    dmc.SegmentedControl(
        id="tree-expand-all",
        data=["Expand All", "Collapse All"],
        value="Collapse All",
        mb="sm"
    ),

    dmc.Tree(
        data=data,
        id="tree-all"
    )
],p="lg")

@callback(
    Output("tree-all", "expanded"),
    Input("tree-expand-all", "value")
)
def update(value):
    if value=="Collapse All":
        return []
    return '*'
```
### Expanded State in callbacks.

When using the expanded property as a callback input to track the user's selected expanded state, note that the `expanded`
list may include or exclude leaf nodes (nodes without children) depending on user interaction.

This happens because users can toggle the state of leaf nodes, even though they don’t affect how the tree data is 
displayed. To handle this, ensure your callback logic accounts for the possibility that leaf nodes may or may not
be present in the `expanded` prop.

Note also that the nodes included in the `expanded` prop are ordered based on user interation and the order of operations.

### With Checkboxes

Use the `checked` prop to set or track the checked items.  Note that only leaves can be checked, and the order will be
based on user interation and the order of operations. 

```python
import json
import dash_mantine_components as dmc
from dash import callback, Input, Output
from .data import data

component = dmc.Stack([
    dmc.Tree(data=data, checkboxes=True, id="tree-checkboxes" ),
    dmc.CodeHighlight(id="checked-nodes", code="", language="json"),
])


@callback(
    Output("checked-nodes", "code"),
    Input("tree-checkboxes", "checked")
)
def update(checked):
    return  json.dumps( checked, indent=4)
```
### Custom Tree rendering

By default, `dmc.Tree` includes a built-in `renderNode` function that covers most common use cases. It requires no 
JavaScript and supports some customization through props like `checkboxes`, `expandedIcon`, and `iconSide`.

If you need more control over how each node is rendered, such as using custom icons based on the data, arranging content
differently or advanced styling, you can provide your own `renderNode` function written in JavaScript. This advanced
feature is designed for use cases that go beyond what the built-in options support.

#### Ignored Props

When you supply your own `renderNode` function, the following props are ignored:

* `checkboxes`
* `expandedIcon`
* `collapsedIcon`
* `iconSide`

These props only apply when you're using the default built-in renderer. If you're using a custom `renderNode`, you are
responsible for rendering icons, checkboxes, or any other visual element.


#### Example: Files Tree 


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
import dash_iconify  # required in order to use DashIconify in the renderNode function
from .data import data


component = dmc.Tree(
    data=data,
    renderNode={"function": "myLeaf"},
    expanded=[
        "node_modules",
        "node_modules/react",
    ]
)
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.myLeaf = function (payload) {
  const dmc = window.dash_mantine_components;
  const iconify = window.dash_iconify;

  function getIcon(name, isFolder, expanded) {
    const size = 14;

    if (name.endsWith('package.json')) {
      return React.createElement(iconify.DashIconify, {
        icon: 'logos:npm-icon',
        width: size,
        height: size
      });
    }

    if (
      name.endsWith('.ts') ||
      name.endsWith('.tsx') ||
      name.endsWith('tsconfig.json')
    ) {
      return React.createElement(iconify.DashIconify, {
        icon: 'logos:typescript-icon',
        width: size,
        height: size
      });
    }

    if (name.endsWith('.css')) {
      return React.createElement(iconify.DashIconify, {
        icon: 'vscode-icons:file-type-css',
        width: size,
        height: size
      });
    }

    if (isFolder) {
      return React.createElement(iconify.DashIconify, {
        icon: expanded ? 'tabler:folder-open' : 'tabler:folder',
        width: size,
        height: size,
        color: '#f59f00' // Mantine yellow-9
      });
    }

    return null;
  }

  const { node, expanded, hasChildren, elementProps } = payload;

  return React.createElement(
    dmc.Group,
    { key: payload.node.value, gap: 5, ...elementProps },
    getIcon(node.value, hasChildren, expanded),
    React.createElement('span', null, node.label)
  );
};
```

#### Example:  Tree with Checkboxes


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.



If the "With Checkboxes" example above does not meet your needs, you can use the `renderNode` prop to fully customize
how each tree node is rendered using JavaScript.

When using a custom `renderNode`, you are responsible for implementing the checkbox and expand/collapse logic yourself.
To handle the checked state, you'll need to render a `CheckboxIndicator` manually inside your custom render function
and call `tree.checkNode(...)` or `tree.uncheckNode(...)` to update it.


```python
import json
import dash_mantine_components as dmc
from dash import callback, Input, Output
import dash_iconify # necessary to import here in order to use in the renderNode function
from .data import data

component = dmc.Stack([
    dmc.Tree(
        data=data,
        levelOffset=23,
        expandOnClick=False,
        renderNode={"function": "myLeafCheckbox"},
        id="tree-checkboxes-renderNode" ),
    dmc.CodeHighlight(id="checked-nodes-renderNode", code="", language="json"),
])


@callback(
    Output("checked-nodes-renderNode", "code"),
    Input("tree-checkboxes-renderNode", "checked")
)
def update(checked):
    return  json.dumps( checked, indent=4)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.myLeafCheckbox = function (payload) {
  const React = window.React;
  const dmc = window.dash_mantine_components;
  const iconify = window.dash_iconify;

  const { node, expanded, hasChildren, elementProps, tree } = payload;

  const checked = tree.isNodeChecked(node.value);
  const indeterminate = tree.isNodeIndeterminate(node.value);

  return React.createElement(
    dmc.Group,
    { key: node.value, gap: "xs", ...elementProps },
    [
      React.createElement(dmc.CheckboxIndicator, {
        key: "checkbox",
        checked,
        indeterminate,
        onClick: (e) => {
          e.stopPropagation();
          if (checked) {
            tree.uncheckNode(node.value);
          } else {
            tree.checkNode(node.value);
          }
        },
      }),
      React.createElement(
        dmc.Group,
        {
          key: "label-group",
          gap: 5,
          onClick: () => tree.toggleExpanded(node.value),
        },
        [
          React.createElement("span", { key: "label" }, node.label),
          hasChildren &&
            React.createElement(iconify.DashIconify, {
              key: "icon",
              icon: "tabler:chevron-down",
              width: 14,
              style: {
                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
                transition: "transform 0.2s ease",
              },
            }),
        ]
      ),
    ]
  );
};
```

#### renderNode Arguments

The `renderNode` function receives a single `payload` object with the following fields:

```js
export interface RenderTreeNodePayload {
  /** Node level in the tree */
  level: number;

  /** `true` if the node is expanded, applicable only for nodes with `children` */
  expanded: boolean;

  /** `true` if the node has non-empty `children` array or `hasChildren` is set to `true` */
  hasChildren: boolean;

  /** `true` if the node is selected */
  selected: boolean;

  /** `true` if the node's children are currently being loaded */
  isLoading: boolean;

  /** Error from the last failed load attempt, or `null` */
  loadError: Error | null;

  /** Node data from the `data` prop of `Tree` */
  node: TreeNodeData;

  /** Tree controller instance, return value of `useTree` hook */
  tree: TreeController;

  /** Props to spread into the root node element */
  elementProps: {
    className: string;
    style: React.CSSProperties;
    onClick: (event: React.MouseEvent) => void;
    'data-selected': boolean | undefined;
    'data-value': string;
  };

  /** Props to spread into the drag handle element when `withDragHandle` is set on `Tree`,
   * `undefined` otherwise */
  dragHandleProps: { onMouseDown: (event: React.MouseEvent) => void } | undefined;
}

```

### More examples

See the upstream [Mantine Tree documentation](https://mantine.dev/core/tree/) for other custom examples including features such as drag-and-drop,
search with `Highlight`, `single-selection`, `hover-revealed actions menu,  and `withLines`



### 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.


#### Tree Selectors

| Selector | Static selector         | Description                         |
|----------|--------------------------|-------------------------------------|
| root     | .mantine-Tree-root       | Root element                        |
| node     | .mantine-Tree-node       | Node element (`li`), contains label and subtree elements |
| subtree  | .mantine-Tree-subtree    | Subtree element (`ul`)              |
| label    | .mantine-Tree-label      | Node label                          |



#### Tree CSS Variables

| Selector | Variable        | Description                           |
|----------|-----------------|---------------------------------------|
| root     | --level-offset  | Controls offset of nested tree levels |



#### Tree Data Attributes

| Selector     | Attribute      | Condition              | Value                  |
|--------------|----------------|------------------------|------------------------|
| node, label  | data-selected  | The node is selected   | –                      |
| node         | data-level     | –                      | Nesting level of the node |



### Keyword Arguments
#### Tree

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

- allowRangeSelection (boolean; optional):
    Determines whether tree nodes range can be selected with click
    when Shift key is pressed, `True` by default.

- 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.

- checkOnSpace (boolean; optional):
    Determines whether tree node should be checked on space key press,
    `False` by default.

- checkboxes (boolean; optional):
    Determines if checkboxes should be rendered, `False` by default.
    Ignored when using a custom `renderNode` function.

- checked (list of strings; optional):
    Determines checked nodes as a list of values (note that only
    leaves can be checked), `[]` by default.

- checkedDebounce (number; default 0):
    Determines the debounce time in milliseconds for the `checked`
    property, `0` by default.

- 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.

- clearSelectionOnOutsideClick (boolean; optional):
    Determines whether selection should be cleared when user clicks
    outside of the tree, `False` by default.

- collapsedIcon (a list of or a singular dash component, string or number; optional):
    Collapsed state icon. Ignored when using a custom `renderNode`
    function.

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

- data (list of dicts; required):
    Data used to render nodes.

    `data` is a list of dicts with keys:

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

- expandOnClick (boolean; optional):
    Determines whether tree node with children should be expanded on
    click, `True` by default.

- expandOnSpace (boolean; optional):
    Determines whether tree node with children should be expanded on
    space key press, `True` by default.

- expanded (list of strings; optional):
    Determines expanded nodes as a list of values or `'*'` for all,
    `[]` by default.

- expandedIcon (a list of or a singular dash component, string or number; default <AccordionChevron />):
    Expanded state icon. Ignored when using a custom `renderNode`
    function.

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

- iconSide (a value equal to: 'left', 'right', 'none'; default 'left'):
    Side to display expanded/collapsed state icon on, `'left'` by
    default. Ignored when using a custom `renderNode` function.

- keepMounted (boolean; optional):
    If set, subtree content is kept mounted when collapsed. React 19
    `Activity` is used to preserve state. default False.

- levelOffset (string | number; optional):
    Horizontal padding of each subtree level, key of `theme.spacing`
    or any valid CSS value, `'lg'` by default.

- 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.

- renderNode (boolean | number | string | dict | list; optional):
    A function to render the tree node label. Replaces the default
    component rendering  See
    https://www.dash-mantine-components.com/functions-as-props.

- selectOnClick (boolean; optional):
    Determines whether node should be selected on click, `False` by
    default.

- selected (list of strings; optional):
    Determines selected nodes as a list of values, `[]` 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.

- variant (string; optional):
    variant.

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

- withLines (boolean; optional):
    If set, connecting lines are rendered showing parent-child
    relationships default False.

## Affix  
Use the Affix component to show content at any fixed positon inside your app.  
Category: Overlay  

### Simple Example

Look at the bottom right!

```python
import dash_mantine_components as dmc

component = dmc.Affix(
    dmc.Button("I'm in an Affix Component"), position={"bottom": 20, "right": 20}
)
```
### Position prop
The `position` prop controls the affix position on the screen. By default, the component is positioned at `{ bottom: 0, right: 0 }`.  

Accepted Keys:
- `top` (MantineSize | str | number) – Distance from the top.  
- `left`(MantineSize | str | number) – Distance from the left.  
- `bottom`(MantineSize | str | number) – Distance from the bottom.  
- `right` (MantineSize | str | number) – Distance from the right.  

Accepted Value Types:
1. MantineSize (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) – Uses predefined spacing values.  
2. String (CSS units) (e.g., `"10px"`, `"5rem"`, `"50%"`) – Allows precise control using CSS units.  
3. Number (e.g., `10`, `50`) – Treated as pixel values (`px`).  


Example:
```python
import dash_mantine_components as dmc

dmc.Affix(
    dmc.Button("Floating Button"),
    position={"bottom": "20px", "right": "lg"} 
)
```


### 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.


#### Affix selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root     | .mantine-Affix-root | Root element |

#### Affix CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root     | --affix-z-index  | Controls `z-index` property |
| root     | --affix-top      | Controls `top` property |
| root     | --affix-bottom   | Controls `bottom` property |
| root     | --affix-left     | Controls `left` property |
| root     | --affix-right    | Controls `right` property |



### Keyword Arguments
#### Affix

- children (a list of or a singular dash component, string or number; optional)

- 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.

- 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.

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

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

- 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.

- position (dict; optional):
    Affix position on screen @,default,{ bottom: 0, right: 0 }.

    `position` is a dict with keys:

- 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.

- variant (string; optional):
    variant.

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

- withinPortal (boolean; optional):
    Determines whether the component is rendered within `Portal`
    @,default,True.

- zIndex (optional):
    Root element `z-index` property @,default,200.

## Drawer  
Use Drawer component to create collapsible sidebars.  
Category: Overlay  

### Simple Example

This is a basic example of dmc.Drawer. Set the `opened` property to open the drawer. The drawer can be controlled in following ways:

* programmatically (using callbacks)
* by clicking on the cross button (if not disabled using `withCloseButton` prop)
* by clicking outside the drawer area (if not disabled using `closeOnClickOutside` prop)
* by pressing the ESC key (if not disabled using `closeOnEscape` prop)

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

component = html.Div(
    [
        dmc.Button("Open Drawer", id="drawer-demo-button"),
        dmc.Drawer(
            title="Drawer Example",
            id="drawer-simple",
            padding="md",
        ),
    ]
)


@callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_demo(n_clicks):
    return True
```
### Different Sizes

Set the size of the drawer using the `size` prop.

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

component = html.Div(
    [
        dmc.Drawer(title="Size: md", id="drawer-size-md", padding="md", size="md"),
        dmc.Drawer(
            title="Size: 450px",
            id="drawer-size-450",
            padding="md",
            size=450,
        ),
        dmc.Drawer(
            title="Size: 55%",
            id="drawer-size-55",
            padding="md",
            size="55%",
        ),
        dmc.Drawer(
            title="Size: full",
            id="drawer-size-full",
            padding="md",
            size="100%",
        ),
        dmc.Group(
            [
                dmc.Button("md", id="md-drawer-button"),
                dmc.Button("450px", id="450-drawer-button"),
                dmc.Button("55%", id="55-drawer-button"),
                dmc.Button("full", id="full-drawer-button"),
            ]
        ),
    ]
)


def toggle_drawer(n_clicks, opened):
    return not opened


for size in ["md", "450", "55", "full"]:
    callback(
        Output(f"drawer-size-{size}", "opened"),
        Input(f"{size}-drawer-button", "n_clicks"),
        State(f"drawer-size-{size}", "opened"),
        prevent_initial_call=True,
    )(toggle_drawer)
```
### Placement

By default, Drawer will start to appear from the left, but this position can be customized by setting the `position` 
prop.

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

data = [
    ["Left (Default)", "left"],
    ["Top", "top"],
    ["Right", "right"],
    ["Bottom", "bottom"],
]

component = html.Div(
    [
        dmc.Drawer(
            id="drawer-position",
        ),
        dmc.Group(
            align="center",
            gap="xl",
            children=[
                dmc.RadioGroup(
                    dmc.Group([dmc.Radio(label, value=value) for label, value in data]),
                    id="drawer-position-radio",
                    value="left",
                ),
                dmc.Button("Open Drawer", id="drawer-position-button"),
            ],
        ),
    ]
)


@callback(
    Output("drawer-position", "opened"),
    Output("drawer-position", "position"),
    Input("drawer-position-button", "n_clicks"),
    State("drawer-position-radio", "value"),
    prevent_initial_call=True,
)
def toggle_drawer(n_clicks, position):
    return True, position
```
### Transition

You can customize transition, timing function and duration for Drawer transition.

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

component = html.Div(
    [
        dmc.Button("Open Drawer", id="drawer-transition-button"),
        dmc.Drawer(
            title="Drawer Example",
            id="drawer-fancy",
            padding="md",
            transitionProps={
                "transition": "rotate-left",
                "duration": 1000,
                "timingFunction": "ease",
            },
        ),
    ]
)


@callback(
    Output("drawer-fancy", "opened"),
    Input("drawer-transition-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_demo(n_clicks):
    return True
```
### Drawer Stack

Use `DrawerStack` component to render multiple drawers at the same time. `DrawerStack` keeps track of opened drawers, 
manages `z-index` values, focus trapping and `closeOnEscape` behavior.

Differences from using multiple Drawer components:

- `DrawerStack` children must be `ManagedDrawer` components
- `DrawerStack` manages `z-index` values – drawers that are opened later will always have higher `z-index` value disregarding their order in the DOM
- `DrawerStack` disables focus trap and `Escape` key handling for all drawers except the one that is currently opened
- Drawers that are not currently visible are present in the DOM but are hidden with `opacity: 0` and `pointer-events: none`
- Only one overlay is rendered at a time


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


component = dmc.Center([
    dmc.DrawerStack(
        id="drawer-stack",
        children=[
            dmc.ManagedDrawer(
                id="drawer-delete-page",
                title="Delete this page?",
                children=[
                    dmc.Text("Are you sure you want to delete this page? This action cannot be undone."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="drawer-cancel-1", variant="default"),
                            dmc.Button("Delete", id="drawer-delete", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedDrawer(
                id="drawer-confirm-action",
                title="Confirm action",
                children=[
                    dmc.Text("Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="drawer-cancel-2", variant="default"),
                            dmc.Button("Confirm", id="drawer-confirm", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedDrawer(
                id="drawer-really-confirm-action",
                title="Really confirm action",
                children=[
                    dmc.Text("Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?"),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="drawer-cancel-3", variant="default"),
                            dmc.Button("Confirm", id="drawer-final-confirm", color="red"),
                        ],
                    ),
                ],
            ),
        ]
    ),
    dmc.Button("Open drawer", id="drawer-stack-open")
])


@callback(
    Output("drawer-stack", "open"),
    Output("drawer-stack", "closeAll"),
    Input("drawer-stack-open", "n_clicks"),
    Input("drawer-cancel-1", "n_clicks"),
    Input("drawer-cancel-2", "n_clicks"),
    Input("drawer-cancel-3", "n_clicks"),
    Input("drawer-delete", "n_clicks"),
    Input("drawer-confirm", "n_clicks"),
    Input("drawer-final-confirm", "n_clicks"),
    prevent_initial_call=True,
)
def control_modals(*_):
    trigger = ctx.triggered_id
    if trigger == "drawer-stack-open":
        return "drawer-delete-page", False
    if trigger in ("drawer-cancel-1", "drawer-cancel-2", "drawer-cancel-3", "drawer-final-confirm"):
        return None, True
    if trigger == "drawer-delete":
        return "drawer-confirm-action", False
    if trigger == "drawer-confirm":
        return "drawer-really-confirm-action", False
    return no_update, no_update
```
### 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.


#### Drawer Selectors

| Selector  | Static selector             | Description                                                             |
| --------- | --------------------------- | ----------------------------------------------------------------------- |
| `root`    | `.mantine-Drawer-root`       | Root element                                                            |
| `inner`   | `.mantine-Drawer-inner`      | Element used to center modal, has fixed position, takes entire screen    |
| `content` | `.mantine-Drawer-content`    | Drawer.Content root element                                              |
| `header`  | `.mantine-Drawer-header`     | Contains title and close button                                          |
| `overlay` | `.mantine-Drawer-overlay`    | Overlay displayed under the Drawer.Content                               |
| `title`   | `.mantine-Drawer-title`      | Drawer title (`h2` tag), displayed in the header                         |
| `body`    | `.mantine-Drawer-body`       | Drawer body, displayed after header                                      |
| `close`   | `.mantine-Drawer-close`      | Close button                                                            |



#### Drawer CSS variables


| Selector | Variable          | Description                              |
|----------|-------------------|------------------------------------------|
| root     | --drawer-offset    | Controls margin of Drawer.Content        |
|          | --drawer-size      | Controls width of Drawer.Content         |
|          | --drawer-flex      | Controls flex property of Drawer.Content |
|          | --drawer-align     | Controls align-items property of Drawer.Content |
|          | --drawer-justify   | Controls justify-content property of Drawer.Content |
|          | --drawer-height    | Controls height property of Drawer.Content |



### Keyword Arguments
#### Drawer

- children (a list of or a singular dash component, string or number; optional):
    Drawer content.

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

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

- 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.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

- closeOnClickOutside (boolean; optional):
    Determines whether the modal/drawer should be closed when user
    clicks on the overlay, `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether `onClose` should be called when user presses
    the escape key, `True` by default.

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

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

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

- keepMounted (boolean; optional):
    If set modal/drawer will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead, `False` by
    default.

- 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:

- lockScroll (boolean; optional):
    Determines whether scroll should be locked when `opened={True}`,
    `True` by default.

- 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.

- offset (string | number; optional):
    Drawer container offset from the viewport end, `0` by default.

- opened (boolean; default False):
    Determines whether modal/drawer is opened.

- overlayProps (dict; optional):
    Props passed down to the `Overlay` component, can be used to
    configure opacity, `background-color`, styles and other
    properties.

    `overlayProps` is a dict with keys:

- padding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set content,
    header and footer padding, `'md'` by default.

- portalProps (dict; optional):
    Props passed down to the Portal component when `withinPortal` is
    set.

- position (a value equal to: 'top', 'left', 'bottom', 'right'; optional):
    Side of the screen on which drawer will be opened, `'left'` by
    default.

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

- removeScrollProps (dict; optional):
    Props passed down to react-remove-scroll, can be used to customize
    scroll lock behavior.

- returnFocus (boolean; optional):
    Determines whether focus should be returned to the last active
    element when `onClose` is called, `True` by default.

- shadow (optional):
    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by
    default.

- size (number; optional):
    Controls width of the content area, `'md'` 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.

- title (a list of or a singular dash component, string or number; optional):
    Drawer title.

- transitionProps (dict; optional):
    Props added to the `Transition` component that used to animate
    overlay and body, use to configure duration and animation type, `{
    duration: 200, transition: 'pop' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped, `True` by default.

- variant (string; optional):
    variant.

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

- withCloseButton (boolean; optional):
    Determines whether the close button should be rendered, `True` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be rendered, `True` by
    default.

- withinPortal (boolean; optional):
    Determines whether the component should be rendered inside
    `Portal`, `True` by default.

- zIndex (string | number; optional):
    `z-index` CSS property of the root element, `200` by default.
#### DrawerStack

- children (list of dicts; optional):
    ManagedDrawer content.

    `children` is a list of dicts with keys:

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

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

- close (string | list of strings; optional):
    Closes one or more drawers by ID. Accepts a single ID (string or
    dict) or a list of IDs.

- closeAll (boolean; optional):
    Closes all drawers in the DrawerStack.

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

- 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:

- open (string | list of strings; optional):
    Opens one or more drawers by ID. Accepts a single ID (string or
    dict) or a list of IDs.

- state (dict; optional):
    Current opened state of each drawer. Read only.

    `state` is a dict with keys:

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

- toggle (string | list of strings; optional):
    Toggles one or more drawers by ID. Accepts a single ID (string or
    dict) or a list of IDs.
#### ManagedDrawer

> Note:  ManagedDrawer is for use in the DrawerStack component. id is required.  open/closed state is controlled by DrawerStack.

- children (a list of or a singular dash component, string or number; optional):
    Drawer content.

- id (string; required):
    Unique ID to identify this component. Required for use with
    DrawerStack.

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

- 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.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

- closeOnClickOutside (boolean; optional):
    Determines whether the modal/drawer should be closed when user
    clicks on the overlay, `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether `onClose` should be called when user presses
    the escape key, `True` by default.

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

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

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

- keepMounted (boolean; optional):
    If set modal/drawer will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead, `False` by
    default.

- 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:

- lockScroll (boolean; optional):
    Determines whether scroll should be locked when `opened={True}`,
    `True` by default.

- 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.

- offset (string | number; optional):
    Drawer container offset from the viewport end, `0` by default.

- overlayProps (dict; optional):
    Props passed down to the `Overlay` component, can be used to
    configure opacity, `background-color`, styles and other
    properties.

    `overlayProps` is a dict with keys:

- padding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set content,
    header and footer padding, `'md'` by default.

- portalProps (dict; optional):
    Props passed down to the Portal component when `withinPortal` is
    set.

- position (a value equal to: 'top', 'left', 'bottom', 'right'; optional):
    Side of the screen on which drawer will be opened, `'left'` by
    default.

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

- removeScrollProps (dict; optional):
    Props passed down to react-remove-scroll, can be used to customize
    scroll lock behavior.

- returnFocus (boolean; optional):
    Determines whether focus should be returned to the last active
    element when `onClose` is called, `True` by default.

- shadow (optional):
    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by
    default.

- size (number; optional):
    Controls width of the content area, `'md'` 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.

- title (a list of or a singular dash component, string or number; optional):
    Drawer title.

- transitionProps (dict; optional):
    Props added to the `Transition` component that used to animate
    overlay and body, use to configure duration and animation type, `{
    duration: 200, transition: 'pop' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped, `True` by default.

- variant (string; optional):
    variant.

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

- withCloseButton (boolean; optional):
    Determines whether the close button should be rendered, `True` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be rendered, `True` by
    default.

- withinPortal (boolean; optional):
    Determines whether the component should be rendered inside
    `Portal`, `True` by default.

- zIndex (string | number; optional):
    `z-index` CSS property of the root element, `200` by default.

## HoverCard  
Use HoverCard component to show more information in a popover.  
Category: Overlay  

### Simple Example

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

component = dmc.HoverCard(
    withArrow=True,
    width=200,
    shadow="md",
    children=[
        dmc.HoverCardTarget(dmc.Button("Hover to reveal the card")),
        dmc.HoverCardDropdown(
            dmc.Text(
                "Hover card is revealed when user hovers over target element, it will be hidden once mouse is not over",
                size="sm",
            )
        ),
    ],
)
```
### Delays

Set open and close delays in ms with `openDelay` and `closeDelay` properties.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.HoverCard(
            shadow="md",
            openDelay=1000,
            children=[
                dmc.HoverCardTarget(dmc.Button("1000ms open delay")),
                dmc.HoverCardDropdown(dmc.Text("Opened with 1000ms delay", size="sm")),
            ],
        ),
        dmc.HoverCard(
            shadow="md",
            closeDelay=1000,
            children=[
                dmc.HoverCardTarget(dmc.Button("1000ms close delay")),
                dmc.HoverCardDropdown(dmc.Text("Closed with 1000ms delay", size="sm")),
            ],
        ),
    ]
)
```
### Interactive dropdown
By default, the dropdown is closed as soon as the pointer leaves the target: if there is a gap between the target and
the dropdown, or if the pointer travels diagonally over unrelated elements, the dropdown may close before the pointer reaches it.

Set the `interactive` prop to keep the dropdown open while the pointer travels toward it. It is required by WCAG 1.4.13
if the dropdown contains interactive content. Note that an interactive dropdown intercepts pointer events of the content it overlaps:


```python
import dash_mantine_components as dmc

component = dmc.Group(
    justify="center",
    children=[
        dmc.HoverCard(
            width=280,
            shadow="md",
            interactive=True,
            position="bottom-end",
            offset=40,
            children=[
                dmc.HoverCardTarget(
                    dmc.Button("Interactive")
                ),
                dmc.HoverCardDropdown(
                    dmc.Text(
                        [
                            "Move the pointer diagonally to the ",
                            dmc.Anchor(
                                "link",
                                href="https://mantine.dev",
                                target="_blank",
                            ),
                            ". The dropdown stays open.",
                        ],
                        size="sm",
                    )
                ),
            ],
        ),
        dmc.HoverCard(
            width=280,
            shadow="md",
            position="bottom-end",
            offset=40,
            children=[
                dmc.HoverCardTarget(
                    dmc.Button("Not interactive", variant="default")
                ),
                dmc.HoverCardDropdown(
                    dmc.Text(
                        "Moving the pointer outside the target may close this dropdown.",
                        size="sm",
                    )
                ),
            ],
        ),
    ],
)
```
### With Interactive elements

HoverCard is displayed only when mouse is over target element or dropdown, you can use anchors and buttons within dropdowns, using inputs is not recommended.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = (
    dmc.HoverCard(
        shadow="md",
        children=[
            dmc.HoverCardTarget(
                dmc.Avatar(
                    src="https://avatars.githubusercontent.com/u/91216500?v=4",
                    radius="xl",
                )
            ),
            dmc.HoverCardDropdown(
                [
                    dmc.Button(
                        "Snehil Vijay", fullWidth=True, mb=15, variant="outline"
                    ),
                    dmc.Group(
                        [
                            dmc.Anchor(
                                DashIconify(icon="logos:linkedin-icon", width=30),
                                href="https://www.linkedin.com/in/snehilvj/",
                                target="_blank",
                            ),
                            dmc.Anchor(
                                DashIconify(icon="logos:github-octocat", width=30),
                                href="https://www.github.com/snehilvj/",
                                target="_blank",
                            ),
                            dmc.Anchor(
                                DashIconify(icon="logos:twitter", width=30),
                                href="https://twitter.com/snehilvj",
                                target="_blank",
                            ),
                        ],
                        p=0,
                    ),
                ]
            ),
        ],
    ),
)
```
### Activation events

The `events` prop controls which interactions open the dropdown. Unspecified fields retain their default values. For
example, `events={"focus": False}` disables focus activation while leaving hover activation enabled.

| Field | Default | Description |
|---|---|---|
| `hover` | `True` | Opens the dropdown when the target is hovered with a mouse. |
| `focus` | `True` | Opens the dropdown when the target receives keyboard focus. |
| `touch` | `False` | Opens the dropdown when the target is tapped on a touch device. Requires `hover=True`. |

Focus activation follows [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) semantics.
The dropdown opens when the target receives keyboard focus, but not when it receives focus from a mouse click.

`touch` is disabled by default because touch devices do not support hover. Enabling it makes the first tap open the
dropdown instead of activating the target. Enable it only when the target has no separate tap action. `touch` extends
hover activation and has no effect when `hover=False`.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    justify="center",
    children=[
        dmc.HoverCard(
            width=280,
            shadow="md",
            events={"focus": False},
            children=[
                dmc.HoverCardTarget(dmc.Button("Hover only")),
                dmc.HoverCardDropdown(
                    dmc.Text(
                        "Focusing the target does not open this dropdown",
                        size="sm",
                    )
                ),
            ],
        ),
        dmc.HoverCard(
            width=280,
            shadow="md",
            events={"touch": True},
            children=[
                dmc.HoverCardTarget(dmc.Button("Hover, focus and touch")),
                dmc.HoverCardDropdown(
                    dmc.Text(
                        "This dropdown is also opened by a tap on touch devices",
                        size="sm",
                    )
                ),
            ],
        ),
    ],
)
```
### Keyboard interactions

| Key      | Description                                                                    |
| -------- | ------------------------------------------------------------------------------ |
| `Tab`    | Moves focus to the target and opens the dropdown if `events.focus` is enabled. |
| `Escape` | Closes the dropdown. This behavior can be disabled with `closeOnEscape=False`. |

The dropdown also closes when the user presses outside the target and dropdown. Set `closeOnClickOutside=False` to
disable this behavior. `clickOutsideEvents` is not supported by `HoverCard`; outside presses are always detected using
the `pointerdown` event.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    justify="center",
    children=[
        dmc.Button("Press Tab to move focus", variant="default"),
        dmc.HoverCard(
            width=280,
            shadow="md",
            children=[
                dmc.HoverCardTarget(
                    dmc.Button("Hover or focus me")
                ),
                dmc.HoverCardDropdown(
                    dmc.Text(
                        "The dropdown opens when the target is hovered or focused with the keyboard. Press Escape to close it.",
                        size="sm",
                    )
                ),
            ],
        ),
    ],
)
```
### HoverCard Target

Any component you specify in `HoverCardTarget` is wrapped by a `Box` component under the hood. So adding a margin
to your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component
using the prop `boxWrapperProps` in `HoverCardTarget`.


### Accessibility limitiations

The dropdown is rendered in a portal at the end of `document.body`, it is not a part of the tab order of the page. Keyboard
users can open, read and dismiss the dropdown, but cannot move focus into it – links and buttons inside the dropdown are
not reachable with the keyboard.

If the dropdown contains interactive content, that content must also be available elsewhere on the page. Do not use the
`trapFocus` prop to work around this limitation: focus cannot be moved into the dropdown in the first place, and trapping
focus in a hover-triggered element strands keyboard users.

With `withinPortal=False` the dropdown is rendered next to the target and focus can be moved into it with `Tab`, but
moving focus out of the dropdown with `Tab` does not close it – the dropdown is closed with `Escape`, with a press outside
or when the pointer leaves the target.

Hover and focus activations do not coordinate: if the pointer leaves the target while the target is focused with the
keyboard, the dropdown is closed after `closeDelay` and is not reopened until the target is blurred and focused again.

### 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      |
|:---------|:----------------------------|:-----------------|
| dropdown | .mantine-HoverCard-dropdown | Dropdown element |
| arrow    | .mantine-HoverCard-arrow    | Dropdown arrow   |


### Keyword Arguments
#### HoverCard

- children (a list of or a singular dash component, string or number; optional):
    `Popover.Target` and `Popover.Dropdown` components.

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

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

- arrowOffset (number; optional):
    Arrow offset in px, `5` by default.

- arrowPosition (a value equal to: 'center', 'side', 'merge'; optional):
    Arrow position.

- arrowRadius (number; optional):
    Arrow `border-radius` in px, `0` by default.

- arrowSize (number; optional):
    Arrow size in px, `7` by default.

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

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

- clickOutsideCapture (boolean; optional):
    If set, outside click listeners are registered in the capture
    phase default False.

- clickOutsideEvents (list of strings; optional):
    Not supported by `HoverCard`: outside press is always detected
    with the `pointerdown` event. Use `closeOnClickOutside` to disable
    it.

- closeDelay (number; optional):
    Close delay in ms.

- closeOnClickOutside (boolean; optional):
    Determines whether the dropdown should be closed when the user
    presses outside of the target and the dropdown @,default,True.

- closeOnEscape (boolean; optional):
    Determines whether dropdown should be closed when `Escape` key is
    pressed, `True` by default.

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

- disabled (boolean; optional):
    If set, popover dropdown will not be rendered.

- events (dict; optional):
    Determines which events open the dropdown. Fields that are not
    specified keep their default values. default { "hover": True,
    "Focus": True, "touch": False }.

- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):
    Changes floating ui [position
    strategy](https://floating-ui.com/docs/usefloating#strategy),
    `'absolute'` by default.

- hideDetached (boolean; optional):
    If set, the dropdown is hidden when the element is hidden with
    styles or not visible on the screen default True.

- initiallyOpened (boolean; optional):
    Initial opened state.

- interactive (boolean; optional):
    If set, the dropdown stays open while the pointer travels from the
    target to the dropdown and remains over it. Set it if the dropdown
    contains interactive content. default False.

- keepMounted (boolean; optional):
    If set dropdown will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead.

- 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:

- middlewares (dict; optional):
    Floating ui middlewares to configure position handling, `{ flip:
    True, shift: True, inline: False }` by default.

    `middlewares` is a dict with keys:

- offset (number; optional):
    Offset of the dropdown element, `8` by default.

- openDelay (number; optional):
    Open delay in ms.

- overlayProps (dict; optional):
    Props passed down to `Overlay` component.

- portalProps (dict; optional):
    Props to pass down to the `Portal` when `withinPortal` is True.

- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):
    Dropdown position relative to the target element, `'bottom'` by
    default.

- preventPositionChangeWhenVisible (boolean; optional):
    If `True`, the dropdown picks its side on open (flip runs once,
    preferring the `position` prop) and then never changes side —
    scrolling, resizing, and content size changes will not flip the
    dropdown. The side is recalculated fresh on the next open. Does
    not affect the `shift` middleware. Set to `False` to keep flip
    active and allow the dropdown to re-flip on every change. default
    True.

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

- returnFocus (boolean; optional):
    Determines whether focus should be returned to the target when the
    dropdown closes. Ignored when focus activation is enabled
    (`events.focus`, the default), otherwise moving focus away from
    the target would return it and reopen the dropdown. `Escape`
    pressed inside the dropdown always returns focus to the target.
    default False.

- role (a value equal to: 'dialog', 'tooltip'; optional):
    Accessible relation between the target and the dropdown. `dialog`
    sets `aria-haspopup`, `aria-expanded` and `aria-controls` on the
    target, `tooltip` sets `aria-describedby` instead and should be
    used if the dropdown contains only descriptive content. default
    'dialog'.

- shadow (optional):
    Key of `theme.shadows` or any other valid CSS `box-shadow` value.

- 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.

- transitionProps (dict; optional):
    Props passed down to the `Transition` component that used to
    animate dropdown presence, use to configure duration and animation
    type, `{ duration: 150, transition: 'fade' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped within dropdown,
    `False` by default.

- variant (string; optional):
    variant.

- width (string | number; optional):
    Dropdown width, or `'target'` to make dropdown width the same as
    target element, `'max-content'` by default.

- withArrow (boolean; optional):
    Determines whether component should have an arrow, `False` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be displayed when the
    dropdown is opened, `False` by default.

- withRoles (boolean; optional):
    Determines whether dropdown and target elements should have
    accessible roles, `True` by default.

- withinPortal (boolean; optional):
    Determines whether dropdown should be rendered within the
    `Portal`, `True` by default.

- zIndex (string | number; optional):
    Dropdown `z-index`, `300` by default.
#### HoverCardDropdown

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; required):
    Content.

- boxWrapperProps (dict; optional):
    Target box wrapper props.

    `boxWrapperProps` is a dict with keys:

## Menu  
Use the Menu and MenuX components to show an interactive menu dropdown with links and buttons.  
Category: Overlay  

### Simple Example

`Menu` is built using `MenuItem`(s), `MenuDropdown` and `MenuTarget`. You can use `MenuItem` as either a link or a
button. Just passing the `href` property will make it a link otherwise it will act as a button. When `MenuItem` is
used as a button, you can write callbacks on it.

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

component = dmc.Stack(
    [
        dmc.Text(id="menu-text", mb="md"),
        dmc.Menu(
            [
                dmc.MenuTarget(dmc.Button("Click for options!")),
                dmc.MenuDropdown(
                    [
                        dmc.MenuItem(
                            "External Link",
                            href="https://www.github.com/snehilvj",
                            target="_blank",
                            leftSection=DashIconify(icon="radix-icons:external-link"),
                        ),
                        dmc.MenuItem("Useless Button", id="useless-button", n_clicks=0),
                    ]
                ),
            ]
        ),
    ], align="center"
)


@callback(Output("menu-text", "children"), Input("useless-button", "n_clicks"))
def click_menu(n_clicks):
    return f"Clicked {n_clicks} times."
```
### Submenus

Note: For callbacks on `SubMenu` items to work reliably, set `Menu(keepMounted=True)`.

```python

import dash_mantine_components as dmc


menu = dmc.Menu(
    width=200,
    position="bottom-start",
    keepMounted=True, # required when using SubMenu
    children=[
        dmc.MenuTarget(
            dmc.Button("Toggle Menu")
        ),
        dmc.MenuDropdown([
            dmc.MenuItem("Dashboard"),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Products")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("All products"),
                    dmc.MenuItem("Categories"),
                    dmc.MenuItem("Tags"),
                    dmc.MenuItem("Attributes"),
                    dmc.MenuItem("Shipping classes"),
                ])
            ]),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Orders")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("Open"),
                    dmc.MenuItem("Completed"),
                    dmc.MenuItem("Cancelled"),
                ])
            ]),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Settings")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("Profile"),
                    dmc.MenuItem("Security"),
                    dmc.MenuItem("Notifications"),
                ])
            ]),
        ])
    ]
)

component=dmc.Center(menu)
```


### Menu on Hover

Set `trigger` to `hover` to reveal dropdown when user hovers over menu target and dropdown. `closeDelay` and `openDelay` props can be used to control open and close delay in ms.
Note that:

* If you set `closeDelay=0` then menu will close before user will reach dropdown, so set `offset=0` to remove space between target element and dropdown.
* Menu with hover trigger is not accessible - users that navigate with keyboard will not be able to use it.

```python
import dash_mantine_components as dmc

component = dmc.Menu(trigger="hover", openDelay=100, closeDelay=400, children=[
  # menu target
  # menu dropdown
    # menu items
])
```

### Menu Target

Any component you specify in dmc.MenuTarget is wrapped by a dmc.Box component under the hood. So adding a margin
to your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component
using the prop `boxWrapperProps` in dmc.MenuTarget.

### Transitions

Menu dropdown can be animated with any of the ready-made transitions.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Menu(
    [
        dmc.MenuTarget(dmc.Button("Click for options!")),
        dmc.MenuDropdown(
            [
                dmc.MenuItem(
                    "External Link",
                    href="https://www.github.com/snehilvj",
                    target="_blank",
                    leftSection=DashIconify(icon="radix-icons:external-link"),
                ),
                dmc.MenuItem("Useless Button", n_clicks=0),
            ]
        ),
    ],
    transitionProps={"transition": "rotate-right", "duration": 150},
)
```
### Custom component as Target

```python
from dash_iconify import DashIconify
import dash_mantine_components as dmc

component = dmc.Menu(
    [
        dmc.MenuTarget(dmc.ActionIcon(DashIconify(icon="tabler:user"))),
        dmc.MenuDropdown(
            [
                dmc.MenuItem(
                    "External Link",
                    href="https://www.github.com/snehilvj",
                    target="_blank",
                    leftSection=DashIconify(icon="radix-icons:external-link"),
                ),
                dmc.MenuItem("Useless Button", n_clicks=0),
            ]
        ),
    ]
)
```
### Icons, Right Section, and Colors

Menu component can be customised by changing icons, right section and even colors. Here's an example.

```python
from dash_iconify import DashIconify
import dash_mantine_components as dmc

component = dmc.Menu(
    [
        dmc.MenuTarget(dmc.Button("Hover for options!")),
        dmc.MenuDropdown(
            [
                dmc.MenuLabel("Application"),
                dmc.MenuItem(
                    "Settings", leftSection=DashIconify(icon="tabler:settings")
                ),
                dmc.MenuItem(
                    "Messages", leftSection=DashIconify(icon="tabler:message")
                ),
                dmc.MenuItem("Gallery", leftSection=DashIconify(icon="tabler:photo")),
                dmc.MenuItem("Search", leftSection=DashIconify(icon="tabler:search")),
                dmc.MenuDivider(),
                dmc.MenuLabel("Danger Zone"),
                dmc.MenuItem(
                    "Transfer my data",
                    leftSection=DashIconify(icon="tabler:arrows-left-right"),
                ),
                dmc.MenuItem(
                    "Delete my account",
                    leftSection=DashIconify(icon="tabler:trash"),
                    color="red",
                ),
            ]
        ),
    ],
    trigger="hover",
)
```
### 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.


#### Menu Selectors

| Selector      | Static Selector             | Description                            |
| ------------- | --------------------------- | -------------------------------------- |
| `dropdown`    | `.mantine-Menu-dropdown`    | Dropdown element                       |
| `arrow`       | `.mantine-Menu-arrow`       | Dropdown arrow                         |
| `overlay`     | `.mantine-Menu-overlay`     | Overlay element                        |
| `divider`     | `.mantine-Menu-divider`     | `Menu.Divider` root element            |
| `label`       | `.mantine-Menu-label`       | `Menu.Label` root element              |
| `item`        | `.mantine-Menu-item`        | `Menu.Item` root element               |
| `itemLabel`   | `.mantine-Menu-itemLabel`   | Label of `Menu.Item`                   |
| `itemSection` | `.mantine-Menu-itemSection` | Left and right sections of `Menu.Item` |
| `chevron`     | `.mantine-Menu-chevron`     | Sub menu chevron                       |



#### Menu Data Attributes

| Selector | Attribute       | Condition                             |
| -------- | --------------- | ------------------------------------- |
| `item`   | `data-disabled` | `disabled` prop is set on `Menu.Item` |

---

**a.** Want this table exported to HTML or reStructuredText?
**b.** Want a full CSS override example using these selectors in a Dash app?


### Keyword Arguments
#### Menu

- children (a list of or a singular dash component, string or number; optional):
    Menu content.

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

- arrowOffset (number; optional):
    Arrow offset in px, `5` by default.

- arrowPosition (a value equal to: 'center', 'side', 'merge'; optional):
    Arrow position.

- arrowRadius (number; optional):
    Arrow `border-radius` in px, `0` by default.

- arrowSize (number; optional):
    Arrow size in px, `7` by default.

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

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

- clickOutsideCapture (boolean; optional):
    If set, outside click listeners are registered in the capture
    phase default False.

- clickOutsideEvents (list of strings; optional):
    Events that trigger outside clicks.

- closeDelay (number; optional):
    Close delay in ms, applicable only to trigger="hover" variant.

- closeOnClickOutside (boolean; optional):
    Determines whether dropdown should be closed on outside clicks.

- closeOnEscape (boolean; optional):
    Determines whether dropdown should be closed when Escape key is
    pressed.

- closeOnItemClick (boolean; optional):
    Determines whether Menu should be closed when item is clicked.

- defaultOpened (boolean; optional):
    Uncontrolled menu initial opened state.

- disabled (boolean; optional):
    If set, popover dropdown will not be rendered.

- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):
    Changes floating ui [position
    strategy](https://floating-ui.com/docs/usefloating#strategy),
    `'absolute'` by default.

- hideDetached (boolean; optional):
    If set, the dropdown is hidden when the element is hidden with
    styles or not visible on the screen default True.

- keepMounted (boolean; optional):
    If set dropdown will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead.

- loop (boolean; optional):
    Determines whether arrow key presses should loop though items
    (first to last and last to first).

- menuItemTabIndex (a value equal to: 0, -1; optional):
    Set the `tabindex` on all menu items. Defaults to -1.

- middlewares (dict; optional):
    Floating ui middlewares to configure position handling, `{ flip:
    True, shift: True, inline: False }` by default.

    `middlewares` is a dict with keys:

- offset (number; optional):
    Offset of the dropdown element, `8` by default.

- openDelay (number; optional):
    Open delay in ms, applicable only to trigger="hover" variant.

- opened (boolean; optional):
    Controlled menu opened state.

- overlayProps (dict; optional):
    Props passed down to `Overlay` component.

- portalProps (dict; optional):
    Props to pass down to the `Portal` when `withinPortal` is True.

- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):
    Dropdown position relative to the target element, `'bottom'` by
    default.

- preventPositionChangeWhenVisible (boolean; optional):
    If `True`, the dropdown picks its side on open (flip runs once,
    preferring the `position` prop) and then never changes side —
    scrolling, resizing, and content size changes will not flip the
    dropdown. The side is recalculated fresh on the next open. Does
    not affect the `shift` middleware. Set to `False` to keep flip
    active and allow the dropdown to re-flip on every change. default
    True.

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

- returnFocus (boolean; optional):
    Determines whether focus should be automatically returned to
    control when dropdown closes, `False` by default.

- shadow (optional):
    Key of `theme.shadows` or any other valid CSS `box-shadow` value.

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

- transitionProps (dict; optional):
    Props passed down to the `Transition` component that used to
    animate dropdown presence, use to configure duration and animation
    type, `{ duration: 150, transition: 'fade' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether dropdown should trap focus of keyboard events.

- trigger (a value equal to: 'click', 'hover', 'click-hover'; optional):
    Event which should open menu.

- variant (string; optional)

- width (string | number; optional):
    Dropdown width, or `'target'` to make dropdown width the same as
    target element, `'max-content'` by default.

- withArrow (boolean; optional):
    Determines whether component should have an arrow, `False` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be displayed when the
    dropdown is opened, `False` by default.

- withinPortal (boolean; optional):
    Determines whether dropdown should be rendered within the
    `Portal`, `True` by default.

- zIndex (string | number; optional):
    Dropdown `z-index`, `300` by default.
#### MenuTarget

- children (a list of or a singular dash component, string or number; required):
    Content.

- boxWrapperProps (dict; optional):
    Target box wrapper props.

    `boxWrapperProps` is a dict with keys:
#### MenuDropdown

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; optional):
    Item label.

- 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.

- 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.

- closeMenuOnClick (boolean; optional):
    Determines whether the menu should be closed when the item is
    clicked, overrides `closeOnItemClick` prop on the `Menu`
    component.

- color (optional):
    Key of `theme.colors` or any valid CSS color.

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

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

- disabled (boolean; optional):
    Disables item.

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

- href (string; optional):
    href if MenuItem is supposed to be used as a link.

- leftSection (a list of or a singular dash component, string or number; optional):
    Section displayed on the left side of the label.

- 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.

- n_clicks (number; default 0):
    An integer that represents the number of times that this element
    has been clicked on.

- refresh (boolean; optional):
    Whether to refresh the page.

- rightSection (a list of or a singular dash component, string or number; optional):
    Section displayed on the right side of the label.

- 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.

- target (a value equal to: '_blank', '_self'; optional):
    Target if MenuItem is supposed to be used as a link.

- variant (string; optional):
    variant.

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

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

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

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

- 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.

- 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.

- variant (string; optional):
    variant.

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

## Modal  
Use Modal component to show a dialog box or a popup window on the top of the current page.  
Category: Overlay  

### Simple Example

This is a basic example of dmc.Modal. You can also customize it by setting the desired `radius` or `padding`.

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

component = html.Div(
    [
        dmc.Button("Open Modal", id="modal-demo-button", n_clicks=0),
        dmc.Modal(
            title="New Modal",
            id="modal-simple",
            children=dmc.Text("I am in a modal component."),                      ),
    ]
)


@callback(
    Output("modal-simple", "opened"),
    Input("modal-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def modal_demo(n):
    if n > 0:
        return True
```
### Different Sizes

Set the size of the modal using the `size` prop.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

component = html.Div(
    [
        dmc.Modal(title="Size: lg", id="modal-size-lg", size="lg"),
        dmc.Modal(title="Size: 378px", id="modal-size-378", size=378),
        dmc.Modal(title="Size: 55%", id="modal-size-55", size="55%"),
        dmc.Modal(title="Size: full", id="modal-size-full", fullScreen=True),
        dmc.Group(
            [
                dmc.Button("lg", id="lg-modal-button"),
                dmc.Button("378px", id="378-modal-button"),
                dmc.Button("55%", id="55-modal-button"),
                dmc.Button("full", id="full-modal-button"),
            ]
        ),
    ]
)


def toggle_modal(n_clicks, opened):
    return not opened


for size in ["lg", "378", "55", "full"]:
    callback(
        Output(f"modal-size-{size}", "opened"),
        Input(f"{size}-modal-button", "n_clicks"),
        State(f"modal-size-{size}", "opened"),
        prevent_initial_call=True,
    )(toggle_modal)
```
### Vertically Centered Modal

To vertically center the modal, set `centered=True`.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

component = html.Div(
    [
        dmc.Modal(
            title="Centered Modal",
            id="modal-centered",
            centered=True,
            children=[dmc.Text("This is a vertically centered modal.")],
        ),
        dmc.Button("Open modal", id="modal-centered-button"),
    ]
)


@callback(
    Output("modal-centered", "opened"),
    Input("modal-centered-button", "n_clicks"),
    State("modal-centered", "opened"),
    prevent_initial_call=True,
)
def toggle_modal(n_clicks, opened):
    return not opened
```
### Modal With Scroll

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, callback

paragraph = (
    """Dash apps give a point-&-click interface to models written in Python, vastly expanding the notion of what's 
        possible in a traditional 'dashboard.' With Dash apps, data scientists and engineers put complex Python analytics 
        in the hands of business decision-makers and operators. """
    * 10
)

component = html.Div(
    [
        dmc.Modal(
            id="modal-scroll",
            title="Modal with Scroll",
            children=[dmc.Text(paragraph)],
        ),
        dmc.Button("Modal with Scroll", id="modal-scroll-button"),
    ]
)


@callback(
    Output("modal-scroll", "opened"),
    Input("modal-scroll-button", "n_clicks"),
    State("modal-scroll", "opened"),
    prevent_initial_call=True,
)
def toggle_modal(n_clicks, opened):
    return not opened
```
### Modal Stack

Use `ModalStack` component to render multiple modals at the same time. `ModalStack` keeps track of opened modals, 
manages `z-index` values, focus trapping and `closeOnEscape` behavior.

Differences from using multiple Modal components:

- `ModalStack` children must be `ManagedModal` components
- `ModalStack` manages `z-index` values – modals that are opened later will always have higher `z-index` value disregarding their order in the DOM
- `ModalStack` disables focus trap and `Escape` key handling for all modals except the one that is currently opened
- Modals that are not currently visible are present in the DOM but are hidden with `opacity: 0` and `pointer-events: none`
- Only one overlay is rendered at a time


```python
import dash_mantine_components as dmc
from dash import html, Output, Input, callback, ctx, no_update


component = dmc.Center([
    dmc.ModalStack(
        id="modal-stack",
        children=[
            dmc.ManagedModal(
                id="delete-page",
                title="Delete this page?",
                children=[
                    dmc.Text("Are you sure you want to delete this page? This action cannot be undone."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-1", variant="default"),
                            dmc.Button("Delete", id="delete", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedModal(
                id="confirm-action",
                title="Confirm action",
                children=[
                    dmc.Text("Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-2", variant="default"),
                            dmc.Button("Confirm", id="confirm", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedModal(
                id="really-confirm-action",
                title="Really confirm action",
                children=[
                    dmc.Text("Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?"),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-3", variant="default"),
                            dmc.Button("Confirm", id="final-confirm", color="red"),
                        ],
                    ),
                ],
            ),
        ]
    ),
    dmc.Button("Open modal", id="open")
])


@callback(
    Output("modal-stack", "open"),
    Output("modal-stack", "closeAll"),
    Input("open", "n_clicks"),
    Input("cancel-1", "n_clicks"),
    Input("cancel-2", "n_clicks"),
    Input("cancel-3", "n_clicks"),
    Input("delete", "n_clicks"),
    Input("confirm", "n_clicks"),
    Input("final-confirm", "n_clicks"),
    prevent_initial_call=True,
)
def control_modals(*_):
    trigger = ctx.triggered_id
    if trigger == "open":
        return "delete-page", False
    if trigger in ("cancel-1", "cancel-2", "cancel-3", "final-confirm"):
        return None, True
    if trigger == "delete":
        return "confirm-action", False
    if trigger == "confirm":
        return "really-confirm-action", False
    return no_update, no_update
```
### 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-Modal-root    | Root element                                                          |
| inner   | .mantine-Modal-inner   | Element used to center modal, has fixed position, takes entire screen |
| content | .mantine-Modal-content | `Modal.Content` root element                                          |
| header  | .mantine-Modal-header  | Contains title and close button                                       |
| overlay | .mantine-Modal-overlay | Overlay displayed under the `Modal.Content`                           |
| title   | .mantine-Modal-title   | Modal title (h2 tag), displayed in the header                         |
| body    | .mantine-Modal-body    | Modal body, displayed after header                                    |
| close   | .mantine-Modal-close   | Close button                                                          |


### Keyword Arguments
#### Modal

- children (a list of or a singular dash component, string or number; optional):
    Modal content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- centered (boolean; optional):
    Determines whether the modal should be centered vertically,
    `False` by default.

- 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.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

    `closeButtonProps` is a dict with keys:

- closeOnClickOutside (boolean; optional):
    Determines whether the modal/drawer should be closed when user
    clicks on the overlay, `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether `onClose` should be called when user presses
    the escape key, `True` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- fullScreen (boolean; optional):
    Determines whether the modal should take the entire screen,
    `False` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- keepMounted (boolean; optional):
    If set modal/drawer will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead, `False` by
    default.

- 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:

- lockScroll (boolean; optional):
    Determines whether scroll should be locked when `opened={True}`,
    `True` by default.

- 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.

- opened (boolean; default False):
    Determines whether modal/drawer is opened.

- overlayProps (dict; optional):
    Props passed down to the `Overlay` component, use to configure
    opacity, `background-color`, styles and other properties.

    `overlayProps` is a dict with keys:

- padding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set content,
    header and footer padding, `'md'` by default.

- portalProps (dict; optional):
    Props passed down to the Portal component when `withinPortal` is
    set.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- removeScrollProps (dict; optional):
    Props passed down to react-remove-scroll, can be used to customize
    scroll lock behavior.

- returnFocus (boolean; optional):
    Determines whether focus should be returned to the last active
    element when `onClose` is called, `True` by default.

- shadow (optional):
    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by
    default.

- size (number; optional):
    Controls width of the content area, `'md'` 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.

- title (a list of or a singular dash component, string or number; optional):
    Modal title.

- transitionProps (dict; optional):
    Props added to the `Transition` component that used to animate
    overlay and body, use to configure duration and animation type, `{
    duration: 200, transition: 'pop' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped, `True` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCloseButton (boolean; optional):
    Determines whether the close button should be rendered, `True` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be rendered, `True` by
    default.

- withinPortal (boolean; optional):
    Determines whether the component should be rendered inside
    `Portal`, `True` by default.

- xOffset (string | number; optional):
    Left/right modal offset, `5vw` by default.

- yOffset (string | number; optional):
    Top/bottom modal offset, `5dvh` by default.

- zIndex (string | number; optional):
    `z-index` CSS property of the root element, `200` by default.
#### ModalStack

- children (list of dicts; optional):
    ManagedModal content.

    `children` is a list of dicts with keys:

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- close (string | list of strings; optional):
    Closes one or more modals by ID. Accepts a single ID (string or
    dict) or a list of IDs.

- closeAll (boolean; optional):
    Closes all modals in the ModalStack.

- data-* (string; optional):
    Wild card data attributes.

- 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:

- open (string | list of strings; optional):
    Opens one or more modals by ID. Accepts a single ID (string or
    dict) or a list of IDs.

- state (dict; optional):
    Current opened state of each modal. Read only.

    `state` is a dict with keys:

- tabIndex (number; optional):
    tab-index.

- toggle (string | list of strings; optional):
    Toggles one or more modals by ID. Accepts a single ID (string or
    dict) or a list of IDs.
#### ManagedModal

> Note:  ManagedModal is for use in the ModalStack component. id is required.  open/closed state is controlled by ModalStack.

- children (a list of or a singular dash component, string or number; optional):
    Modal content.

- id (string; required):
    Unique ID to identify this component. Required for use with
    StackModal.

- aria-* (string; optional):
    Wild card aria attributes.

- centered (boolean; optional):
    Determines whether the modal should be centered vertically,
    `False` by default.

- 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.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

    `closeButtonProps` is a dict with keys:

- closeOnClickOutside (boolean; optional):
    Determines whether the modal/drawer should be closed when user
    clicks on the overlay, `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether `onClose` should be called when user presses
    the escape key, `True` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- fullScreen (boolean; optional):
    Determines whether the modal should take the entire screen,
    `False` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- keepMounted (boolean; optional):
    If set modal/drawer will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead, `False` by
    default.

- 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:

- lockScroll (boolean; optional):
    Determines whether scroll should be locked when `opened={True}`,
    `True` by default.

- 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.

- overlayProps (dict; optional):
    Props passed down to the `Overlay` component, use to configure
    opacity, `background-color`, styles and other properties.

    `overlayProps` is a dict with keys:

- padding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set content,
    header and footer padding, `'md'` by default.

- portalProps (dict; optional):
    Props passed down to the Portal component when `withinPortal` is
    set.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- removeScrollProps (dict; optional):
    Props passed down to react-remove-scroll, can be used to customize
    scroll lock behavior.

- returnFocus (boolean; optional):
    Determines whether focus should be returned to the last active
    element when `onClose` is called, `True` by default.

- shadow (optional):
    Key of `theme.shadows` or any valid CSS box-shadow value, 'xl' by
    default.

- size (number; optional):
    Controls width of the content area, `'md'` 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.

- title (a list of or a singular dash component, string or number; optional):
    Modal title.

- transitionProps (dict; optional):
    Props added to the `Transition` component that used to animate
    overlay and body, use to configure duration and animation type, `{
    duration: 200, transition: 'pop' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped, `True` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCloseButton (boolean; optional):
    Determines whether the close button should be rendered, `True` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be rendered, `True` by
    default.

- withinPortal (boolean; optional):
    Determines whether the component should be rendered inside
    `Portal`, `True` by default.

- xOffset (string | number; optional):
    Left/right modal offset, `5vw` by default.

- yOffset (string | number; optional):
    Top/bottom modal offset, `5dvh` by default.

- zIndex (string | number; optional):
    `z-index` CSS property of the root element, `200` by default.

## Overlay  
Overlays parent element with div element with any color and opacity  
Category: Overlay  

### Usage

`Overlay` takes 100% width and height of its parent container by default. When the `fixed=True` prop is set, it takes 100%
width and height of the viewport instead.

Set `color` and `backgroundOpacity` props to change `Overlay` background-color.
Note that `backgroundOpacity` prop does not change CSS opacity property, it changes background-color. For example, 
if you set `color="#000"` and `backgroundOpacity={0.85}` background-color will be `rgba(0, 0, 0, 0.85)`:


```python
import dash_mantine_components as dmc
from dash import Dash, Input, Output, callback, html


component = dmc.Stack([
        dmc.AspectRatio(
            ratio=16/9,
            maw=400,
            mx="auto",
            pos="relative",
            children=[
                html.Img(
                    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png",
                    alt="Demo",
                ),
                dmc.Overlay(
                    id="overlay-usage",
                    color="#000",
                    backgroundOpacity=0.85,
                    style={"display": "block"}  # Initially visible
                )
            ]
        ),
        dmc.Button(
            "Toggle overlay",
            id="overlay-toggle-button",
            mx="auto",
            mt="lg",
            n_clicks=0
        )
    ])


@callback(
    Output("overlay-usage", "style"),
    Input("overlay-toggle-button", "n_clicks")
)
def toggle_overlay(n_clicks):
    if n_clicks %2 == 0:
        return {"display": "block"}
    return {"display": "none"}
```
### Gradient
Set `gradient` prop to use `background-image` instead of `background-color`. When `gradient` prop is set, `color`
and `backgroundOpacity` props are ignored.

```python
import dash_mantine_components as dmc
from dash import Dash, Input, Output, callback, html


component = dmc.Stack([
        dmc.AspectRatio(
            ratio=16/9,
            maw=400,
            mx="auto",
            pos="relative",
            children=[
                html.Img(
                    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png",
                    alt="Demo",
                ),
                dmc.Overlay(
                    id="overlay-gradient",
                    gradient="linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%)",
                    opacity=0.85,
                    style={"display": "block"}  # Initially visible
                )
            ]
        ),
        dmc.Button(
            "Toggle overlay",
            id="overlay-toggle-button-gradient",
            mx="auto",
            mt="lg",
            n_clicks=0
        )
    ])


@callback(
    Output("overlay-gradient", "style"),
    Input("overlay-toggle-button-gradient", "n_clicks")
)
def toggle_overlay(n_clicks):
    if n_clicks %2 == 0:
        return {"display": "block"}
    return {"display": "none"}
```
### Blur
Set `blur` prop to add `backdrop-filter: blur({value})` styles. Note that `backdrop-filter` is not supported in all browsers.

```python
import dash_mantine_components as dmc
from dash import Dash, Input, Output, callback, html


component = dmc.Stack([
        dmc.AspectRatio(
            ratio=16/9,
            maw=400,
            mx="auto",
            pos="relative",
            children=[
                html.Img(
                    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png",
                    alt="Demo",
                ),
                dmc.Overlay(
                    id="overlay-blur",
                    color="#000",
                    backgroundOpacity=0.35,
                    blur=0
                )
            ]
        ),
        dmc.Text("Set Blur:"),
        dmc.Slider(
           id="overlay-blur-slider",
            min=0, max=15, value=5
        )
    ])


@callback(
    Output("overlay-blur", "blur"),
    Input("overlay-blur-slider", "value")
)
def toggle_overlay(v):
    return v
```
### 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.


Here’s your content formatted as Markdown tables:

#### Overlay selectors

| Selector | Static selector       | Description  |
| -------- | --------------------- | ------------ |
| root     | `.mantine-Overlay-root` | Root element |

---

#### Overlay CSS variables

| Selector | Variable          | Description               |
| -------- | ----------------- | ------------------------- |
| root     | `--overlay-bg`      | Controls background-color |
| root     | `--overlay-filter`  | Controls backdrop-filter  |
| root     | `--overlay-radius`  | Controls border-radius    |
| root     | `--overlay-z-index` | Controls z-index          |

---

#### Overlay data attributes

| Selector | Attribute   | Condition          |
| -------- | ----------- | ------------------ |
| root     | `data-center` | center prop is set |
| root     | `data-fixed`  | fixed prop is set  |

Do you want me to keep this as three separate tables (like above), or merge them into one big table with a "Type" column (`Selector / CSS variable / Data attribute`) for easier scanning?



### Keyword Arguments
#### Overlay

- children (a list of or a singular dash component, string or number; optional):
    Content inside overlay.

- 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.

- backgroundOpacity (number; optional):
    Controls overlay `background-color` opacity 0–1, disregarded when
    `gradient` prop is set, `0.6` by default.

- blur (string | number; optional):
    Overlay background blur, `0` by default.

- center (boolean; optional):
    Determines whether content inside overlay should be vertically and
    horizontally centered, `False` by default.

- 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):
    Overlay `background-color`, `#000` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- fixed (boolean; optional):
    Determines whether overlay should have fixed position instead of
    absolute, `False` by default.

- gradient (string; optional):
    Changes overlay to gradient. If set, `color` prop is ignored.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    `0` 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- zIndex (string | number; optional):
    Overlay z-index, `200` by default.

## Popover  
Display popover section relative to given target element.  
Category: Overlay  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    [
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(dmc.Text("This popover is opened on button click")),
    ],
    width=200,
    position="bottom",
    withArrow=True,
    shadow="md",
)
```
### Popover Target

Any component you specify in dmc.PopoverTarget is wrapped by a dmc.Box component under the hood. So adding a margin
to your target component will also move the dropdown away. In order to prevent this, add margin to the wrapper component
using the prop `boxWrapperProps` in dmc.PopoverTarget.

### Focus Trap


If you need to use any interactive elements within Popover, set `trapFocus` prop.

Note: To preserve the state of interactive elements inside `PopoverDropdown` when the popover is closed and reopened, set `Popover(keepMounted=True)`.

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    [
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(
            [
                dmc.TextInput(label="Name", placeholder="Name", size="xs"),
                dmc.TextInput(
                    label="Email", placeholder="john@doe.com", size="xs", mt="xs"
                ),
            ]
        ),
    ],
    width=300,
    position="bottom",
    withArrow=True,
    trapFocus=True,
    shadow="md",
)
```
### Inline elements

Enable inline middleware to use Popover with inline elements.

```python
import dash_mantine_components as dmc

component = dmc.Flex(
    [
        "Here is some text with",
        dmc.Popover(
            [
                dmc.PopoverTarget(dmc.Mark(" an inline popover ")),
                dmc.PopoverDropdown(" more info"),
            ],
            middlewares={"flip": True, "shift": True, "inline": True},
        ),
        "and more text after.",
    ],
    direction="row",
    gap="xs",
)
```
### Same width

Set w="target" prop to make Popover dropdown take the same width as target element.
```python
import dash_mantine_components as dmc

component = dmc.Popover(
    [
        dmc.PopoverTarget(dmc.Button("Toggle Popover", w=200)),
        dmc.PopoverDropdown(
            dmc.Text(
                "This popover has same width as target, it is useful when you are building input dropdowns"
            )
        ),
    ],
    width="target",
    position="bottom",
    withArrow=True,
    shadow="md",
)
```
### With overlay
Set `withOverlay` prop to add overlay behind the dropdown. You can pass additional configuration to `Overlay` component with `overlayProps` prop:

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    [
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(dmc.Text("This popover is opened on button click")),
    ],
    width=200,
    position="bottom",
    withArrow=True,
    shadow="md",
    withOverlay=True,
    overlayProps={"zIndex": 10000, "blur": '8px'},
    zIndex=10001
)
```
### Hide detached

Use `hideDetached` prop to configure how the dropdown behaves when the target element is hidden with styles 
(`display: none, visibility: hidden,` etc.), removed from the DOM, or when the target element is scrolled out of the viewport.

By default, `hideDetached` is enabled – the dropdown is hidden with the target element. You can change this behavior
with `hideDetached=False`. To see the difference, try to scroll the container that holds the Popover components:


```python
import dash_mantine_components as dmc


component = dmc.Box(
    style={"border": "1px solid var(--mantine-color-dimmed)", "overflow": "auto"},
    p="xl",
    w=400,
    h=200,
    children=[
        dmc.Box(
            w=1000,
            h=400,
            children=dmc.Group(
                [
                    dmc.Popover(
                        opened=True,
                        width="target",
                        position="bottom",
                        closeOnClickOutside=False,
                        children=[
                            dmc.PopoverTarget(
                                dmc.Button("Toggle popover")
                            ),
                            dmc.PopoverDropdown("This popover dropdown is hidden when detached"),
                        ],
                    ),
                    dmc.Popover(
                        opened=True,
                        width="target",
                        position="bottom",
                        closeOnClickOutside=False,
                        hideDetached=False,
                        children=[
                            dmc.PopoverTarget(
                                dmc.Button("Toggle popover")
                            ),
                            dmc.PopoverDropdown("This popover dropdown is visible when detached"),
                        ],
                    ),
                ]
            ),
        )
    ]
)
```
### Click outside
By default, `Popover` closes when you click outside of the dropdown. To disable this behavior, set `closeOnClickOutside=False`.

You can configure events that are used for click outside detection with `clickOutsideEvents` prop. By default, `Popover`
listens to `mousedown` and `touchstart` events. You can change it to any other events, for example, `mouseup` and `touchend`:


```python
import dash_mantine_components as dmc

component = dmc.Popover(
    width=200,
    position="bottom",
    clickOutsideEvents=["mouseup", "touchend"],
    children=[
        dmc.PopoverTarget(
            dmc.Button("Toggle popover", id="toggle-btn")
        ),
        dmc.PopoverDropdown(
            dmc.Text(
                "Popover will be closed with mouseup and touchend events",
                size="xs"
            )
        )
    ]
)
```
### 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.


#### Popover Selectors

| Selector  | Static selector             | Description          |
|-----------|------------------------------|----------------------|
| dropdown  | .mantine-Popover-dropdown    | Dropdown element     |
| arrow     | .mantine-Popover-arrow       | Dropdown arrow       |
| overlay   | .mantine-Popover-overlay     | Overlay element      |


#### Popover CSS Variables

| Selector  | Variable           | Description                    |
|-----------|--------------------|--------------------------------|
| dropdown  | --popover-radius   | Controls dropdown border-radius |
|           | --popover-shadow   | Controls dropdown box-shadow    |


#### Popover Data Attributes

| Selector  | Attribute       | Value                             |
|-----------|-----------------|-----------------------------------|
| dropdown  | data-position   | Value of floating UI dropdown position |



### Keyword Arguments
#### Popover

- children (a list of or a singular dash component, string or number; optional):
    `Popover.Target` and `Popover.Dropdown` components.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- arrowOffset (number; optional):
    Arrow offset in px, `5` by default.

- arrowPosition (a value equal to: 'center', 'side', 'merge'; optional):
    Arrow position.

- arrowRadius (number; optional):
    Arrow `border-radius` in px, `0` by default.

- arrowSize (number; optional):
    Arrow size in px, `7` by default.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- clickOutsideCapture (boolean; optional):
    If set, outside click listeners are registered in the capture
    phase default False.

- clickOutsideEvents (list of strings; optional):
    Events that trigger outside clicks.

- closeOnClickOutside (boolean; optional):
    Determines whether dropdown should be closed on outside clicks,
    `True` by default.

- closeOnEscape (boolean; optional):
    Determines whether dropdown should be closed when `Escape` key is
    pressed, `True` by default.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    If set, popover dropdown will not be rendered.

- floatingStrategy (a value equal to: 'absolute', 'fixed'; optional):
    Changes floating ui [position
    strategy](https://floating-ui.com/docs/usefloating#strategy),
    `'absolute'` by default.

- hideDetached (boolean; optional):
    If set, the dropdown is hidden when the element is hidden with
    styles or not visible on the screen default True.

- keepMounted (boolean; optional):
    If set dropdown will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be added instead.

- 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:

- middlewares (dict; optional):
    Floating ui middlewares to configure position handling, `{ flip:
    True, shift: True, inline: False }` by default.

    `middlewares` is a dict with keys:

- offset (number; optional):
    Offset of the dropdown element, `8` by default.

- opened (boolean; default False):
    Controlled dropdown opened state.

- overlayProps (dict; optional):
    Props passed down to `Overlay` component.

- portalProps (dict; optional):
    Props to pass down to the `Portal` when `withinPortal` is True.

- position (a value equal to: 'top', 'right', 'bottom', 'left', 'top-end', 'top-start', 'right-end', 'right-start', 'bottom-end', 'bottom-start', 'left-end', 'left-start'; optional):
    Dropdown position relative to the target element, `'bottom'` by
    default.

- preventPositionChangeWhenVisible (boolean; optional):
    If `True`, the dropdown picks its side on open (flip runs once,
    preferring the `position` prop) and then never changes side —
    scrolling, resizing, and content size changes will not flip the
    dropdown. The side is recalculated fresh on the next open. Does
    not affect the `shift` middleware. Set to `False` to keep flip
    active and allow the dropdown to re-flip on every change. default
    True.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius,
    `theme.defaultRadius` by default.

- returnFocus (boolean; optional):
    Determines whether focus should be automatically returned to
    control when dropdown closes, `False` by default.

- shadow (optional):
    Key of `theme.shadows` or any other valid CSS `box-shadow` value.

- 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.

- transitionProps (dict; optional):
    Props passed down to the `Transition` component that used to
    animate dropdown presence, use to configure duration and animation
    type, `{ duration: 150, transition: 'fade' }` by default.

    `transitionProps` is a dict with keys:

- trapFocus (boolean; optional):
    Determines whether focus should be trapped within dropdown,
    `False` by default.

- variant (string; optional):
    variant.

- width (string | number; optional):
    Dropdown width, or `'target'` to make dropdown width the same as
    target element, `'max-content'` by default.

- withArrow (boolean; optional):
    Determines whether component should have an arrow, `False` by
    default.

- withOverlay (boolean; optional):
    Determines whether the overlay should be displayed when the
    dropdown is opened, `False` by default.

- withRoles (boolean; optional):
    Determines whether dropdown and target elements should have
    accessible roles, `True` by default.

- withinPortal (boolean; optional):
    Determines whether dropdown should be rendered within the
    `Portal`, `True` by default.

- zIndex (string | number; optional):
    Dropdown `z-index`, `300` by default.
#### PopoverTarget

- children (a list of or a singular dash component, string or number; required):
    Content.

- boxWrapperProps (dict; optional):
    Target box wrapper props.

    `boxWrapperProps` is a dict with keys:
#### PopoverDropdown

- children (a list of or a singular dash component, string or number; required):
    Content.

- 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.

- 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.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- 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.

- 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Tooltip  
Use Tooltip component to render tooltip at given element on mouse over or any other event  
Category: Overlay  

### Introduction

```python
import dash_mantine_components as dmc

component = dmc.Tooltip(
    dmc.Button("Button with tooltip"),
    label="Tooltip"
)
```
### Interactive example

### Colors

Tooltip supports all colors defined in Mantine's theme colors.

```python
import dash_mantine_components as dmc

dmc.Tooltip(
    label="This is a red colored tooltip.",
    color="red"
)
```

### Position

Tooltip position relative to target element is defined by the `position` prop.


```python
import dash_mantine_components as dmc

dmc.Tooltip(
    label="This is a tooltip",
    position="right",
    children=[...]
)
```

### Offset
The `offset` sets the space between tooltip and target element in px, can be negative.


```python
import dash_mantine_components as dmc

dmc.Tooltip(
    label="This is a tooltip",
    position="right",
    offset=5,
    children=[...]
)
```
### Offset multi axis

To control `offset` on both axis, pass dictionary with `mainAxis` and `crossAxis` properties:

For an interactive demo see the [Mantine docs](https://mantine.dev/core/tooltip/#offset)

```python
import dash_mantine_components as dmc

dmc.Tooltip(
    label="This is a tooltip",
    position="top",
    offset={ "mainAxis": 50, "crossAxis": -50},
    children=[...]
)
```



### Arrow

Set `withArrow` prop to add an arrow to the tooltip. Arrow is a div element rotated with `transform: rotate(45deg)`.

`arrowPosition` prop determines how arrow is position relative to the target element when position is set to `*-start` 
and `*-end` values on `Popover` component. By default, the value is `center` – the arrow is positioned in the center of
the target element if it is possible.

If you change `arrowPosition` to `side`, then the arrow will be positioned on the side of the target element, and you
will be able to control arrow offset with `arrowOffset` prop. Note that when `arrowPosition` is set to `center`, 
`arrowOffset` prop is ignored.

If you set `arrowPosition` to `merge`, the arrow will form a right triangle merged with the corresponding corner of the
tooltip, and the border radius of that corner will be removed. This mode only works with `*-start` and `*-end` positions.
Note that `arrowOffset` and `arrowRadius` props are ignored when `arrowPosition` is set to `merge`.

### Multiline

By default, tooltip white-space property is set to nowrap. To change that use:

* `multiline` - to enable line breaks
* `w` - to define tooltip width in px

```python
import dash_mantine_components as dmc

component = dmc.Center(
    [
        dmc.Tooltip(
            multiline=True,
            w=220,
            withArrow=True,
            label="Use this button to save this information in your profile,"
            " after that you will be able to access it any time and share"
            " it via email.",
            children=dmc.Button("Multiline Tooltip", variant="outline"),
        )
    ]
)
```
### Inline

Use the `boxWrapperProps` to style the tooltip for inline elements.

```python
import dash_mantine_components as dmc

component = dmc.Text(
    [
        "NASA’s ",
        dmc.Tooltip(
            dmc.Mark("JWST"),
            label="James Webb Space Telescope",
            boxWrapperProps={"style": {"display": "inline-block"}},
        ),
        " is the most powerful space telescope ever built.",
    ],
    span=True,
)
```
### Transitions

Tooltip is built with Transition component, it supports the following props.

* `transition` - predefined transition name or transition object
* `duration` - transition duration in ms, defaults to 100ms
* `timingFunction` - timing function

```python
import dash_mantine_components as dmc

dmc.Tooltip(
    label="Fade transitions",
    transitionProps={
        "transition": "fade", 
        "duration": 200,
        "timingFunction": "ease"
    },
    children=[
        # children
    ],
)
```

### Close and Open Delay

You can delay tooltip open/close events by setting `openDelay` and `closeDelay` props in ms. Both props default to 0 
and reset if user moves mouse over/out of target element before delay is expired.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Tooltip(
            dmc.Button("Delay Open - 500ms", variant="outline"),
            label="Opened after 500ms",
            openDelay=500,
        ),
        dmc.Tooltip(
            dmc.Button("Delay Close - 500ms", variant="outline"),
            label="Closed after 500ms",
            closeDelay=500,
        ),
    ]
)
```
### Interactive tooltip
By default, the tooltip closes as soon as the pointer leaves the target element, and the tooltip body ignores pointer
events. Set the `interactive` prop to keep the tooltip open while the pointer travels from the target to the tooltip
and rests over its content.

The `interactive` prop satisfies the hoverable condition of WCAG 2.1 success criterion 1.4.13: Content on Hover or Focus,
so the pointer can reach the tooltip body without dismissing it, for example to read or select its content.

Do not put interactive or focusable content (links, buttons, inputs) inside a tooltip. Interactive content should be put
in a Popover instead, which is reachable by mouse, keyboard, and touch.

Note that an interactive tooltip receives pointer events, which means that while it is open, it intercepts clicks and 
hover events of the elements that it overlaps. The tooltip stops receiving pointer events as soon as it starts closing.
The interactive prop is not supported by `TooltipFloating`, which always follows the mouse.


```python
import dash_mantine_components as dmc

component = dmc.Tooltip(
    label="This tooltip stays open while you move the pointer onto it, so you can read or select its full contents without it closing.",
    interactive=True,
    withArrow=True,
    multiline=True,
    w=220,
    children=dmc.Button("Hover to read the tooltip"),
)
```
### Floating Tooltip

`dmc.FloatingTooltip` component has the same API as `dmc.Tooltip` component but tooltip will follow mouse.

```python
import dash_mantine_components as dmc

component = dmc.Center(
    [
        dmc.FloatingTooltip(
            label="Tooltip",
            color="orange",
            children=[
                dmc.Center(
                    dmc.Text("Hover over the box to see tooltip"),
                    style={
                        "height": 100,
                        "padding": 10,
                        "border": "2px solid  var(--mantine-color-gray-6)",
                    },
                )
            ],
        )
    ]
)
```
### Target

`target` prop is an alternative to the `Tooltip` `children`. It accepts a string (selector), an HTML element or a `ref`
object with HTML element. Use target prop when you do not render tooltip target as JSX element, like when creating a Tooltip
component in a clientside callback.

Example of using target prop with a string selector:

```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Button("Hover me to see tooltip", id="my-target"),
    dmc.Tooltip(target="#my-target", label="Tooltip over button")
])
```
### Limitations
#### Setting width

Tooltip children are wrapped in a `Box` with a default width of `fit-content`, which may override the width defined in the children. To work around this, you can set the width using `boxWrapperProps`.

`boxWrapperProps` is a dictionary of style properties passed to the `Box` that wraps the tooltip children. In this example, both the `Textarea` and `boxWrapperProps` are used to set the width to 100%.

```python
import dash_mantine_components as dmc

component = dmc.Tooltip(
    label="tooltip label",
    children=dmc.Textarea(
        value="How to set the width of the textarea with a tooltip to 100%", w="100%"
    ),
    boxWrapperProps={"w": "100%"},
)
```
#### Tooltip margin

Any component you specify in `Tooltip` `children` prop is wrapped by a `Box` component under the hood. So adding a margin
to your target component will also move the tooltip away. In order to prevent this, add margin to the wrapper component
using the prop `boxWrapperProps` in `Tooltip`.



### 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.


#### Tooltip selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| tooltip  | .mantine-Tooltip-tooltip | Root element |
| arrow    | .mantine-Tooltip-arrow   | Tooltip arrow, rendered inside tooltip |

#### Tooltip CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| tooltip  | --tooltip-bg | Tooltip background-color |
| tooltip  | --tooltip-radius | Tooltip border-radius |
| tooltip  | --tooltip-color | Controls tooltip text color |

#### Tooltip data attributes

| Selector | Attribute | Condition |
|----------|-----------|------------|
| tooltip  | data-multiline | `multiline` prop is set |



### Keyword Arguments
#### Tooltip

- children (a list of or a singular dash component, string or number; optional):
    Target element, must support `ref` prop and `...others`.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- arrowOffset (number; optional):
    Arrow offset in px, `5` by default.

- arrowPosition (a value equal to: 'center', 'side', 'merge'; optional):
    Arrow position relative to the tooltip, `side` by default.

- arrowRadius (number; optional):
    Arrow `border-radius` in px, `0` by default.

- arrowSize (number; optional):
    Arrow size in px, `4` by default.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether tooltip text color should depend on
    background-color. If luminosity of the color prop is less than
    theme.luminosityThreshold, then theme.white will be used for text
    color, otherwise theme.black. Overrides theme.autoContrast.

- boxWrapperProps (dict; optional):
    Target box wrapper props.

    `boxWrapperProps` is a dict with keys:

- 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.

- closeDelay (number; optional):
    Close delay in ms, `0` by default.

- color (optional):
    Key of `theme.colors` or any valid CSS color, controls tooltip
    background, by default set based on current color scheme.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    If set, tooltip element will not be rendered.

- events (dict; optional):
    Determines which events will be used to show tooltip, `{ hover:
    True, focus: False, touch: False }` by default.

    `events` is a dict with keys:

- floatingStrategy (a value equal to: 'fixed', 'absolute'; optional):
    Changes floating ui [position
    strategy](https://floating-ui.com/docs/usefloating#strategy),
    `'absolute'` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- hideDetached (boolean; optional):
    If set, the tooltip is hidden when the target element is removed
    from the DOM, hidden with `display: none` or scrolled out of the
    visible area. Has no effect on `Tooltip.Floating` default True.

- inline (boolean; optional):
    Must be set if the tooltip target is an inline element.

- interactive (boolean; optional):
    If set, the tooltip stays open while the pointer is over it
    default False.

- keepMounted (boolean; optional):
    If set, the tooltip will not be unmounted from the DOM when it is
    hidden, `display: none` styles will be applied instead.

- label (a list of or a singular dash component, string or number; required):
    Tooltip content.

- 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:

- middlewares (dict; optional):
    Floating ui middlewares to configure position handling, `{ flip:
    True, shift: True, inline: False }` by default.

- 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.

- multiline (boolean; optional):
    Determines whether content should be wrapped on to the next line,
    `False` by default.

- offset (number; optional):
    Space between target element and tooltip in px, `5` by default.
    Number or FloatingAxesOffsets.

- openDelay (number; optional):
    Open delay in ms.

- opened (boolean; optional):
    Controlled opened state.

- portalProps (dict; optional):
    Props to pass down to the portal when withinPortal is True.

- position (a value equal to: 'top', 'left', 'bottom', 'right', 'top-end', 'top-start', 'left-end', 'left-start', 'bottom-end', 'bottom-start', 'right-end', 'right-start'; optional):
    Tooltip position relative to target element (`Tooltip` component)
    or mouse (`Tooltip.Floating` component).

- 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.

- 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.

- target (string; optional):
    Selector, ref of an element or element itself that should be used
    for positioning.

- transitionProps (dict; optional):
    Props passed down to the `Transition` component that used to
    animate tooltip presence, use to configure duration and animation
    type, `{ duration: 100, transition: 'fade' }` by default.

    `transitionProps` is a dict with keys:

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withArrow (boolean; optional):
    Determines whether the tooltip should have an arrow, `False` by
    default.

- withinPortal (boolean; optional):
    Determines whether tooltip should be rendered within `Portal`,
    `True` by default.

- zIndex (string | number; optional):
    Tooltip z-index, `300` by default.
#### FloatingTooltip

- children (a list of or a singular dash component, string or number; optional):
    Target element, must support `ref` prop and `...others`.

- 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 tooltip text color should depend on
    background-color. If luminosity of the color prop is less than
    theme.luminosityThreshold, then theme.white will be used for text
    color, otherwise theme.black. Overrides theme.autoContrast.

- boxWrapperProps (dict; optional):
    Target box wrapper props.

    `boxWrapperProps` is a dict with keys:

- 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, controls tooltip
    background, by default set based on current color scheme.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    If set, tooltip element will not be rendered.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- label (a list of or a singular dash component, string or number; required):
    Tooltip content.

- 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:

- middlewares (dict; optional):
    Floating ui middlewares to configure position handling, `{ flip:
    True, shift: True, inline: False }` by default.

- 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.

- multiline (boolean; optional):
    Determines whether content should be wrapped on to the next line,
    `False` by default.

- offset (number; optional):
    Offset from mouse in px, `10` by default.

- portalProps (dict; optional):
    Props to pass down to the portal when withinPortal is True.

- position (a value equal to: 'top', 'left', 'bottom', 'right', 'top-end', 'top-start', 'left-end', 'left-start', 'bottom-end', 'bottom-start', 'right-end', 'right-start'; optional):
    Tooltip position relative to target element (`Tooltip` component)
    or mouse (`Tooltip.Floating` component).

- 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.

- 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.

- target (string; optional):
    Selector, ref of an element or element itself that should be used
    for positioning.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withinPortal (boolean; optional):
    Determines whether tooltip should be rendered within `Portal`,
    `True` by default.

- zIndex (string | number; optional):
    Tooltip z-index, `300` by default.

## Migration Guide  
This page helps you migrate from an old version to a newer version of Dash Mantine Components  
Category: Releases  

### Version Compatibility 


- **DMC 3.x:** Requires Dash 4.5 or later and React 19. DMC 3 is based on Mantine v9.
- **DMC 2.x:** Based on Mantine v8 and supports Dash 2 and later.
- **DMC 1.x:** Based on Mantine v7 and supports Dash 2 and later.
- **DMC 0.12–0.15:** Based on Mantine v5–v7 and requires Dash 2, with Dash 3 excluded.

See the release history at the end of this page for the Mantine version and minimum Dash version required by each DMC release.


### Upstream Mantine documentation

Be sure to refer to the Mantine docs that match your DMC version:

| DMC version | Mantine docs               |
|-------------|----------------------------|
| v3          | https://mantine.dev/  (v9) |
| v2          | https://v8.mantine.dev/    |
| v0.14–v1    | https://v7.mantine.dev/    |
| v0.13       | https://v6.mantine.dev/    |
| v0.12       | https://v5.mantine.dev/    |


### Migrating from 2.x to 3.x


DMC v3 is based on Mantine v9. See the [Mantine v8 to v9 Migration Guide](https://mantine.dev/guides/8x-to-9x/) for a complete list of changes.

Many of the breaking changes in the upstream Mantine Migration Guide are handled by DMC and do not require changes to your Dash app. The following are the known exceptions.

#### Requirements

DMC v3 requires dash>=4.5 and React 19

#### React 19

Set in your app:

```python
import dash
dash._dash_renderer._set_react_version("19.2.4")

app = dash.Dash()
```

Or set the React version with an environment variable:

```bash
REACT_VERSION=19.2.4 python app.py
```
### v3 Breaking Changes


#### Grid gutter -> gap

The `gutter` prop was renamed to `gap` for consistency with other layout components such as `Flex` and `SimpleGrid`. New `rowGap` and `columnGap` props can be used when separate vertical and horizontal spacing is needed.

#### TypographyStylesProvider -> Typography

`TypographyStylesProvider` was renamed to `Typography`.

#### Spoiler initialState -> default exapanded
The `initialState` prop was renamed to `defaultExpanded`

#### Popover and Tooltip
`Popover` and `Tooltip` components no longer accept the `positionDependencies` prop. Remove it, the position is now recalculated automatically.

#### Text color prop
The `color` prop of the `Text` and `Anchor` components was removed. Use the `c` style prop instead.



#### Mantine API changes

If you have written JavaScript that uses Mantine components or APIs, review the [Mantine v8 to v9 Migration Guide](https://mantine.dev/guides/8x-to-9x/) for breaking changes that may affect your code.

Mantine also provides an MCP server and agent skills that can help AI tools understand its component APIs and documentation.
These tools may be useful when updating JavaScript for Mantine v9. See the [Mantine guide for LLMs](https://mantine.dev/guides/llms/) for setup instructions.


#### Recharts updated to v3

DMC v3 upgrades Recharts from v2 to v3.

There are no known breaking changes to the DMC chart props. However, some charts now include additional data in `clickData` and `hoverData`.

If you have written custom JavaScript functions that work with DMC charts, review the [Recharts v3 documentation](https://recharts.org/en-US/).  There were substantial changes in Recharts v3.


### v3 Behavior and Style Changes

#### Light variant color changes.
In Mantine 9, the light variant CSS variables were changed to use solid color values instead of transparency. If you need to keep 8.x behavior during migration, set `useV8CssVariablesResolver=True` in the `MantineProvider`

```Python
dmc.MantineProvider(useV8CssVariablesResolver=True)
```

#### Default border-radius change
In 8.x, the default `border-radius` (`theme.defaultRadius`) was `sm` (4px). In 9.x, the default `border-radius` was changed to `md` (8px). To keep the previous behavior, set `defaultRadius` to `sm` in the theme.


```Python
dmc.MantineProvider(theme={"defaultRadius": "sm"})

```

#### Font weights
New `fontWeights` property was added to the [theme object](https://www.dash-mantine-components.com/theme-object). It allows you to control font-weight values used across all components.  To revert the medium font weight from 600 back to 500 (the default in Mantine 8):

```Python
dmc.MantineProvider(theme={"fontWeights": {"medium": 500}})
```

#### v3 Other changes

- `Tree` no longer defines the `data-hovered` attribute for hover state. Apply hover styles with `&:hover` instead.
- The `PasswordInput` visibility toggle icon has changed.
- Notifications now pause the auto-close timer for all visible notifications when any notification is hovered. Set `pauseResetOnHover="notification"` to restore the previous behavior of pausing only the hovered notification.
- The `mod` prop converts camelCase keys to kebab-case for data attributes.



### Migrating from 1.2.0 to 2.x

DMC V2 is based on Mantine V8.  For more information see the [Mantine 8 Changelog.](https://v8.mantine.dev/changelog/8-0-0/)
and the [DMC 2.0.0 Release announcement.]( /release-2-0-0)

Starting with DMC v2.3.0,` RichTextEditor` uses Tiptap v3. There are no known breaking changes, but projects with
customizations—such as clientside callbacks that rely on the Tiptap API or custom controls—should check for compatibility.
The Text Style API has also been updated, which may affect how JSON and HTML content are generated. For details on
changes and new features, see the [Tiptap v3 changelog](https://tiptap.dev/docs/resources/whats-new).


#### Switch withThumbIndicator

[Switch](/components/switch) component default styles were updated, it now includes checked state indicator inside the
thumb. If you want to use old styles without indicator, set `withThumbIndicator` prop to false in theme:

```python
dmc.MantineProvider(    
    theme={
        "components": {
            "Switch": {
                "defaultProps": {
                    # ✅ Disable withThumbIndicator if you want to use old styles
                    "withThumbIndicator": False,                  
                },
            },
        },
    }
)
```
#### DatesProvider timezone
DatesProvider component no longer supports timezone option:

```python
dmc.DatesProvider(
    # children= ...
    # ❌ timezone option is no longer supported
    setting={"timezone": 'UTC', "consistentWeeks": True}
)
```



#### DateTimePicker timeInputProps
`DateTimePicker` component no longer accepts `timeInputProps` prop, as the underlying `TimeInput` component was
replaced with `TimePicker`. To pass props down to `TimePicker` component, use `timePickerProps` prop instead.

1.x
```python
dmc.DateTimePicker(
    # ❌ timeInputProps is no longer available
      timeInputProps={
        "leftSection": dashIconify(icon="bi:clock"),
      }
)
```

2.x
```python
dmc.DateTimePicker(
    #   ✅ Use timePickerProps instead of timeInputProps
      timePickerProps={
        "leftSection": dashIconify(icon="bi:clock"),
         "minutesStep": 5,
        "withDropdown": True,
      }
)
```

#### CodeHighlight usage

To reduce the bundle size and increase performance,  only the top 10 languages from highlight.js are available.  See [CodeHighlight](/components/code-highlight)
for more details.  If you would like additional languages, please open an issue on our [GitHub](https://github.com/snehilvj/dash-mantine-components/issues)


#### Popover hideDetached
`Popover` now supports `hideDetached` prop to automatically close popover when target element is removed from the DOM.
Please see the example in the [Popover docs](/components/popover)

By default, `hideDetached` is enabled – the behavior has changed from 1.x version. If you prefer to keep the old
behavior, you can disable `hideDetached` for all components:


```python
dmc.MantineProvider(    
    theme={
        "components": {
            "Popover": {
                "defaultProps": {
                    #  ✅ Disable hideDetached by default if you want to keep the old behavior
                    "hideDetached": False,                  
                },
            },
        },
    }
)
```

#### Carousel changes

Update embla props that were previously passed to `Carousel` component to `emblaOptions`. Full list of props:

- `loop`
- `align`
- `slidesToScroll`
- `dragFree`
- `inViewThreshold`
- `skipSnaps`
- `containScroll`
- `speed` and `draggable` props were removed – they are no longer supported by embla

```python
#  ❌ 1.x – embla options passed as props no longer works in 2.x
dmc.Carousel(loop=True,  dragFree=True,  align="start")

# ✅ 2.x – use emblaOptions to pass options to embla
dmc.Carousel({ "loop": True, "dragFree": True, "align": 'start' })
```


#### Image No longer has `flex:0` as a default style

```python
  # ✅ Add back flex:0 style if needed
dmc.Image(src=logo, h=40, flex=0)

```

####  New DatePicker

A new `DatePicker` component has been added — this is a standalone calendar (no input field), matching Mantine's upstream
component.

Note that in v0.15.0, the original `DatePicker` was renamed to `DatePickerInput` to align with Mantine’s naming.

If you are migrating from DMC < 0.15.0 and your app used `dmc.DatePicker` update it to use `dmc.DatePickerInput`

#### New NotificationContainer component

Notifications are now handled by a single component: `NotificationContainer`. This replaces the previous
`NotificationProvider` + `Notification` approach with one that is more aligned with Mantine's implementation. Also, there is
now direct access to Mantine's  Notification API in clientside callbacks. 

Please see the new [Notification docs](/components/notification) for more details.

The `NotificationProvider` and `Notification` components are now deprecated and will be removed in a future major release.
Please see the [Notification Migration Guide](/migration-notifications) for a step-by-step guild for updating your apps.



#### Portal reuseTargetNode
`reuseTargetNode` prop of `Portal` component is now enabled by default. This option improves performance by reusing the
target node between portal renders, but in some edge cases, it might cause issues with z-index stacking context.

For more information see the [Mantine Portal documentation.](https://v8.mantine.dev/core/portal/)

If you experience issues with z-index, change `reuseTargetNode` prop to `False` in `theme`:


```python
dmc.MantineProvider(    
    theme={
        "components": {
            "Portal": {
                "defaultProps": {
                    # ✅ Disable reuseTargetNode by default if your application has z-index issues
                    "reuseTargetNode": False,                  
                },
            },
        },
    }
)
```


#### Menu data-hovered attribute
`MenuItem` no longer uses `data-hovered` attribute to indicate hovered state. If you used `data-hovered` in your styles,
you need to change it `:hover` and `:focus` selectors instead:

.css files:
```css
// ❌ 7.x – styles with `data-hovered`,
// no longer works in 8.x
.item {
  &[data-hovered] {
    background-color: red;
  }
}

// ✅ 8.x – use styles with `:hover` and `:focus`
.item {
  &:hover,
  &:focus {
    background-color: red;
  }
}
```


### Stylesheets Are Now Included Automatically (DMC ≥ 1.2.0)

As of `dash-mantine-components >= 1.2.0`, you no longer need to manually include optional stylesheets for components like `DatePicker`, `Carousel`, `CodeHighlight`, or `RichTextEditor`.

These styles are now bundled automatically — making setup faster and simpler.

#### Still using an older version?

If you're working with **DMC < 1.2.0**, you may need to manually include stylesheets like this:

```python
import dash_mantine_components as dmc
from dash import Dash

app = Dash(
    external_stylesheets=[
        dmc.styles.CAROUSEL,
        dmc.styles.CODE_HIGHLIGHT,
        dmc.styles.NOTIFICATIONS,
        # or just use dmc.styles.ALL
    ]
)
```

You can also inspect any style path directly:

```python
print(dmc.styles.CODE_HIGHLIGHT)
# → https://unpkg.com/@mantine/code-highlight@7.x.x/styles.css
```



### Migrating from 0.15 to 1.0.0

This release ensures dash-mantine-components V1 is fully compatible with both Dash 2 and Dash 3.
**If you are using dash-mantine-components<1.0.0 you must  pin your dash version to < 3.0.0**

#### Breaking Change: Carousel Props
The `draggable` and `speed` props have been removed from `Carousel` as they are no longer supported in Embla Carousel V8.
These props were functional until DMC 0.14.7, when Embla was upgraded to V8.

#### React 18 
Dash 3.0 now uses react 18 by default.  If your app uses dash>=3.0 it is no longer necessary to set the React version:
```python
import dash
# not needed with dash>=3.0
dash._dash_renderer._set_react_version("18.2.0")
```

### Migrating from 0.14 to 0.15

The `DatePicker` component has been renamed to `DatePickerInput` to align with the component names of  the upstream
Mantine Library.  We plan to add the Mantine [`DatePicker`](https://v8.mantine.dev/dates/date-picker/) component in a future release.

We still expect far fewer breaking changes going forward compared to what you may have experienced in the past. For more details, please see our [Roadmap](https://github.com/snehilvj/dash-mantine-components/discussions/377).


### Migrating from 0.12 to 0.14

#### Backstory

There are many breaking changes going from DMC `v0.12` to DMC `v0.14`. The major reason behind this was we jumped from 
underlying Mantine `v5` to Mantine `v7` and DMC tries to be as aligned with Mantine as possible. 

It's helpful to also refer to the upstream docs as well for a description of breaking changes:
  - [Mantine V7.0](https://v8.mantine.dev/changelog/7-0-0/)
  - [Mantine V6.0](https://v6.mantine.dev/changelog/6-0-0/)

This hard alignment ensures that I can continue developing and maintaining this library alongside my day job. However, 
as per the author of Mantine itself, Mantine is reaching maturity and 
Mantine `v8` is supposed to introduce a lot of new features without the cost of API change.

I'd recommend going through the [getting started](/getting-started) page as well.

#### MantineProvider

It is now mandatory to wrap your app into [MantineProvider](/components/mantineprovider) (of which only one can be there in the app).
This component is responsible for providing theme to all DMC components.

Dark theme is changed like this now:

  ```python
import dash_mantine_components as dmc

dmc.MantineProvider(
        forceColorScheme="dark",
        theme={...}
)
```

Mantine provides some better way to manage color themes in your app, but they are yet to be made available in DMC.

#### React 18+ only

Starting with `v0.14`, DMC will need REACT 18. You can ensure that in two ways:

#### In the app settings

```python
import dash

# add this before creating app object
dash._dash_renderer._set_react_version('18.2.0')

app = Dash(__name__)
```

#### Environment variable

```bash
REACT_VERSION=18.2.0 python app.py
```

#### Required StyleSheets

Except styling for core elements, the styling for components like `CodeHighlight`, `DatePicker`, `Carousel`, etc. have to be 
included by the user.

```python
from dash import Dash
import dash_mantine_components as dmc

# below covers all the stylesheets, you can pick as per your need.
stylesheets = [
    dmc.styles.DATES,
    dmc.styles.CODE_HIGHLIGHT,
    dmc.styles.CHARTS,
    dmc.styles.CAROUSEL,
    dmc.styles.NOTIFICATIONS,
    dmc.styles.NPROGRESS,
]

app = Dash(__name__, external_stylesheets=stylesheets)
```
Or, include all the stylesheets like this:

```python
app = Dash(external_stylesheets=dmc.styles.ALL)
```

#### Missing components

- `Chip` and `ChipGroup` components are not working as expected when ported over in dash. It will be worked on as part of subsequent releases.
- `TransferList` is no longer available. You might benefit from [AIO based TransferList component](https://community.plotly.com/t/dash-mantine-components-0-14-1/83865/18?u=snehilvj) created by a community member.
**update** `Chip` and `ChipGroup` are available as of 0.14.6

#### Creatable option in Select and MultiSelect

`creatable` prop has been removed from `Select` and `MultiSelect`. However, [TagsInput](/components/tagsinput) can be used to emulate
the same functionality as `MultiSelect` with `creatable` prop.

#### Left and Right section

Components that previously had `rightSection` and `icon` props, now use `leftSection` instead of `icon`. Example of Button sections:

```python
import dash_mantine_components as dmc

from dash_iconify import DashIconify

component = dmc.Button(
    "GitHub",
    leftSection=DashIconify(icon="radix-icons:github-logo", width=20),
    rightSection=dmc.Badge("3", circle=True, color="gray"),
)
```
#### Title

[Title](/components/title) doesn't accept other [Text](/components/text) props like gradient etc. anymore.

#### Progress

[Progress](/components/progress) component now supports compound components pattern. Advanced features that were previously implemented in Progress
are now supposed to be implemented with compound components instead.

```python
import dash_mantine_components as dmc

component = dmc.ProgressRoot(
    [
        dmc.ProgressSection(dmc.ProgressLabel("Documents"), value=33, color="cyan"),
        dmc.ProgressSection(dmc.ProgressLabel("Photos"), value=28, color="pink"),
        dmc.ProgressSection(dmc.ProgressLabel("Others"), value=15, color="orange"),
    ],
    size="xl",
)
```
     Tooltips on Progress are not working as expected for now. Will have to tackle this in the subsequent releases.

#### Table

[Table](/components/table) component changes:

- [Styles API](/styles-api) support
- It is now required to use `dmc` compound components instead of `html` table ones: `dmc.TableTr`, `dmc.TableTd`, etc.
- New props: `borderColor`, `withRowBorders`, `stripedColor`, `highlightOnHoverColor`
- `withBorder` prop was renamed to `withTableBorder`
- `fontSize` prop was removed, use `fz` [style prop](/style-props) instead

```python
import dash_mantine_components as dmc

elements = [
    {"position": 6, "mass": 12.011, "symbol": "C", "name": "Carbon"},
    {"position": 7, "mass": 14.007, "symbol": "N", "name": "Nitrogen"},
    {"position": 39, "mass": 88.906, "symbol": "Y", "name": "Yttrium"},
    {"position": 56, "mass": 137.33, "symbol": "Ba", "name": "Barium"},
    {"position": 58, "mass": 140.12, "symbol": "Ce", "name": "Cerium"},
]

rows = [
    dmc.TableTr(
        [
            dmc.TableTd(element["position"]),
            dmc.TableTd(element["name"]),
            dmc.TableTd(element["symbol"]),
            dmc.TableTd(element["mass"]),
        ]
    )
    for element in elements
]

head = dmc.TableThead(
    dmc.TableTr(
        [
            dmc.TableTh("Element Position"),
            dmc.TableTh("Element Name"),
            dmc.TableTh("Symbol"),
            dmc.TableTh("Atomic Mass"),
        ]
    )
)
body = dmc.TableTbody(rows)
caption = dmc.TableCaption("Some elements from periodic table")

component = dmc.Table([head, body, caption])
```
#### Group

[Group](/components/group) component changes:

- `position` prop was renamed to `justify` – it now supports all `justify-content` values
- `spacing` prop was renamed to `gap`

#### Button

[Button](/components/button) changes

- `compact` prop was removed, use `size='compact-xx'` instead
- `leftIcon` and `rightIcon` props were renamed to `leftSection` and `rightSection`
- `uppercase` prop was removed, use `tt` [style prop](/style-props) instead
- `loaderPosition` prop was removed, Loader is now always rendered in the center to prevent layout shifts

#### AppShell (renamed Navbar, Aside, Header, Footer, Main)

[AppShell](/components/appshell) component is more feature rich now and has undergone following changes:

- `AppShell` now uses compound components pattern: `dmc.AppShellNavbar`, `dmc.AppShellAside`, `dmc.AppShellHeader`, `dmc.AppShellFooter`, and `dmc.AppShellMain`.
- `AppShell` now supports animations when navbar/aside are opened/closed
- `AppShell` no longer supports `fixed` prop – all components have `position: fixed` styles, static positioning is no longer supported

#### SimpleGrid

[SimpleGrid](/components/simplegrid) now uses object format to define grid breakpoints and spacing, it works the same way as [style props](/style-props).

```python
import dash_mantine_components as dmc
from dash import html

style = {
    "border": f"1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.SimpleGrid(
    cols={"base": 1, "sm": 2, "lg": 5},
    spacing={"base": 10, "sm": "xl"},
    verticalSpacing={"base": "md", "sm": "xl"},
    children=[
        html.Div("1", style=style),
        html.Div("2", style=style),
        html.Div("3", style=style),
        html.Div("4", style=style),
        html.Div("5", style=style),
    ],
)
```
#### Grid

[Grid](/components/grid) now uses object format in `gutter`, `offset`, `span` and `order` props, all props now work the same way as [style props](/style-props).

- `Col` component has been renamed to `GridCol`

#### Image

[Image](/components/image) component changes:

- `caption` prop is no longer available 
- `width` and `height` props are replaced with `w` and `h` [style props](/style-props)
- Placeholder functionality was replaced with fallback image

```python
import dash_mantine_components as dmc

component = dmc.Image(
    radius="md",
    src=None,
    h=200,
    fallbackSrc="https://placehold.co/600x400?text=Placeholder",
)
```
#### Notification

`NotificationsProvider` has been renamed to `NotificationProvider`.
`disallowClose` is no longer available.  Use `withCloseButton`

#### Prism

`Prism` has been replaced by [CodeHighlight](/components/code-highlight).

#### MediaQuery

MediaQuery has been removed. You can use CSS or `visibleFrom` and `hiddenFrom` props.

All DMC components now support `hiddenFrom` and `visibleFrom` props. These props accept breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) 
and hide the component when viewport width is less than or greater than the specified breakpoint.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Button("Hidden from sm", hiddenFrom="sm", color="orange"),
        dmc.Button("Visible from sm", visibleFrom="sm", color="cyan"),
        dmc.Button("Visible from md", visibleFrom="md", color="pink"),
    ],
    justify="center",
)
```
###  Version Compatibility - all releases

| Dash Mantine Components | Release Date | Mantine Version | Required Dash Version |
|-------------------------|--------------|-----------------|----|
| **3.0.0**               | Nov 2026     | 9.7.4           | `dash>=2.0.0` |
| **2.8.1**               | Oct 2026     | 8.3.18          | `dash>=2.0.0` |
| **2.7.0**               | May 2026     | 8.3.18          | `dash>=2.0.0` |
| **2.6.1**               | Mar 2026     | 8.3.17          | `dash>=2.0.0` |
| **2.6.0**               | Feb 2026     | 8.3.14          | `dash>=2.0.0` |
| **2.5.0**               | Jan 2026     | 8.3.13          | `dash>=2.0.0` |
| **2.4.1**               | Dec 2025     | 8.3.10          | `dash>=2.0.0` |
| **2.4.0**               | Nov 2025     | 8.3.6           | `dash>=2.0.0` |
| **2.3.0**               | Sep 2025     | 8.3.1           | `dash>=2.0.0` |
| **2.2.1**               | Aug 2025     | 8.2.7           | `dash>=2.0.0` |
| **2.2.0**               | Aug 2025     | 8.2.5           | `dash>=2.0.0` |
| **2.1.0**               | Jul 2025     | 8.1.2           | `dash>=2.0.0` |
| **2.0.0**               | Jun 2025     | 8.0.2           | `dash>=2.0.0` |
| **1.3.0**               | May 2025     | 7.17.7          | `dash>=2.0.0` |
| **1.2.0**               | Apr 2025     | 7.17.4          | `dash>=2.0.0` |
| **1.1.0**               | Mar 2025     | 7.17.2          | `dash>=2.0.0` |
| **1.0.0**               | Mar 2025     | 7.17.0          | `dash>=2.0.0` |
| **0.15.0**              | Nov 2024     | 7.14.1          | `dash>=2.0.0,<3.0.0`|
| **0.14.0**              | Apr 2024     | 7.0             | `dash>=2.0.0,<3.0.0` |
| **0.13.0a1**            | Aug 2023     | 6.0             | `dash>=2.0.0,<3.0.0` |
| **0.12.0**              | Mar 2023     | 5.10.5          | `dash>=2.0.0,<3.0.0` |

## Notifications Migration Guide  
This page helps you migrate from the NotificationProvider to the NotificationContainer  
Category: Releases  

Starting in `dash-mantine-components` v2.0.0, the notification system has been redesigned to align more closely
with Mantine’s implementation. The `NotificationProvider` and `Notification` components are now deprecated and
will be removed in a future release. 

See the [new Notification documentation](components/notification) for more details.

Need to reference the old version? Visit the [DMC 1.3.0 Notification docs](https://dmc-docs-1-3.onrender.com/components/notification) 

### Key Changes

* Old approach:

  * Add `NotificationProvider` to your app layout.
  * Include a separate output container, such as `html.Div`.
  * Return `Notification` components from callbacks to show messages.

* New approach:

  * Add a single `NotificationContainer` inside your `MantineProvider`.
  * Use the `sendNotifications` prop to show or update notifications.
  * Use the `hideNotifications`, `clean`, and `cleanQueue` props to use the `hide`, `clean` and `cleanQueue` features.
  * Use the `appNotifications` API for client-side interactions.

### Updating Your Code

Before (deprecated):

```python
app.layout = dmc.MantineProvider(
    [
        dmc.NotificationProvider(),
        html.Div(id="notifications-output"),  
        # other components
    ]
)
```

After (recommended):

```python
app.layout = dmc.MantineProvider([
    dmc.NotificationContainer(id="notification-container"),
    # other components...
])
```

### Show Notifications

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            title="Notification",
            message="This is a notification.",
            color="blue",
            action="show",
            id="notify"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "sendNotifications"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return [{
            "action": "show",
            "title": "Notification",
            "message": "This is a notification.",
            "color": "blue",
            "id": "notify"
        }]
    return []
```

### Update Notifications

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            title="Notification",
            message="This is an updated notification.",
            color="blue",
            action="update",
            id="notify"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "sendNotifications"),
    Input("trigger-button", "n_clicks"),
)
def show_notification(n_clicks):
    if n_clicks:
        return [{
            "action": "update",
            "title": "Notification",
            "message": "This is an updated notification.",
            "color": "blue",
            "id": "notify"
        }]
    return []
```

### Hide Notifications

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def hide_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            action="hide",
            id="notify"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "hideNotifications"),
    Input("trigger-button", "n_clicks"),
)
def hide_notification(n_clicks):
    if n_clicks:
        return ["notify"] #ids  of notifications to hide
    return []
```

### Clean

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def clean_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            action="clean"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "clean"),
    Input("trigger-button", "n_clicks"),
)
def clean_notification(n_clicks):
    if n_clicks:
        return True
    return no_update
```

### Clean Queue

Before:

```python
@app.callback(
    Output("notification-output", "children"),
    Input("trigger-button", "n_clicks"),
)
def cleanQueue_notification(n_clicks):
    if n_clicks:
        return dmc.Notification(
            action="cleanQueue"
        )
    return None
```

After:

```python
@app.callback(
    Output("notification-container", "cleanQueue"),
    Input("trigger-button", "n_clicks"),
)
def cleanQueue_notification(n_clicks):
    if n_clicks:
        return True
    return no_update
```



### Keyword Arguments


#### NotificationProvider

- 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.

- autoClose (number | boolean; optional):
    Auto close timeout for all notifications in ms, `False` to disable
    auto close, can be overwritten for individual notifications in
    `notifications.show` function, `4000` by defualt.

- 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.

- containerWidth (string | number; optional):
    Notification width, cannot exceed 100%, `440` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- 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`.

- limit (number; optional):
    Maximum number of notifications displayed at a time, other new
    notifications will be added to queue, `5` by default.

- 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.

- notificationMaxHeight (string | number; optional):
    Notification `max-height`, used for transitions, `200` by default.

- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):
    Notifications position, `'bottom-right'` 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):
    Notification transition duration in ms, `250` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withinPortal (boolean; optional):
    Determines whether notifications container should be rendered
    inside `Portal`, `True` by default.

- zIndex (string | number; optional):
    Notifications container z-index, `400` by default.
#### Notification

- id (string; optional):
    Notification id, can be used to close or update notification.

- action (a value equal to: 'show', 'update', 'hide', 'clean', 'cleanQueue'; required):
    action.

- 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.

- autoClose (number | boolean; optional):
    Determines whether notification should be closed automatically,
    number is auto close timeout in ms, overrides `autoClose` from
    `Notifications`.

- 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.

- closeButtonProps (dict; optional):
    Props passed down to the close button.

    `closeButtonProps` is a dict with keys:

- color (optional):
    Controls notification line or icon color, key of `theme.colors` or
    any valid CSS color, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Notification icon, replaces color line.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading (boolean; optional):
    Replaces colored line or icon with Loader component.

- 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:

- message (a list of or a singular dash component, string or number; required):
    Notification message, required for all notifications.

- 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.

- position (a value equal to: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'; optional):
    Position on the screen to display the notification.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` 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.

- title (a list of or a singular dash component, string or number; optional):
    Notification title, displayed before body.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withBorder (boolean; optional):
    Determines whether notification should have a border, `False` by
    default.

- withCloseButton (boolean; optional):
    Determines whether close button should be visible, `True` by
    default.

## Prior releases  
Release announcement for Dash Mantine Components  
Category: Releases  

Release notes for versions before DMC v2.0.0 are available in [GitHub Discussions.](https://github.com/snehilvj/dash-mantine-components/discussions/categories/releases)

- [Release 1.3.0](https://github.com/snehilvj/dash-mantine-components/discussions/588)  May 19, 2025

- [Release 1.2.0](https://github.com/snehilvj/dash-mantine-components/discussions/572)  Apr 24, 2025

- [Release 1.1.0](https://github.com/snehilvj/dash-mantine-components/discussions/541)  Mar 20, 2025

- [Release 1.0.0](https://github.com/snehilvj/dash-mantine-components/discussions/529)  Mar 12, 2025
- [Release 0.15.3](https://github.com/snehilvj/dash-mantine-components/discussions/503)  Feb 3, 2025
- [Release 0.15.2](https://github.com/snehilvj/dash-mantine-components/discussions/490)  Jan 23, 2025
- [Release 0.15.1](https://github.com/snehilvj/dash-mantine-components/discussions/435)  Dec 6, 2024
- [Release 0.15.0](https://github.com/snehilvj/dash-mantine-components/discussions/415)  Nov 19, 2024
- [Release 0.14.7](https://github.com/snehilvj/dash-mantine-components/discussions/401)  Nov 5, 2024
- [Release 0.14.6](https://github.com/snehilvj/dash-mantine-components/discussions/399)  Oct 16, 2024
- [Release 0.14.5](https://github.com/snehilvj/dash-mantine-components/discussions/398)  Sep 29, 2024

## Version 2.0.0  
Release announcement for Dash Mantine Components v2.0.0  
Category: Releases  

###  Dash Mantine Components v2 (Powered by Mantine v8)

Released Jun 3, 2025

### Migration Guide

This version is built on [Mantine 8](https://v8.mantine.dev/changelog/8-0-0/), so there are some breaking changes, but as promised, far fewer than in previous
major releases.  See our [Migration Guide](/migration) for step-by-step instructions for updating your apps.

### What's New

*  **Functions as Props** – Use JavaScript functions from Python to customize charts, sliders, filters, dropdowns, and more
*  **Simplified Notifications** – Use `NotificationContainer` and the Mantine API directly in clientside callbacks
*  **New DatePicker** – A calendar-only component with full support for multi-date, ranges, and custom disabled logic
*  **New TimePicker & TimeGrid** – Better time selection with dropdowns, 12/24h formats, and predefined slots
*  **Submenus in Menu** – New nested menu support
*  **Carousel API updates** – Now uses `emblaOptions` for full alignment with Mantine
*  **Component improvements** – Updated `Switch`, better dropdown behavior, and more!


### New Functions as Props
You can now pass JavaScript functions to DMC components using:
```python
{"function": "yourFunctionName"}
```
This enables advanced use cases like:

- Custom chart tooltips and axis value formatting
- Smart search filters for Select and MultiSelect
- Custom option renderers with full React components
- Custom Slider scales and labels
- Dynamically disabled calendar dates

You can even pass options from Python:
```python
{"function": "formatTemp", "options": {"unit": "F"}}
```
Functions live in `/assets/*.js` under the global `window.dashMantineFunctions` object.

🤔 Don’t know JavaScript? No problem!
The docs include examples of how to use AI to convert Python functions to JavaScript, with prompt templates to help you get reliable results every time:

See the new [Functions As Props docs](/functions-as-props)


#### Example: Custom Slider Label + Scale
```python

import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Slider(
        min=2,
        max=30,
        step=1,
        value=10,
        scale={"function": "getScale"},
        labelAlwaysOn=True,
        label={"function": "valueLabelFormat"}
    ),
    dmc.RangeSlider(
        mt=50,
        min=2,
        max=30,
        step=1,
        value=[10, 20],
        scale={"function": "getScale"},
        labelAlwaysOn=True,
        label={"function": "valueLabelFormat"}
    )
])
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.getScale = (v) => Math.pow(2, v);

dmcfuncs.valueLabelFormat = (value) => {
  const units = ['KB', 'MB', 'GB', 'TB'];
  let unitIndex = 0;
  let scaledValue = value;

  while (scaledValue >= 1024 && unitIndex < units.length - 1) {
    unitIndex += 1;
    scaledValue /= 1024;
  }

  return `${scaledValue} ${units[unitIndex]}`;
};
```

#### Example: DatePicker: Disable All Except Fridays
```python

import dash_mantine_components as dmc

# makes dayjs available
#app = Dash(exteral_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])

component = dmc.Center(
    dmc.DatePicker(
        value="2024-11-08",
        defaultDate="2024-11-01",
        disabledDates={"function": "excludeDate"},
        m="lg"
    )
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.excludeDate = function(dateStr) {
   const date = dayjs(dateStr, "YYYY-MM-DD");
   return date.isValid() && date.day() !== 5;
}
```

#### Example: MultiSelect: Components in the Dropdown
```python
import dash_mantine_components as dmc

users_data = {
    "Emily Johnson": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png",
        "email": "emily92@gmail.com",
    },
    "Ava Rodriguez": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png",
        "email": "ava_rose@gmail.com",
    },
    "Olivia Chen": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
        "email": "livvy_globe@gmail.com",
    },
    "Ethan Barnes": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
        "email": "ethan_explorer@gmail.com",
    },
    "Mason Taylor": {
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
        "email": "mason_musician@gmail.com",
    },
}

component = dmc.MultiSelect(
    data=list(users_data.keys()),
    label="Employees of the month",
    placeholder="Search for employee",
    maxDropdownHeight=300,
    searchable=True,
    hidePickedOptions=True,
    renderOption={
        "function": "renderUserOption",
        "options": {"users": users_data},
    },
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderUserOption = function ({ option }, { users }) {
  const user = users[option.value];

  return React.createElement(
    dmc.Group,
    { gap: "sm" },
    React.createElement(dmc.Avatar, {
      key: "avatar",
      src: user.image,
      size: 36,
      radius: "xl",
    }),
    React.createElement(
      "div",
      { key: "text-block" },
      React.createElement(dmc.Text, { size: "sm", key: "name" }, option.value),
      React.createElement(dmc.Text, {
        size: "xs",
        opacity: 0.5,
        key: "email",
        children: user.email,
      })
    )
  );
};
```


### New NotificationContainer component

Notifications are now handled by a single component: `NotificationContainer`.

This new approach replaces the previous  `NotificationProvider` + `Notification` pattern with one that’s simpler, more
consistent with Mantine, and resolves a number of issues from earlier versions.

Also, there is now direct access to Mantine's  Notification API in clientside callbacks. 

Thanks to @BSd3v for contributing this new component.

Please see the new [Notification docs](/components/notification) for more details.


### New Menu with Sub Menus

```python

import dash_mantine_components as dmc


menu = dmc.Menu(
    width=200,
    position="bottom-start",
    keepMounted=True, # required when using SubMenu
    children=[
        dmc.MenuTarget(
            dmc.Button("Toggle Menu")
        ),
        dmc.MenuDropdown([
            dmc.MenuItem("Dashboard"),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Products")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("All products"),
                    dmc.MenuItem("Categories"),
                    dmc.MenuItem("Tags"),
                    dmc.MenuItem("Attributes"),
                    dmc.MenuItem("Shipping classes"),
                ])
            ]),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Orders")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("Open"),
                    dmc.MenuItem("Completed"),
                    dmc.MenuItem("Cancelled"),
                ])
            ]),

            dmc.SubMenu([
                dmc.SubMenuTarget(
                    dmc.SubMenuItem("Settings")
                ),
                dmc.SubMenuDropdown([
                    dmc.MenuItem("Profile"),
                    dmc.MenuItem("Security"),
                    dmc.MenuItem("Notifications"),
                ])
            ]),
        ])
    ]
)

component=dmc.Center(menu)
```


### New TimePicker Component

New `TimePicker` component is an alternative to `TimeInput` that offers more features. It supports 24-hour and
12-hour formats, dropdown with hours, minutes and seconds, and more.

With Dropdown:

```python
import dash_mantine_components as dmc


component = dmc.Group(
    gap=50,
    mb=60,
    children=[
        dmc.TimePicker(
            label="Enter time (24h format)",
            withSeconds=True,
            withDropdown=True
        ),
        dmc.TimePicker(
            label="Enter time (12h format)",
            withSeconds=True,
            withDropdown=True,
            format="12h"
        ),
    ],
)
```
With presets:

```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.TimePicker(
    label="Enter a time",
    withDropdown=True,
    maxDropdownContentHeight=300,
    presets = [
        {"label": 'Morning', "values": ['06:00:00', '08:00:00', '10:00:00']},
        {"label": 'Afternoon', "values": ['12:00:00', '14:00:00', '16:00:00']},
        {"label": 'Evening', "values": ['18:00:00', '20:00:00', '22:00:00']},
    ],
    mb=120,
)
```
### DateTimePicker component changes
`DateTimePicker` component now uses `TimePicker` under the hood instead of `TimeInput`. You can now use all 
`TimePicker` features with `DateTimePicker` component.

The  `timeInputProps` is no longer available.  To pass props down to the underlying `TimePicker` you need to use `timePickerProps` prop.

Example of enabling dropdown and setting 12h format for time picker:


```python
from datetime import datetime

import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    label="Pick date and time",
    placeholder="Pick Date and time",
    timePickerProps={
        "withDropdown": True,
        "popoverProps": { "withinPortal": False },
        "format": '12h',
      }
)
```
### New TimeGrid component
New `TimeGrid` component allows to capture time value from the user with a predefined set of time slots:


```python
import dash_mantine_components as dmc
from dash import callback, Input, Output

component = dmc.Stack([
    dmc.TimeGrid(
        timeRangeData={"startTime": "10:00", "endTime": "21:00", "interval": "01:00"},
        withSeconds=False,
        simpleGridProps={
            "type": "container",
            "cols": {"base": 1, "180px": 2, "320px": 3},
            "spacing": "xs",
        },
        value="10:00:00",
        id="time-grid"
    ),
    dmc.Text(id="time-grid-out")
])

@callback(
    Output("time-grid-out", "children"),
    Input("time-grid", "value")
)
def update(value):
    return f"You selected: {value}"
```
### New DatePicker component  

We've added a new `DatePicker` — a calendar-only component with no input field. It's the base calendar used in components 
like `DateInput`, `DatePickerInput`, and `DateTimePicker`. Any configuration you can apply to `DatePicker` — such as
multiple selection, min/max dates, week numbers, or disabled dates — can also be used in those components.

[Read the full DatePicker docs →](/components/datepicker)

```python
import dash_mantine_components as dmc
from dash import Input, Output, html, callback


component = dmc.Stack([
    dmc.DatePicker(id="date-picker"),
    dmc.Text(id="selected-date-picker", mt=10),
], align="center")


@callback(
    Output("selected-date-picker", "children"), Input("date-picker", "value")
)
def update_output(d):
    return f"You selected {d}"
```
### Popover Hide detached

Use `hideDetached` prop to configure how the dropdown behaves when the target element is hidden with styles 
(`display: none, visibility: hidden,` etc.), removed from the DOM, or when the target element is scrolled out of the viewport.

By default, `hideDetached` is enabled – the dropdown is hidden with the target element. You can change this behavior
with `hideDetached=False`. To see the difference, try to scroll the container that holds the Popover components:


```python
import dash_mantine_components as dmc


component = dmc.Box(
    style={"border": "1px solid var(--mantine-color-dimmed)", "overflow": "auto"},
    p="xl",
    w=400,
    h=200,
    children=[
        dmc.Box(
            w=1000,
            h=400,
            children=dmc.Group(
                [
                    dmc.Popover(
                        opened=True,
                        width="target",
                        position="bottom",
                        closeOnClickOutside=False,
                        children=[
                            dmc.PopoverTarget(
                                dmc.Button("Toggle popover")
                            ),
                            dmc.PopoverDropdown("This popover dropdown is hidden when detached"),
                        ],
                    ),
                    dmc.Popover(
                        opened=True,
                        width="target",
                        position="bottom",
                        closeOnClickOutside=False,
                        hideDetached=False,
                        children=[
                            dmc.PopoverTarget(
                                dmc.Button("Toggle popover")
                            ),
                            dmc.PopoverDropdown("This popover dropdown is visible when detached"),
                        ],
                    ),
                ]
            ),
        )
    ]
)
```



### Carousel changes
The following props are removed.  They now need to be passed to embla using the `emblaOptions` prop
- `loop`
- `align`
- `slidesToScroll`
- `dragFree`
- `inViewThreshold`
- `skipSnaps`
- `containScroll`

```python
#  ❌ 1.x – embla options passed as props no longer works in 2.x
dmc.Carousel(loop=True,  dragFree=True,  align="start")

# ✅ 2.x – use emblaOptions to pass options to embla
dmc.Carousel({ "loop": True, "dragFree": True, "align": 'start' })
```
Also, the `speed` and `draggable` props were removed – they are no longer supported by embla

### Switch withThumbIndicator
Switch component styles were updated to include indicator inside the thumb. You can change it by setting `withThumbIndicator` prop:

### Other changes
- [CodeHighlight](/components/code-highlight) - To reduce the bundle size only the top 10 languages are supported.  If you would like to include other, please open an issue on our GitHub
- DatesProvider timezone -DatesProvider component no longer supports timezone option – all Mantine dates components now use strings in YYYY-MM-DD HH:mm:ss format as values and do not contain timezone information.
- See the [Mantine Changelog](https://v8.mantine.dev/changelog/8-0-0/#other-changes) for other changes.

---

### Quick Start

Just a reminder...

* If you're using Dash ≥ 3.0.0, you no longer need to set the React version manually.
* If you're using DMC ≥ 1.2.0, there's no need to include additional stylesheets like `dmc.styles.ALL`.

Here’s a minimal app to get started:


```python
import dash_mantine_components as dmc
from dash import Dash

app = Dash()

app.layout = dmc.MantineProvider(
    dmc.Alert(
        "Welcome to Dash Mantine Components",
        title="Hello!",
        color="violet",
    )
)

if __name__ == "__main__":
    app.run(debug=True)
```

## Version 2.1.0  
Release announcement for Dash Mantine Components v2.1.0  
Category: Releases  

Released July 1, 2025

### What's New
 
* New `ModalStack` and `DrawerStack` components
* Function support expanded across more components and props
* Custom rendering options for calendar and tree views
* UI refinements and new props across the board
* Based on [Mantine 8.1.2](https://v8.mantine.dev/changelog/8-1-0/)


### New ModalStack and DrawerStack components

Use [ModalStack](/components/modal) or [DrawerStack](/components/drawer) to render and manage multiple modals or drawers at once. These components handle focus, z-index stacking, and Escape key closing automatically.


```python
import dash_mantine_components as dmc
from dash import html, Output, Input, callback, ctx, no_update


component = dmc.Center([
    dmc.ModalStack(
        id="modal-stack",
        children=[
            dmc.ManagedModal(
                id="delete-page",
                title="Delete this page?",
                children=[
                    dmc.Text("Are you sure you want to delete this page? This action cannot be undone."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-1", variant="default"),
                            dmc.Button("Delete", id="delete", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedModal(
                id="confirm-action",
                title="Confirm action",
                children=[
                    dmc.Text("Are you sure you want to perform this action? This action cannot be undone. If you are sure, press confirm button below."),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-2", variant="default"),
                            dmc.Button("Confirm", id="confirm", color="red"),
                        ],
                    ),
                ],
            ),
            dmc.ManagedModal(
                id="really-confirm-action",
                title="Really confirm action",
                children=[
                    dmc.Text("Jokes aside. You have confirmed this action. This is your last chance to cancel it. After you press confirm button below, action will be performed and cannot be undone. For real this time. Are you sure you want to proceed?"),
                    dmc.Group(
                        mt="lg",
                        justify="flex-end",
                        children=[
                            dmc.Button("Cancel", id="cancel-3", variant="default"),
                            dmc.Button("Confirm", id="final-confirm", color="red"),
                        ],
                    ),
                ],
            ),
        ]
    ),
    dmc.Button("Open modal", id="open")
])


@callback(
    Output("modal-stack", "open"),
    Output("modal-stack", "closeAll"),
    Input("open", "n_clicks"),
    Input("cancel-1", "n_clicks"),
    Input("cancel-2", "n_clicks"),
    Input("cancel-3", "n_clicks"),
    Input("delete", "n_clicks"),
    Input("confirm", "n_clicks"),
    Input("final-confirm", "n_clicks"),
    prevent_initial_call=True,
)
def control_modals(*_):
    trigger = ctx.triggered_id
    if trigger == "open":
        return "delete-page", False
    if trigger in ("cancel-1", "cancel-2", "cancel-3", "final-confirm"):
        return None, True
    if trigger == "delete":
        return "confirm-action", False
    if trigger == "confirm":
        return "really-confirm-action", False
    return no_update, no_update
```


### Calendar headerControlsOrder prop

Calendar-based components like [DatePicker](/components/datepicker) now support the `headerControlsOrder` prop, which lets you customize the layout of header buttons. The value is a dictionary using keys `'previous'`, `'next'`, and `'level'`.

```python
import dash_mantine_components as dmc

component = dmc.DatePicker(
    value="2025-02-01",
    headerControlsOrder = ['level', 'previous', 'next'],
    styles = {
        "calendarHeaderLevel": {
            "justifyContent": 'flex-start',
            "paddingInlineStart": 8,
        },
    }
)
```
### Slider Domain prop
[Slider](/components/slider) component now supports `domain` prop that allows setting the possible range of values independently of the min and max values:


```python
import dash_mantine_components as dmc

component = dmc.Slider(
    domain=[0, 100],
      min=10,
      max=90,
      value=25,
      marks=[
        { "value": 10, "label": 'min' },
        { "value": 90, "label": 'max' },
      ]
)
```
### RangeSlider pushOnOverlap prop
[RangeSlider](/components/range-slider) component now supports `pushOnOverlap` prop that defines whether the slider should push the overlapping thumb when the user drags it.

This examples shows  `pushOnOverlap=False`  (The default is `True`)

```python
import dash_mantine_components as dmc

component = dmc.RangeSlider(
    pushOnOverlap=False,
    minRange=20,
    value=[25, 65]
)
```
### Additional Props Now Support Functions

Function props were introduced in DMC v2.0, allowing you to pass JavaScript functions to certain component props for dynamic formatting, styling, and rendering.

In v2.1, this support has been expanded to include even more components and props — such as  calendar inputs, AutoComplete, and Tree.

You can now customize things like:

* Highlighting or disabling specific dates, months, or years in the calendar, month and year pickers
* Modifying how AutoComplete options are rendered or filtered
* Fully controlling how each node in a Tree is displayed

For a complete list of newly supported function props, [see the table in the docs](/functions-as-props#supported-props-in-v2-1).
And for guidance on writing these functions — or generating them from Python using AI — see the [Functions as Props docs](/functions-as-props).

#### Example: Add an indicator to a calendar day

```python
import dash_mantine_components as dmc


# Adding dayjs as external script to make it available to the function
# app = Dash(external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])


component = dmc.DatePicker(
    id="custom-day-render",
    renderDay={"function": "highlightSixteenthWithDot"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var dayjs = window.dayjs;

dmcfuncs.highlightSixteenthWithDot = function (dateStr) {
  const day = dayjs(dateStr).date();

  return React.createElement(
    dmc.Indicator,
    {
      size: 9,
      color: "red",
      offset: -5,
      disabled: day !== 16, // displays indicator only on the the 16th doy of the month
    },
    React.createElement("div", null, day)
  );
};
```


#### Example: Add props to year and month control

Customize the year, month, and day controls using `getYearControlProps`, `getMonthControlProps`, and `getDayProps`. Each function receives a date and returns props to apply to that control.

This example:

* Highlights every Friday the 13th using `getDayProps`
* Disables June and highlights February using `getMonthControlProps` (In the month picker)
* Disables 2026 and highlights 2025 using `getYearControlProps`  (In the year picker)


```python

import dash_mantine_components as dmc

# Adding dayjs as external script to make it available to the function
# app = Dash(external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js"])

component = dmc.DatePicker(
    defaultDate="2025-06-01",
    getDayProps={"function": "highlightFriday13"},
    getYearControlProps={"function": "yearControlProps"},
    getMonthControlProps={"function": "monthControlProps"},
    my="lg"
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

// dayjs is loaded globally via Dash external_scripts.
// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider
var dayjs = window.dayjs;

dmcfuncs.highlightFriday13 = function (dateStr) {
  const d = dayjs(dateStr);

  if (d.day() === 5 && d.date() === 13) {
    return {
      style: {
        backgroundColor: 'var(--mantine-color-red-filled)',
        color: 'var(--mantine-color-white)',
      },
    };
  }

  return {};
};

dmcfuncs.yearControlProps = function (dateStr) {
  const d = dayjs(dateStr);
  const currentYear = new Date().getFullYear();

  if (d.year() === currentYear) {
    return {
      style: {
        color: 'var(--mantine-color-blue-filled)',
        fontWeight: 700,
      },
    };
  }

  if (d.year() === currentYear + 1) {
    return { disabled: true };
  }

  return {};
};

dmcfuncs.monthControlProps = function (dateStr) {
  const d = dayjs(dateStr);

  if (d.month() === 1) {
    return {
      style: {
        color: 'var(--mantine-color-blue-filled)',
        fontWeight: 700,
      },
    };
  }

  if (d.month() === 5) {
    return { disabled: true };
  }

  return {};
};
```

#### Example:  Custom Rendering of Tree component

You can fully control how each node is rendered in the [Tree](/components/tree) component using the `renderNode` function. This allows 
custom icons, layout, or complex styling beyond the built-in options.



```python
import dash_mantine_components as dmc
import dash_iconify  # required in order to use DashIconify in the renderNode function
from .data import data


component = dmc.Tree(
    data=data,
    renderNode={"function": "myLeaf"},
    expanded=[
        "node_modules",
        "node_modules/react",
    ]
)
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.myLeaf = function (payload) {
  const dmc = window.dash_mantine_components;
  const iconify = window.dash_iconify;

  function getIcon(name, isFolder, expanded) {
    const size = 14;

    if (name.endsWith('package.json')) {
      return React.createElement(iconify.DashIconify, {
        icon: 'logos:npm-icon',
        width: size,
        height: size
      });
    }

    if (
      name.endsWith('.ts') ||
      name.endsWith('.tsx') ||
      name.endsWith('tsconfig.json')
    ) {
      return React.createElement(iconify.DashIconify, {
        icon: 'logos:typescript-icon',
        width: size,
        height: size
      });
    }

    if (name.endsWith('.css')) {
      return React.createElement(iconify.DashIconify, {
        icon: 'vscode-icons:file-type-css',
        width: size,
        height: size
      });
    }

    if (isFolder) {
      return React.createElement(iconify.DashIconify, {
        icon: expanded ? 'tabler:folder-open' : 'tabler:folder',
        width: size,
        height: size,
        color: '#f59f00' // Mantine yellow-9
      });
    }

    return null;
  }

  const { node, expanded, hasChildren, elementProps } = payload;

  return React.createElement(
    dmc.Group,
    { key: payload.node.value, gap: 5, ...elementProps },
    getIcon(node.value, hasChildren, expanded),
    React.createElement('span', null, node.label)
  );
};
```

### AutoComplete improvements

Thanks to first-time contributor @ihor-lazariev for adding the following features in [PR #604](https://github.com/snehilvj/dash-mantine-components/pull/604):

* Support for functions in `renderOption` and `filter` props
* New `clearButtonProps` and `clearable` props

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Autocomplete(
    label="Select with renderOption",
    placeholder="Select text align",
    data=[
      { "value": 'left', "label": 'left' },
      { "value": 'center', "label": 'center' },
      { "value": 'right', "label": 'right' },
      { "value": 'justify', "label": 'justify' },
    ],
    renderOption={"function": "renderOptionSelect"},
    clearable=True
)
```
### Other Changes

See the [Mantine Changelog](https://v8.mantine.dev/changelog/8-1-0/#other-changes) for more.

* [`presets` for DatePicker](https://v8.mantine.dev/changelog/8-1-0/#datepicker-presets): Adds predefined date ranges next to the calendar
* [Popover behavior improvements](https://v8.mantine.dev/changelog/8-1-0/#popover-middlewares-improvements): More consistent dropdown positioning with dynamic content
* All components now support the `bdrs` style prop for border radius
* `Tooltip` now supports the `autoContrast` prop for improved legibility


---

### Quick Start

Just a reminder:

* With Dash ≥ 3.0.0, there’s no need to manually set the React version.
* With DMC ≥ 1.2.0, you no longer need to include optional stylesheets such as `dmc.styles.ALL`.

Here’s a minimal app to get started:

```python
import dash_mantine_components as dmc
from dash import Dash

app = Dash()

app.layout = dmc.MantineProvider(
    dmc.Alert(
        "Welcome to Dash Mantine Components",
        title="Hello!",
        color="violet",
    )
)

if __name__ == "__main__":
    app.run(debug=True)
```

## Version 2.2.0  
Release announcement for Dash Mantine Components v2.2.0  
Category: Releases  

Released August 19, 2025
Based on Mantine 8.2.5


### Source edit mode in RichTextEditor

[RichTextEditor](/components/richtexteditor) now supports source code edit mode.

```python
import dash_mantine_components as dmc


content= '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>'

component =dmc.RichTextEditor(
    html=content,
    toolbar={
        "sticky": True,
        "controlsGroups": [
            ["SourceCode"],
            [
                "Blockquote",
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "ClearFormatting",
                "Highlight",
            ],
        ],
    },
)
```
### Custom controls in RichTextEditor 
Use `CustomControl` in the `controlsGroups` to create create custom controls in the `toolbar`. Mantine wraps Tiptap V2.9.
To see the commands available for use in your custom controls see the [Tiptap documentation](https://v2.tiptap.dev/docs/editor/api/commands)

Thanks to @BSd3v for adding this feature in [PR #629](https://github.com/snehilvj/dash-mantine-components/pull/629)


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

toolbar = {
    "sticky": True,
    "controlsGroups": [
        [

            {
                "CustomControl": {
                    "aria-label": "Insert Table",
                    "title": "Insert Table",
                    "children": [DashIconify(icon="mdi:table-plus", width=20, height=20)],
                    "onClick": {"function": "insertTable"},
                },
            },
            {
                "CustomControl": {
                    "aria-label": "Add Column Before",
                    "title": "Add Column Before",
                    "children": [DashIconify(icon="mdi:table-column-plus-before", width=20, height=20)],
                    "onClick": {"function": "addColumnBefore"},
                },
            },
            {
                "CustomControl": {
                    "aria-label": "Delete Column",
                    "title": "Delete Column",
                    "children": [DashIconify(icon="mdi:table-column-remove", width=20, height=20)],
                    "onClick": {"function": "deleteColumn"},
                },
            },
        ],
        [
            "Bold",
            "Italic",
            "Underline",
        ],
    ],
}

component = dmc.RichTextEditor(
    html= '<div>Click controls to insert table, add column before, or delete column</div>',
    toolbar = toolbar,
    className="rte"  # applies custom table styles to this component only
)
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.insertTable = ({editor}) => {
    editor?.chain().focus().insertTable({ rows: 5, cols: 3, withHeaderRow: true }).run()
}

dmcfuncs.addColumnBefore = ({editor}) => {
    editor?.chain().focus().addColumnBefore().run()
}

dmcfuncs.deleteColumn= ({editor}) => {
    editor?.chain().focus().deleteColumn().run()
}
```

```css
.rte :is(table, th, td) {
    border: 1px solid var(--table-border-color);
}
```

 
### Bar value label props

[Bar Chart](/components/barchart) now supports passing props down to [recharts LabelList](https://recharts.org/en-US/api/LabelList) component with `valueLabelProps` prop. 

Thanks to first time contributor @CGaul for adding this feature in [PR #620](https://github.com/snehilvj/dash-mantine-components/pull/620)! 

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.BarChart(
    h=300,
    dataKey="month",
    data=data,
    withBarValueLabel=True,
    valueLabelProps={"position": 'inside', "fill": 'white'},
    withLegend=True,
    withTooltip=False,
    series=[
        {"name": "Smartphones", "color": "violet.6"},
        {"name": "Laptops", "color": "blue.6"},
        {"name": "Tablets", "color": "teal.6"},
    ],
    valueFormatter={"function": "formatNumberIntl"},
)
```
### Styles API attributes
You now can pass attributes to inner elements of all components that support [Styles API](/styles-api) with `attributes`
prop. For example, it can be used to add data attributes for testing purposes:

```python
import dash_mantine_components as dmc


component = dmc.Button(
    "Button with attributes",
    attributes={
        "root": { "data-test-id": "root" },
        "label": { "data-test-id": "label" },
        "inner": { "data-test-id": "inner" },
      },
)
```
### Container grid strategy

 [Container](/components/container) now supports `strategy="grid"` prop which enables more features.

Differences from the default `strategy="block"`:

- Uses `display: grid` instead of `display: block`
- Does not include default inline padding
- Does not set `max-width` on the root element (uses grid template columns instead)

Features supported by `strategy="grid"`:

- Everything that is supported by `strategy="block"`
- Children with `data-breakout` attribute take the entire width of the container's parent element
- Children with `data-container` inside `data-breakout` have the same width as the main grid column

Example of using breakout feature:

```python
import dash_mantine_components as dmc
from dash import html


component = dmc.Container(
    [
        dmc.Box("Main Content", bg="var(--mantine-color-indigo-light)", h=50),
        html.Div(
            [
                "Breakout",
                html.Div(
                    "Container inside breakout",
                    style={
                        "backgroundColor": "var(--mantine-color-indigo-filled)",
                        "color": "white",
                        "height": 50,
                    },
                    **{"data-container": ""}
                ),
            ],
            style={
                "backgroundColor": "var(--mantine-color-indigo-light)",
                "marginTop": 16,
            },
            **{"data-breakout": ""}
        ),
    ],
    size=500,
    strategy="grid",
)
```


### Tooltip Target

New [Tooltip](/components/tooltip) `target` prop is an alternative to `children`. It accepts a string (selector), an HTML
element or a `ref` object with HTML element. Use `target` prop when you do not render tooltip target as JSX element—for
example, in a clientside callback.

Example of using target prop with a string selector:

```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Button("Hover me to see tooltip", id="my-target"),
    dmc.Tooltip(target="#my-target", label="Tooltip over button")
])
```
### autoSelectOnBlur prop

[Select](/components/select) and [Autocomplete](/components/autocomplete) components now support `autoSelectOnBlur` prop.
Use it to automatically select the highlighted option when the input loses focus. To see this feature in action: select
an option with up/down arrows, then click outside the input:


```python
import dash_mantine_components as dmc

component = dmc.Select(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    placeholder="Pick value",
    autoSelectOnBlur=True,
    w=400,
)
```
### clearSearchOnFocus prop

For searchable [Select](/components/select) components, when `clearSearchOnFocus=True`, the search input will be cleared each time the
field gains focus.  This is useful when you want the user to start with an empty search box each time, without having 
to manually delete the existing text.  

Thanks @vaughnfuelling1 for the [feature request](https://github.com/snehilvj/dash-mantine-components/issues/626)!


```python
import dash_mantine_components as dmc

component = dmc.Select(
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    value="Pandas",
    searchable=True,
    clearSearchOnFocus=True,
)
```
### Accordion chevronIconSize prop
- The [Accordion](/components/accordion) default `chevronSize` prop value was changed to `auto` to allow using dynamic icon sizes.
- The `Accordion` now supports `chevronIconSize` prop to configure size of the default chevron icon.

### New in the Docs

#### New Autocomplete component section


Use [Autocomplete](/components/autocomplete) component in the following cases:

- You want to allow user to enter any value
- You want to display suggestions to the user based on the input value
- You want to preserve user input on blur if option was not selected from the dropdown
- `value` and `label` of the option are the same.

```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback

component = html.Div(
    [
        dmc.Autocomplete(
            label="Your favorite library",
            placeholder="Pick value or enter anything",
            id="framework-autocomplete",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            mb=10,
        ),
        dmc.Text(id="autocomplete-value"),
    ]
)


@callback(Output("autocomplete-value", "children"), Input("framework-autocomplete", "value"))
def select_value(value):
    return f" You selected {value}"
```
#### Layout Overview

The new [Layout Overview](/layout-overview) section helps you choose the right component for your use case:

* `Grid` – Use when columns have different sizes (for example, first column is 1/3 width, second is 2/3).
* `SimpleGrid` – Use for equal-width columns.
* `Group` – Arrange items horizontally.
* `Stack` – Arrange items vertically.
* `Flex` – Create both horizontal and vertical flexbox layouts. More flexible than `Group` or `Stack`, but requires more configuration.

This section also explains the differences between `Container`, `Paper`, and `Box`, and provides an overview of
`AppShell` for adding headers, footers, navbars, and asides to your app.


#### Theming and Style section updates

The Theming and Styles are now two sections to make the information easier to find.  Plus there is a new
[Mantine Overview](/mantine-overview) section to help understand the basic features of the Mantine API.

### Patch Release 2.2.1
 - Updates to Mantine 8.2.7
 - Fixes regression where nested `NavLink` did not open on click
 - Fixes `MulitSelect` and `Select` - changes to the `data` and `value` are batched so they only trigger a single callback

### Quick Start

Just a reminder:

* With Dash ≥ 3.0.0, there’s no need to manually set the React version.
* With DMC ≥ 1.2.0, you no longer need to include optional stylesheets such as `dmc.styles.ALL`.

Here’s a minimal app to get started:

```python
import dash_mantine_components as dmc
from dash import Dash

app = Dash()

app.layout = dmc.MantineProvider(
    dmc.Alert(
        "Welcome to Dash Mantine Components",
        title="Hello!",
        color="violet",
    )
)

app.run(debug=True)
```

## Version 2.3.0  
Release announcement for Dash Mantine Components v2.3.0  
Category: Releases  

September 21, 2025  

Based on Mantine 8.3.1

### New DirectionProvider component 

Mantine supports right-to-left (RTL) layouts out of the box. Try the new direction toggle in the header of these 
docs — one click and the entire app flips to RTL. Not just the text, but every component adapts. Check out the [sliders](/components/slider)
in RTL mode, they feel completely natural.

See the [RTL (right-to-left) direction guide](/rtl)  for details on enabling RTL direction and adding a toggle to your app.


```python
app.layout = dmc.DirectionProvider(
    dmc.MantineProvider([
     # your app layout
     ]),
    direction="rtl"
)
```

### New MiniCalendar component

The new [MiniCalendar](/components/mini-calendar) component makes it easy to add compact calendars.


```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.Stack([
    dmc.MiniCalendar(
        defaultDate="2025-01-02",
        value="2025-01-03",
        id="mini-calendar"
    ),
    dmc.Text(id="mini-calendar-date", m="md")
])

@callback(
    Output("mini-calendar-date", "children"),
    Input("mini-calendar", "value"),
)
def update(d):
    return f"You selected: {d}"
```
### Progress vertical orientation

[Progress](/components/progress) now supports vertical orientation:

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.Progress(value=80, orientation="vertical", h=200),

    dmc.Progress(
        value=60,
        color="orange",
        size="xl",
        orientation="vertical",
        h=200,
        animated=True
    ),

    dmc.ProgressRoot(
        size="xl",
        autoContrast=True,
        orientation="vertical",
        h=200,
        children=[
            dmc.ProgressSection(
                value=40,
                color="lime.4",
                children=dmc.ProgressLabel("Documents")
            ),
            dmc.ProgressSection(
                value=20,
                color="yellow.4",
                children=dmc.ProgressLabel("Apps")
            ),
            dmc.ProgressSection(
                value=20,
                color="cyan.7",
                children=dmc.ProgressLabel("Other")
            )
        ]
    )
])
```
### RichTextEditor upgraded to Tiptap V3

[RichTextEditor](/components/richtexteditor) is now built on Tiptap V3 enabling features like  `BackgroundColor`,
`FontFamily`, `FontSize`, `LineHeight`.

Note: This change has no known breaking changes, but customizations may be affected.  See our [migration guide,](https://www.dash-mantine-components.com/migration) for details.
  

Here is an example of creating custom buttons to change the font size:


```python

import dash_mantine_components as dmc
from dash_iconify import DashIconify


component = dmc.RichTextEditor(
    html="<p>Change font size with the controls!</p>",
    toolbar={
        "controlsGroups": [
            ["H1", "H2", "H3", "H4"],
            [
                {
                    "CustomControl": {
                        "aria-label": "Increase font size",
                        "title": "Increase font size",
                        "children": DashIconify(icon="mdi:format-font-size-increase", width=16),
                        "onClick": {"function": "increaseFontSize"},
                    },
                },
                {
                    "CustomControl": {
                        "aria-label": "Decrease font size",
                        "title": "Decrease font size",
                        "children": DashIconify(icon="mdi:format-font-size-decrease", width=16),
                        "onClick": {"function": "decreaseFontSize"},
                    },
                },
            ],
         ],
    },
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

function changeFontSize(editor, delta) {
  if (!editor) return;
  const { from, to } = editor.state.selection;
  let size = 16; // default

  editor.state.doc.nodesBetween(from, to, (node) => {
    if (node.isText) {
      const mark = node.marks.find(m => m.type.name === "textStyle");
      if (mark?.attrs.fontSize) {
        size = parseInt(mark.attrs.fontSize, 10);
      }
    }
  });

  const newSize = Math.min(Math.max(size + delta, 8), 72) + "px";
  editor.chain().focus().setFontSize(newSize).run();
}

dmcfuncs.increaseFontSize = ({ editor }) => changeFontSize(editor, 2);
dmcfuncs.decreaseFontSize = ({ editor }) => changeFontSize(editor, -2);
```

### ScrollArea scrollTo prop

The [ScrollArea](/components/scrollarea), now includes a `scrollTo` prop to control the viewport position.

  * `top` – The vertical position (pixels or percentage string, from '0%' to '100%')
  * `left` – The horizontal position (pixels or percentage string, from '0%' to '100%')
  * `behavior` – `auto` (instant) or `smooth` (animated, default)

```python
import dash_mantine_components as dmc
from dash import callback, Input, Output, ctx


content = [
    dmc.Box([
        dmc.Title(f"Section {i}", order=4, mt="sm", id=f"section-{i}"),
        dmc.Text("""
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Dicta perspiciatis reiciendis voluptate eaque itaque quos.
            Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos
            necessitatibus expedita delectus veniam culpa!            
        """)
    ])
    for i in range(1, 11)
]

component = dmc.Box([
    dmc.ScrollArea(
        content,
        id="scrollArea",
        h=250, w=350,
    ),
    dmc.Group([
        dmc.Button("Scroll to Top", id="scrollto-top"),
        dmc.Button("Scroll to Middle", id="scrollto-middle"),
        dmc.Button("Scroll to Bottom", id="scrollto-bottom"),
    ], mt="lg"),
])


@callback(
    Output("scrollArea", "scrollTo"),
    Input("scrollto-top", "n_clicks"),
    Input("scrollto-middle", "n_clicks"),
    Input("scrollto-bottom", "n_clicks"),
)
def scroll_to(t, m, b):
    if ctx.triggered_id == "scrollto-middle":
        return {"top": "50%"}
    if ctx.triggered_id == "scrollto-bottom":
        return {"top": "100%"}
    return {"top": 0}
```
### New ScrollAreaAutosize component

`ScrollAreaAutosize` component creates a scrollable container once a given max-height is reached.

```python
import dash_mantine_components as dmc
from dash import callback, Output, Input, ctx

lorem = (
    "Lorem ipsum, dolor sit amet consectetur adipisicing elit. "
    "Dicta perspiciatis reiciendis voluptate eaque itaque quos. "
    "Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos "
    "necessitatibus expedita delectus veniam culpa!"
)

component = dmc.Stack(
    [
        dmc.ScrollAreaAutosize(mah=300, maw=400, p="sm", id="scrollarea-autosize"),
        dmc.Group(
            m="lg",
            children=[
                dmc.Button(
                    "1 paragraph",
                    id="btn-1-paragraph",
                    color="red",
                ),
                dmc.Button(
                    "4 paragraphs",
                    id="btn-4-paragraphs",
                ),
            ],
        ),
    ]
)


@callback(
    Output("scrollarea-autosize", "children"),
    Input("btn-1-paragraph", "n_clicks"),
    Input("btn-4-paragraphs", "n_clicks"),
)
def update_paragraphs(inc, dec):
    if ctx.triggered_id == "btn-1-paragraph":
        return dmc.Box(lorem, p="sm")
    return [dmc.Box(lorem, p="sm") for _ in range(4)]
```
### New Overlay component

[Overlay](/components/overaly) creates a customizable  layer over content or the entire viewport. It’s useful for dimming
effects, interactive overlays, and custom loading states. You can configure opacity, color, and positioning.

```python
import dash_mantine_components as dmc
from dash import Dash, Input, Output, callback, html


component = dmc.Stack([
        dmc.AspectRatio(
            ratio=16/9,
            maw=400,
            mx="auto",
            pos="relative",
            children=[
                html.Img(
                    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png",
                    alt="Demo",
                ),
                dmc.Overlay(
                    id="overlay-usage",
                    color="#000",
                    backgroundOpacity=0.85,
                    style={"display": "block"}  # Initially visible
                )
            ]
        ),
        dmc.Button(
            "Toggle overlay",
            id="overlay-toggle-button",
            mx="auto",
            mt="lg",
            n_clicks=0
        )
    ])


@callback(
    Output("overlay-usage", "style"),
    Input("overlay-toggle-button", "n_clicks")
)
def toggle_overlay(n_clicks):
    if n_clicks %2 == 0:
        return {"display": "block"}
    return {"display": "none"}
```
### MultiSelect improvement

[MultiSelect](/components/multiselect) now supports `clearSearchOnChange=False` allowing multiple selectios from the same search query.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    data=["aa", "ab", "ac", "ba", "bb", "bc"],
    value=["aa"],
    searchable=True,
    clearSearchOnChange=False
)
```
### Autocomplete debounce prop

The [Autocomplete](/components/autocomplete) component now supports the [debounce prop.](/debounce) This delays the update of the `value` until
the user stops interacting, reducing callback frequency.

### LLMs.txt
You can now use LLMs.txt file with Cursor and other IDEs. The file is automatically updated with each release and
includes every demo and documentation page from the DMC docs site. It is about 1.6MB. You can find the latest version 
of LLMs.txt and documentation in the  [LLMs](/llms) section.

## Version 2.4.0  
Release announcement for Dash Mantine Components v2.4.0  
Category: Releases  

November 6, 2025  

Based on Mantine 8.3.6


### Version 2.4.1

December 20, 2025  

Based on Mantine 8.3.10  

See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.4.1)  



### New: Copy to Clipboard Components

The new `CopyButton` and `CustomCopyButton` components are similar to `dcc.Clipboard`, but with full Mantine styling and customization.

- Customizable icons, colors, and labels for the copied state
- Support for copying from another component using `target_id`
- Trigger copying in callbacks with `triggerCopy=True`
- Build fully custom copy-to-clipboard buttons with `CustomCopyButton`

Check out the new [Copy Button docs](/components/copybutton).


#### Example:  Styling the CopyButton

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group([
    dmc.CopyButton(
        value="https://www.dash-mantine-components.com/",
        children="Copy URL",
        copiedChildren="Copied!",
        color="blue",
        copiedColor="teal"
    ),
    dmc.CopyButton(
        value="This text is copied",
        children=DashIconify(icon="tabler:clipboard"),
        copiedChildren=DashIconify(icon="tabler:check"),
        color="blue",
        copiedColor="teal",
        variant="outline"
    ),
    dmc.CopyButton(
        value="This text is copied",
        children=DashIconify(icon="fa-regular:copy"),
        copiedChildren=DashIconify(icon="fa-regular:check-circle"),
        color="gray",
        copiedColor="dark",
        variant="transparent"
    )
])
```
---
#### Example: Copy from another component:
Need a quick way to say “No”? Fetch a random excuse from [No-as-a-Service](https://github.com/hotheadhacker/no-as-a-service) and copy it with a single click.

```python
import requests
from dash import Input, Output, callback
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Box([
    dmc.Button("Get rejection reason", id="new-reason-btn", mb="lg"),
    dmc.Group([
        dmc.Text(id="reason-text", mt=10),
        dmc.CopyButton(
            target_id="reason-text",
            children=DashIconify(icon="fa-regular:copy"),
            copiedChildren=DashIconify(icon="fa-regular:check-circle"),
            color="blue",
            copiedColor="teal",
            variant="outline",
            size="xs"
        )
    ], align="flex-start",  wrap="nowrap",)
])

@callback(
    Output("reason-text", "children"),
    Input("new-reason-btn", "n_clicks"),
    running=[(Output("new-reason-btn", "loading"), True, False)],
)
def fetch_reason(_):
    try:
        res = requests.get("https://naas.isalman.dev/no")
        res.raise_for_status()
        return res.json().get("reason", "No reason found.")
    except Exception:
        return "No reason. Just No."
```
### More chart props now support functions

The `AreaChart`, `BarChart`, `BubbleChart`, `CompositeChart`, `LineChart`, and `ScatterChart` now accept functions for these props:

* `xAxisProps`, `yAxisProps`, `gridProps`, `rightYAxisProps` (all charts)
* `zAxisProps` (`BubbleChart` only)

See the [Functions As Props guide](/functions-as-props) for details.

#### Example: format x-axis tick labels

This example uses a JavaScript function to format x-axis tick labels for datetime values.

```python

import dash_mantine_components as dmc
from dash import Dash
from datetime import datetime

data = [
  {"date": datetime(2025, 3, 22), "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452},
  {"date": datetime(2025, 3, 23), "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402},
  {"date": datetime(2025, 3, 24), "Apples": 3322, "Oranges": 986, "Tomatoes": 1821},
  {"date": datetime(2025, 3, 25), "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809},
  {"date": datetime(2025, 3, 26), "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}
]

component = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    series = [
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ],
    curveType="Monotone",
    tickLine="xy",
    withGradient=False,
    withDots=False,
    xAxisProps={"tickFormatter": {"function": "formatDatetime"}},
    valueFormatter={"function": "formatNumberIntl"},
)
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDatetime = function (datetimeStr) {
  const date = new Date(datetimeStr);
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric'
  });
};
```

### New RichTextEditor features

- Code highlighting is now available
- New Props:  `editable`, `focus`  Thanks for the PR [@chgiesse](https://github.com/chgiesse)
- Access Editor API in a clientside callback


See examples of all the new features in the [RichTextEditor docs](/components/richtexteditor)

#### Example: Editable prop
Note the toolbar is hidden when the editor is read-only

```python
import dash_mantine_components as dmc
from dash import  Input, Output, callback

component = dmc.Box([
    dmc.Switch(
        id="rte-toggle-editable",
        label="Editable",
        checked=True,
    ),
    dmc.RichTextEditor(
        id="rte-editable",
        html="<p>This editor can be toggled between editable and read-only mode.</p>",
        editable=True,
        toolbar={
            "controlsGroups": [
                [
                    "Bold",
                    "Italic",
                    "Underline",
                    "Strikethrough",
                    "CodeBlock"
                ],
            ],
        },
    ),
])

@callback(
    Output("rte-editable", "editable"),
    Input("rte-toggle-editable", "checked"),
)
def toggle_editable(checked):
    return checked
```
#### Example:  Accessing Editor clientside
Get full access to the editor API in clientside callbacks, including executing commands, inspecting
content, and updating the editor state.  

```python
import dash_mantine_components as dmc
from dash import Dash, Input, Output, clientside_callback

component = dmc.Box([
    dmc.RichTextEditor(
        id="get-editor-id",
        toolbar={
                "controlsGroups": [
                    [
                        "Bold",
                        "Italic",
                        "Underline",
                        "Strikethrough",
                    ],
                ],
            },
        html="<p>Try typing some text in this editor. Click the button below to see your character and word count.</p>"
    ),
    dmc.Button("Get Stats", id="btn-rte-stats", n_clicks=0),
    dmc.Box(id="stats"),
])

clientside_callback(
    """
    function(n_clicks) {
        if (n_clicks > 0) {
            const editor = dash_mantine_components.getEditor('get-editor-id');
            if (editor) {
                const text = editor.getText();
                const chars = text.length;
                const words = text.split(/\\s+/).filter(Boolean).length;
                return `Characters: ${chars} | Words: ${words}`;
            }
        }
        return dash_clientside.no_update;
    }
    """,
    Output("stats", "children"),
    Input("btn-rte-stats", "n_clicks"),
)
```
### AI-friendly documentation

LLM-friendly documentation is now available for Dash Mantine Components. It follows the `llms.txt` standard, enabling AI
tools like ChatGPT, Cursor, Windsurf, and Claude to better understand DMC components and props.

New in this release:
* Generate a custom `llms.txt` file that includes only the components you use — improving AI accuracy and response speed.
* Each docs page now includes a "Copy for LLMs" button for copying AI-friendly content directly into a chat.

See the [LLMs section](/llms) for full details and customization options.


### Other notable updates

* Mantine patch updates from 8.3.1 through 8.3.10. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details.
* Improved rendering in several components, including the `Stepper`. Thanks to @chgiesse for [PR #664](https://github.com/snehilvj/dash-mantine-components/pull/664).

In 2.4.1:
* Added `anchorProps` to `Anchor` allowing to pass any valid attribute (like `download`) to the `Anchor` component. Thanks to @jksinton for  [PR #676](https://github.com/snehilvj/dash-mantine-components/pull/676).
* Added `withAlignedLabels` prop to support offsetting the selected check icon in `Select` and `MultiSelect`
* Updated to TipTap 3.14.0

### Thanks

Special thanks to:

* [@chgiesse](https://github.com/chgiesse) for contributing two PRs in this release
* [@jksinton](https://github.com/jksinton) first time contributor, for ading `anchorProps` prop to `Anchor`
* [@BSd3v](https://github.com/BSd3v) for providing help and guidance along the way
* [@alexcjohnson](https://github.com/alexcjohnson) for thoughtful feedback during code reviews

## Version 2.5.0  
Release announcement for Dash Mantine Components v2.5.0  
Category: Releases  

Jan 26, 2026  

Based on Mantine 8.3.13

See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.5.0)  



### New TableofContents Component

Use the `TableOfContents` component to display a table of contents similar to the sidebar in these docs. The
component tracks scroll position and highlights current heading in the list.

Check out all the new features in the [Table Of Contents docs](/components/table-of-contents).

*This component was added by @deadkex in [PR #513](https://github.com/snehilvj/dash-mantine-components/pull/513)*

### Custom DMC components

You can now build custom Dash components that use Mantine the same way Dash Mantine Components does.

Previously, custom components built with the standard Dash component template had to bundle their own copy of Mantine.
Because of this, they could not access the `MantineProvider` used by DMC, which meant themes, styles, and context did
not work as expected.

DMC now exports `MantineHooks` and `MantineCore`, allowing custom components to use the same Mantine hooks, utilities,
and context as the built-in components. This enables a wide range of custom components, such as building advanced `Select`
or `MultiSelect` on top of Mantine’s [Combobox](https://v8.mantine.dev/core/combobox/), while keeping theme and behavior consistent inside a Dash app.

For examples and step-by-step instructions, see the custom DMC components in this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components).

*This feature was added by @BSd3v in [PR# 653](https://github.com/snehilvj/dash-mantine-components/pull/653)*  

### Improved typing

The Python types for DMC components have been improved to better reflect supported props and values. This provides more
accurate type hints, better autocomplete, and clearer static checking in editors like VS Code and PyCharm.


### New in the docs:  DatePicker presets

This feature has been available since dash-mantine-components==2.1.0, but was just added to the documentation thanks
to first time contributor [@EstanVW25](https://github.com/snehilvj/dmc-docs/pull/280)


[DatePicker](https://www.dash-mantine-components.com/components/datepicker#presets), [DatePickerInput](https://www.dash-mantine-components.com/components/datepicker#presets) and [DateTimePicker](https://www.dash-mantine-components.com/components/datetimepicker#presets) 
now support `presets` prop that allows you to add custom date presets. Presets are displayed next to the calendar:


```python
from datetime import date, timedelta
from dateutil.relativedelta import relativedelta
import dash_mantine_components as dmc


today = date.today()

component = dmc.Center(
    dmc.DatePicker(
        presets=[
            {
                "value": (today - timedelta(days=1)).isoformat(),
                "label": "Yesterday",
            },
            {
                "value": today.isoformat(),
                "label": "Today",
            },
            {
                "value": (today + timedelta(days=1)).isoformat(),
                "label": "Tomorrow",
            },
            {
                "value": (today + relativedelta(months=1)).isoformat(),
                "label": "Next month",
            },
            {
                "value": (today + relativedelta(years=1)).isoformat(),
                "label": "Next year",
            },
            {
                "value": (today - relativedelta(months=1)).isoformat(),
                "label": "Last month",
            },
            {
                "value": (today - relativedelta(years=1)).isoformat(),
                "label": "Last year",
            },
        ]
    )
)
```
### Other notable updates

* Mantine patch updates from 8.3.10 through 8.3.13. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details.

- AppShell: Add static `mode` support for nested app shells
- Added `selectFirstOptionOnDropdownOpen` and `openOnFocus`props to Combobox based components.
- Fixed `PinInput` so that `value` can be set initially and in a callback

### Thanks

Special thanks to:

* [@EstanVW25](https://github.com/EstanVW25) first time contributor for adding the Datpeick presets docs. 
* [@deadkex](https://github.com/deadkex) for your dedication to getting the TableofContent PR over the finishline!   
* [@BSd3v](https://github.com/BSd3v) for PR #653 to make it possible to make custom DMC components.
* [@alexcjohnson](https://github.com/alexcjohnson) for your thoughtful feedback during code reviews.

## Version 2.6.0  
Release announcement for Dash Mantine Components v2.6.0  
Category: Releases  

Feb 14, 2026  

Based on Mantine 8.3.14

See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.6.0)  


### Version 2.6.1

March 26, 2026  

Based on Mantine 8.3.17  (Last Mantine v8.x release before v9)

See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.6.1)  


### New ColorSchemeToggle Component

`ColorSchemeToggle` automatically switches between light and dark themes and persists the user’s selection in localStorage.

Copy this app to run it locally. For a live demo, click the `ColorSchemeToggle` in the header of these docs.

> The toggle handles theme switching internally and does not require a Dash callback.

For more information, see the  [ColorSchemeToggle](/components/colorschemetoggle) documentation.

```python
import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

component = dmc.ColorSchemeToggle(
    lightIcon=DashIconify(icon="radix-icons:sun", width=20),
    darkIcon=DashIconify(icon="radix-icons:moon", width=20),
    color="yellow",
    size="lg",
    m="xl",
)

app.layout = dmc.MantineProvider(component)

if __name__ == "__main__":
    app.run(debug=True)

```
### Prevent flash of incorrect theme on load

This release fixes the light/dark “flash” that could occur when the app is loading initially or on refresh.

`ColorSchemeToggle` now persists the selected color scheme in `localStorage` (`mantine-color-scheme-value`).
The new `pre_render_color_scheme()` helper reads that value and applies the correct Mantine theme before Dash mounts, so the app loads with the proper styles immediately.

```python
import dash_mantine_components as dmc

dmc.pre_render_color_scheme()
```

Requires `dash>=3.0` and `ColorSchemeToggle`


### Other notable updates

- Mantine patch update to 8.3.14. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details.

- Fixed prop types in `Grid` and `SimpleGrid`
- Fixed incorrect clamping in `NumberInput` when `min` or `max` was set to `None`
- New in the docs:  Updated Dash Ag Grid examples for theming in versions >=33

### Thanks

Special thanks to:
  
* [@BSd3v](https://github.com/BSd3v) for the `pre_render_color_scheme()` helper function to Fix The Flash!
* [@alexcjohnson](https://github.com/alexcjohnson) for your helpful feedback during code reviews.

## Version 2.7.0  
Release announcement for Dash Mantine Components v2.7.0  
Category: Releases  

May 2, 2026  

Based on Mantine 8.3.18

See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.7.0)  

### NavLink active improvements

The `active` prop in `NavLink` controls whether a link is highlighted as active. It can be set manually (True/False)
or automatically based on the current URL.

Two new `active` modes were added in this release:

#### active="exact-with-search"

This mode matches the current route using both the pathname and the query string. It is ideal when query parameters
define the page content.

Example:
`/products?category=shoes` will not match `/products?category=hats`.

#### active="children"

Sets the parent `NavLink` as active when any of its child links are active. This is useful for nested navigation, where
the parent should reflect the active state of its child links.


### NavLink Example with a multi-page app

This example uses [Dash Pages](https://dash.plotly.com/urls) to create a simple multi-page app. For simplicity, all
pages are defined in a single file instead of separate folders.

It demonstrates `active="exact-with-search"` with query strings and shows how `active="children"` keeps a parent link
active when a child route is selected.


```python
import dash
import dash_mantine_components as dmc

app = dash.Dash(use_pages=True, pages_folder="")


def reports_layout(type=None, **kwargs):
    return dmc.Box(f"{type} Report ")

dash.register_page("home", path="/", layout=dmc.Box("Home"))
dash.register_page("reports", path="/reports", layout=reports_layout)
dash.register_page("settings", path="/settings", layout=dmc.Box("Settings"))


nav = dmc.Box([
    dmc.NavLink(label="Home", href="/", active="exact"),
    dmc.NavLink(
        label="Reports",
        active="children",
        childrenOffset=28,
        children=[
            dmc.NavLink(
                label="Sales",
                href="/reports?type=Sales",
                active="exact-with-search",
            ),
            dmc.NavLink(
                label="Inventory",
                href="/reports?type=Inventory",
                active="exact-with-search",
            ),
        ],
    ),
    dmc.NavLink(label="Settings", href="/settings", active="exact"),
])

app.layout = dmc.MantineProvider(
    dmc.AppShell(
        [
            dmc.AppShellNavbar(nav),
            dmc.AppShellMain(dash.page_container),
        ],
        padding="xl",
        navbar={"width": 300},
    )
)

if __name__ == "__main__":
    app.run(debug=True)


```



### buttonProps

Pass props directly to the underlying `<button>` element. Available on `Button`, `ActionIcon`, `UnstyledButton`, and `CopyButton`.

Props are applied to the underlying `<button>` element rather than the wrapper component. This is intended for native
attributes such as `type`, `name`, `form`, or `aria-*`. Component-level props like `color` and `variant` should still
be set directly on the DMC component itself.

#### Examples

Using `buttonProps` ensures attributes like `type="submit"` are applied to the native element:

```python
html.Form(
    [..., dmc.Button("Submit", buttonProps={"type": "submit"})],
    method="dialog",
)
````




### Other changes

Mantine patch update to 8.3.18. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details.

Note:  This is the last Mantine update for V8 before the V9 release



### Important version information

Dash Mantine Components v2.x is built on Mantine v8. When referring to the upstream Mantine documentation, please use
[Mantine v8](https://v8.mantine.dev/).  Avoid the Mantine v9 documentation, as it includes breaking changes that are
not compatible with DMC v2.x.


### Thanks

Special thanks to:
 
* [@alexcjohnson](https://github.com/alexcjohnson) for your helpful feedback during code reviews.

## Version 2.8.0  
Release announcement for Dash Mantine Components v2.8.0  
Category: Releases  

Jun 9, 2026  

Based on Mantine 8.3.18

See the full [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.8.0)  

### FunnelChart

The new [FunnelChart](/components/funnelchart) is based on the [FunnelChart recharts component](https://recharts.org/en-US/api/FunnelChart):


```python
import dash_mantine_components as dmc
from .data import data

component=dmc.FunnelChart(data=data)
```
### Heatmap

The new [Heatmap](/components/heatmap) component is used to display data in a table where each column represents a week:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16"
)
```
It also supports split months:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-26",
    withMonthLabels=True,
    splitMonths=True
)
```
### RadarChart updates

`RadarChart` now supports  [functions as props](/functions-as-props) passed to Recharts components, making it possible to use custom components and advanced chart customization.
Also added new props: `withTooltip`, `tooltipProps`, `tooltipAnimationDuration`, `withDots`, `dotProps`, `activeDotProps`.


#### Recharts props available for RadarChart

To pass props down to the underlying Recharts components, use the following props:
- `radarProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component
- `radarChartProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component
- `polarGridProps` passed props to [PolarGrid](https://recharts.org/en-US/api/PolarGrid) component
- `polarAngleAxisProps` passed props to [PolarAngleAxis](https://recharts.org/en-US/api/PolarAngleAxis) component
- `polarRadiusAxisProps` passed props to [PolarRadiusAxis](https://recharts.org/en-US/api/PolarRadiusAxis) component
- Also available:  `legendProps`, `dotProps`, `activeDotProps`, `tooltipProps`

The following example demonstrates passing functions as props to Recharts components. In this case, props are passed to the `PolarRadiusAxis` component.

```python
import dash_mantine_components as dmc


data = [
    {"product": "Apples", "sales_january": 12000, "sales_february": 10000},
    {"product": "Oranges", "sales_january": 9800, "sales_february": 9000},
    {"product": "Tomatoes", "sales_january": 8600, "sales_february": 7000},
    {"product": "Grapes", "sales_january": 9900, "sales_february": 8000},
    {"product": "Bananas", "sales_january": 8500, "sales_february": 12000},
    {"product": "Lemons", "sales_january": 6500, "sales_february": 15000},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    polarRadiusAxisProps={"angle": 30, "tickFormatter": {"function": "formatNumberIntl"}},
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatNumberIntl = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
};
```

#### RadarCharts with tooltips and dots
New props in this release:  `withTooltip`, `tooltipProps`, `tooltipAnimationDuration`, `withDots`, `dotProps`, `activeDotProps`.

```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales_january": 120, "sales_february": 100},
    {"product": "Oranges", "sales_january": 98, "sales_february": 90},
    {"product": "Tomatoes", "sales_january": 86, "sales_february": 70},
    {"product": "Grapes", "sales_january": 99, "sales_february": 80},
    {"product": "Bananas", "sales_january": 85, "sales_february": 120},
    {"product": "Lemons", "sales_january": 65, "sales_february": 150},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
    withTooltip=True,
    withDots=True,
)
```
### Other notable changes

- Fixed an issue where `dcc.Markdown` could override the dark theme styling of `CodeHighlight` components.
- Added the `getStyleNonce` prop to `MantineProvider`
- `BarChart` now supports custom label components in the `valueLabelProp` property. Special thanks to first time contributor @almostBurtMacklin for adding this feature!


### Important version information

Dash Mantine Components v2.x is built on Mantine v8. When referring to the upstream Mantine documentation, please use
[Mantine v8](https://v8.mantine.dev/).  Avoid the Mantine v9 documentation, as it includes breaking changes that are
not compatible with DMC v2.x.

## Version 3.0.0  
Release announcement for Dash Mantine Components v3.0.0  
Category: Releases  

Oct 30, 2026  

Based on Mantine 9.7.4

See the full [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/3.0.0)  

DMC v3 is based on Mantine v9 and introduces new components, features, and improvements.

### Highlights

- New [Marquee](/components/marquee) component for scrolling content.
- New [Splitter](/components/splitter) component for resizable split pane layout.
- Over 100 new props and enhancements across the component library.
- [Notification](/components/notification) now support swipe dismissal, auto-close progress, stacked layout, and priority:
- Reorderable pills in [MultiSelect](/components/multiselect) and [TagsInput](/components/tagsinput), with drag-and-drop and keyboard support.
- New chart features, including brush selection, streamgraphs, and reference markers.
- Expanded date and time inputs, including range selection and durations over 24 hours.
- Input loading and success states, [RichTextEditor](/components/richtexteditor) table controls, and improved notifications and dropdown positioning.
- Improved responsive style performance.

### Migration Guide
DMC v3 is based on Mantine v9 and includes some breaking changes.

See the [Migration Guide](/migration) for instructions on updating your apps.

See the Mantine v9 changelogs for details of upstream changes: [9.0](https://mantine.dev/changelog/9-0-0/), [9.1](https://mantine.dev/changelog/9-1-0/), [9.2](https://mantine.dev/changelog/9-2-0/), [9.3](https://mantine.dev/changelog/9-3-0/), [9.4](https://mantine.dev/changelog/9-4-0/), [9.5](https://mantine.dev/changelog/9-5-0/), [9.6](https://mantine.dev/changelog/9-6-0/), and [9.7](https://mantine.dev/changelog/9-7-0/).

### Requirements

**DMC v3 requires Dash >= 4.5 and React 19.**

Set the React version in your app:

```python
import dash

dash._dash_renderer._set_react_version("19.2.4")

app = Dash()
```

Alternatively, set the environment variable:

```bash
REACT_VERSION=19.2.4 python app.py
```

### New Components

#### New Marquee component

[Marquee](/components/marquee) adds continuous scrolling animation for content.

Marquee supports customizable scrolling direction, speed, and spacing between items, with options to pause the animation on hover and control how content repeats. It can display a single row or multiple rows scrolling in alternating directions.

Thanks [@budescode](https://github.com/budescode) for adding this component

```python
import dash_mantine_components as dmc

marquee_content = [
    dmc.Badge("Python", color="red", variant="light", w=80),
    dmc.Badge("Plotly", color="blue", variant="light", w=80),
    dmc.Badge("Dash", color="violet", variant="light", w=80),
    dmc.Badge("Mantine", color="yellow", variant="light", w=80),
    dmc.Badge("React", color="teal", variant="light", w=80),
]

component = dmc.Stack([
    dmc.Marquee(marquee_content),
    dmc.Marquee(marquee_content, reverse=True),
])
```
#### New Splitter component

[Splitter](/components/splitter) lets users resize panels by dragging the divider between them. You can create layouts with side-by-side panels
or stacked sections, with adjustable sizes and min or max size constraints. It’s useful for dashboards where users need
to control how much space is available for different views.

Thanks [@datenzauberai](https://github.com/datenzauberai) for adding this component

```python
import dash_mantine_components as dmc
from dash import Input, Output, State, callback

component = dmc.Box([
    dmc.Splitter(
        id="splitter-collapse",
        h=200,
        classNames={"pane": "splitter-examples"},
        children=[
            dmc.SplitterPane(
                "Collapsible sidebar",
                collapsible=True,
                defaultSize=30,
                min=20,
                bg="blue",
            ),
            dmc.SplitterPane(
                "Main content",
                defaultSize=70,
                min=30,
                bg="teal",
            ),
        ],
    ),
    dmc.Button("Toggle Sidebar", id="splitter-collapse-toggle-button", mt="md")
])

@callback(
    Output("splitter-collapse", "collapsed"),
    Input("splitter-collapse-toggle-button", "n_clicks"),
    State("splitter-collapse", "collapsed"),
    prevent_initial_call=True,
)
def toggle_sidebar(n_clicks, collapsed):
    return [0] if not collapsed or 0 not in collapsed else []
```
### New Features

### Layout

#### Collapse horizontal orientation

[Collapse](/components/collapse) now supports horizontal orientation.

```python
from dash import callback, Input, Output
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-horizontal-btn", n_clicks=0),
    dmc.Collapse(
        children=dmc.Text("Hello World!", my="lg", w=200, bg="blue.3", c="white", p="lg"),
        orientation="horizontal",
        opened=False,
        id="collapse-horizontal"
    )
], h=120)

@callback(
    Output("collapse-horizontal", "opened"),
    Input("collapse-horizontal-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
#### Card horizontal orientation

[Card](/components/card) now supports horizontal orientation.

```python
import dash_mantine_components as dmc

completed = 1887
total = 2334

stats = [
    {"value": 447, "label": "Remaining"},
    {"value": 76, "label": "In progress"},
]

items = [
    dmc.Box([
        dmc.Text(stat["value"]),
        dmc.Text(stat["label"], size="xs", c="dimmed"),
    ])
    for stat in stats
]

component = dmc.Card(
    [
        dmc.CardSection(
            dmc.RingProgress(
                roundCaps=True,
                thickness=6,
                size=150,
                sections=[
                    {
                        "value": (completed / total) * 100,
                        "color": "blue",
                    }
                ],
                label=dmc.Box([
                    dmc.Text(
                        f"{((completed / total) * 100):.0f}%",
                        ta="center",
                        fz="lg",
                    ),
                    dmc.Text(
                        "Completed",
                        ta="center",
                        fz="xs",
                        c="dimmed",
                    ),
                ]),
            ),
            inheritPadding=True,
            px="xs",
            withBorder=True,
        ),
        dmc.CardSection(
            [
                dmc.Text("Project tasks", fz="xl"),
                dmc.Box(
                    [
                        dmc.Text("1887"),
                        dmc.Text("Completed", fz="xs", c="dimmed"),
                    ],
                    mt="xs",
                ),
                dmc.Group(items, mt="sm"),
            ],
            inheritPadding=True,
            px="md",
            withBorder=True,
            ml="lg"
        ),
    ],
    padding="sm",
    withBorder=True,
    orientation="horizontal",
    w=400
)
```
#### Grid improvements

[Grid](/components/grid) now uses CSS `gap` instead of negative margins for column spacing. This removes the need for `overflow="hidden"` to prevent overflow caused by negative margins.

The `gutter` prop has been renamed to `gap`. New `rowGap` and `columnGap` props control spacing independently, and `GridCol` now supports `align` for vertical alignment.

#### SimpleGrid automatic columns

[SimpleGrid](/components/simplegrid) now supports `minColWidth` to automatically adjust the number of columns based on available width. When set, `cols` is ignored. Use `autoFlow` to choose between `auto-fill` and `auto-fit`.

```python
import dash_mantine_components as dmc
from dash import html

style = {
    "border": "1px solid var(--mantine-primary-color-filled)",
    "textAlign": "center",
}

component = dmc.SimpleGrid(
    minColWidth="200px",
    children=[
        html.Div("1", style=style),
        html.Div("2", style=style),
        html.Div("3", style=style),
        html.Div("4", style=style),
        html.Div("5", style=style),
    ],
)
```
#### AppShell static mode

[AppShell](/components/appshell) now supports `mode="static"`, which places its elements in the normal document flow using CSS Grid instead of fixed positioning. The `layout="alt"` option places the navbar and aside at full height, with the header and footer adjusted between them.

#### ScrollArea initial position

[ScrollArea](/components/scrollarea) now supports `startScrollPosition` to set the initial scroll position when mounted.

```python
import dash_mantine_components as dmc

from docs.scrollarea.text import text

component = dmc.Center(
    dmc.ScrollArea(
        h=200,
        w=350,
        startScrollPosition={ "y": 250},
        children=dmc.Paper(
            [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600
        ),
    ),
)
```
#### ScrollArea scrollbar position

[ScrollArea](/components/scrollarea) now supports `verticalScrollbarPosition` to pin the scrollbar to the left or right side regardless of text direction.

### Inputs

#### Input loading state

All input components based on `Input` now support `loading` and `loadingPosition` props to display a loading indicator on either side of the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.TextInput(
    label="Your Email",
    w=200,
    placeholder="Enter Your Email",
    loading=True
)
```
#### Input success state

Inputs based on `Input` and `Input.Wrapper` now support a `success` prop. It changes the input border color and can display a success message below it. When both `error` and `success` are set, `error` takes precedence.

A new `--mantine-color-success` CSS variable resolves to `teal-6` in light mode and `teal-8` in dark mode.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.TextInput(
            label="Success as boolean",
            placeholder="Success as boolean",
            success=True,
        ),
        dmc.TextInput(
            label="Success as React node",
            placeholder="Success as React node",
            success="Username is available",
        ),
    ],
)
```
#### Shared default props

Default props set on `Input` and [InputWrapper](/components/inputwrapper) in `theme.components` now cascade to derived components. This lets you configure shared properties such as `size`, `radius`, `variant`, and `withAsterisk` for all inputs, while retaining component-specific overrides.

#### CheckboxGroup selection limit

`CheckboxGroup` now supports `maxSelectedValues` to limit the number of selected values. Remaining options are disabled when the limit is reached.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, callback

component = html.Div(
    [
        dmc.CheckboxGroup(
            id="checkbox-group-max",
            label="Select your favorite library",
            description="This is anonymous",
            withAsterisk=True,
            mb=10,
            children=dmc.Group(
                [
                    dmc.Checkbox(label="Pandas", value="pandas"),
                    dmc.Checkbox(label="Polars", value="polars"),
                    dmc.Checkbox(label="Vaex", value="vaex"),
                    dmc.Checkbox(label="Dask", value="dask"),
                ],
                mt=10,
            ),
            value=["pandas", "polars"],
            maxSelectedValues=2
        ),
        dmc.Text(id="checkbox-group-max-output"),
    ]
)


@callback(Output("checkbox-group--max-output", "children"), Input("checkbox-group-max", "value"))
def checkbox(value):
    return ", ".join(value) if value else None
```
#### Radio and Checkbox light variant

[Checkbox](/components/checkbox) and `Radio` now support `variant="light"`. Checked and indeterminate states have a light background and a contrasting icon.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Checkbox(
            variant="light",
            checked=True,
            label="Light checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            indeterminate=True,
            label="Light indeterminate checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            color="teal",
            checked=True,
            label="Teal light checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            color="grape",
            checked=True,
            label="Grape light checkbox",
        ),
        dmc.Checkbox(
            variant="light",
            color="#e64980",
            checked=True,
            label="Light checkbox with CSS color",
        ),
    ],
    gap=7,
)
```
#### Textarea bottomSection

[Textarea](/components/textarea) now supports `bottomSection` to display content inside the bottom of the input border, such as a character counter.

```python
import dash_mantine_components as dmc
from dash import  Input, Output, clientside_callback

component = dmc.Textarea(
    id="textarea-bottom-section",
    autosize=True,
    minRows=3,
    label="Message",
    bottomSection=dmc.Text(
        id="char-count",
        size="xs",
        c="dimmed",
    ),
)

clientside_callback(
    """
    function(value) {
        const length = (value || "").length;
        return `${length}/500 characters`;
    }
    """,
    Output("char-count", "children"),
    Input("textarea-bottom-section", "value"),
)
```
#### RichTextEditor table controls

[RichTextEditor](/components/richtexteditor) now includes toolbar controls for inserting and editing tables. You can insert tables of a selected size, add or remove rows and columns, toggle header rows and columns, and merge or split cells. Table controls are disabled when the cursor is outside a table.

```python
import dash_mantine_components as dmc

table = """
<table>
  <tbody>
    <tr>
      <th><p>Name</p></th>
      <th><p>Role</p></th>
      <th><p>Department</p></th>
    </tr>
    <tr>
      <td><p>Alex Morgan</p></td>
      <td><p>Developer</p></td>
      <td><p>Engineering</p></td>
    </tr>
    <tr>
      <td><p>Jamie Lee</p></td>
      <td><p>Designer</p></td>
      <td><p>Design</p></td>
    </tr>
  </tbody>
</table>
<p></p>
"""

component = dmc.RichTextEditor(
    html=table,
    toolbar={
        "controlsGroups": [
            ["Bold", "Italic", "Underline"],
            ["TableInsert", "TableDelete"],
            ["TableColumnBefore", "TableColumnAfter", "TableColumnDelete"],
            ["TableRowBefore", "TableRowAfter", "TableRowDelete"],
            [
                "TableToggleHeaderRow",
                "TableToggleHeaderColumn",
                "TableMergeCells",
                "TableSplitCell",
            ],
        ],
    },
)
```
#### NumberInput selectAllOnFocus

[NumberInput](/components/numberinput) now supports `selectAllOnFocus` to select all text when the input receives focus.

```python
import dash_mantine_components as dmc

component = dmc.NumberInput(value=123456, selectAllOnFocus=True)
```
#### Slider improvements

[Slider](/components/slider) and `RangeSlider` now support vertical orientation.

```python
import dash_mantine_components as dmc

marks = [
    {"value": 20, "label": "20%"},
    {"value": 50, "label": "50%"},
    {"value": 80, "label": "80%"},
]

component = dmc.Group(
    [
        dmc.Slider(
            orientation="vertical",
            value=45,
            marks=marks,
        ),
        dmc.RangeSlider(
            orientation="vertical",
            value=[25, 65],
            marks=marks,
        ),
    ],
    gap=60,
)
```
`Slider` also supports hidden marks for snapping to specific values without displaying marks on the track. Use `restrictToMarks` to enable this behavior.

```python
from dash import Input, Output, callback
import dash_mantine_components as dmc

marks = [
    {"value": 0, "label": "0%"},
    {"value": 25, "hidden": True},
    {"value": 50, "label": "50%"},
    {"value": 75, "hidden": True},
    {"value": 100, "label": "100%"},
]

component = dmc.Stack(
    [
        dmc.Text(
            id="hidden-marks-slider-value",
            size="sm",
            children="Hidden marks allow you to snap to specific values "
            "without displaying them visually. Current value: 50",
        ),
        dmc.Slider(
            id="hidden-marks-slider",
            value=50,
            min=0,
            max=100,
            step=1,
            restrictToMarks=True,
            marks=marks,
        ),
    ],
)

@callback(
    Output("hidden-marks-slider-value", "children"),
    Input("hidden-marks-slider", "value"),
)
def update_value(value):
    return (
        "Hidden marks allow you to snap to specific values without displaying "
        f"them visually. Current value: {value}"
    )
```
The new `startPointValue` prop sets the origin of the filled bar, which extends toward the current value.

```python
import dash_mantine_components as dmc

component = dmc.Slider(
    startPointValue=0,
    updatemode="drag",
    min=-100,
    max=100,
    value=40,
    marks=[
        {"value": -100, "label": "-100"},
        {"value": -50, "label": "-50"},
        {"value": 0, "label": "0"},
        {"value": 50, "label": "50"},
        {"value": 100, "label": "100"},
    ],
)
```
#### Rating allowClear

[Rating](/components/rating) now supports `allowClear` to reset the rating to zero by clicking the selected value again.

```python
from dash import Input, Output, callback
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Text("Click the same star to clear the rating", size="sm"),
        dmc.Rating(id="rating-clear", value=3, allowClear=True),
        dmc.Group(
            [
                dmc.Text("Current rating:", size="sm", c="dimmed"),
                dmc.Text(id="rating-clear-value", size="sm", fw=600, children="3"),
            ],
            gap="xs",
        ),
    ],
    gap="md",
    align="center",
)


@callback(
    Output("rating-clear-value", "children"),
    Input("rating-clear", "value"),
)
def update_rating(value):
    return "Not rated" if value == 0 else value
```
### Combobox

#### Reorder selected pills

[MultiSelect](/components/multiselect) and [TagsInput](/components/tagsinput) now support `withPillsReorder` to reorder selected pills using drag-and-drop or the keyboard.

Use the arrow keys to move focus between pills. Press `Alt + ArrowLeft` or `Alt + ArrowRight` to reorder the focused pill. Focus follows the moved pill, allowing multiple moves without refocusing. Reordering is disabled when `disabled` or `readOnly` is set.

```python
import dash_mantine_components as dmc

component = dmc.MultiSelect(
    label="Select your favorite superpowers",
    description="Drag pills to put them in order of preference.",
    data=["Teleport", "Time Travel", "Fly", "Invisibility", "Mind Reading"],
    value=["Teleport", "Time Travel", "Fly", "Invisibility", "Mind Reading"],
    withPillsReorder=True,
)
```
#### Custom pills

[MultiSelect](/components/multiselect) and [TagsInput](/components/tagsinput) now support `renderPill` to customize how selected pills are rendered.

```python
import dash_mantine_components as dmc
from dash import Input, Output, callback

users = [
    {
        "value": "Emily Johnson",
        "label": "Emily Johnson",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png",
    },
    {
        "value": "Ava Rodriguez",
        "label": "Ava Rodriguez",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png",
    },
    {
        "value": "Olivia Chen",
        "label": "Olivia Chen",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
    },
    {
        "value": "Ethan Barnes",
        "label": "Ethan Barnes",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
    },
    {
        "value": "Mason Taylor",
        "label": "Mason Taylor",
        "image": "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
    },
]

component = dmc.Box([
    dmc.MultiSelect(
        id="multi-select-render-pill",
        data=users,
        label="Candidates",
        placeholder="Select candidates",
        value=["Emily Johnson", "Ava Rodriguez"],
        renderPill={ "function": "renderUserPill", "options": {"users": users}},
    ),
    dmc.Text(id="multi-select-render-pill-val")
])

@callback(
    Output("multi-select-render-pill-val", "children"),
    Input("multi-select-render-pill", "value"),
)
def update(value):
    return f"You selected {value}"
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;

dmcfuncs.renderUserPill = function ({ option, onRemove }, { users }) {
  const usersMap = new Map(
    users.map((user) => [user.value.toString(), user])
  );
  const user = usersMap.get(option?.value.toString());

  return React.createElement(
    dmc.Pill,
    {
      withRemoveButton: true,
      onRemove: onRemove,
    },
    React.createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "center",
          gap: 8,
        },
      },
      React.createElement(dmc.Avatar, {
        src: user?.image,
        size: 16,
      }),
      option?.label
    )
  );
};
```

#### Number and boolean values

[Select](/components/select), [MultiSelect](/components/multiselect), [SegmentedControl](/components/segmentedcontrol), `CheckboxGroup`, and other group components now accept primitive values such as numbers and booleans, rather than only strings.

```python
dmc.Select(
    data=[
        {"value": 1, "label": "One"},
        {"value": 2, "label": "Two"},
        {"value": 3, "label": "Three"},
    ],
    value=2,
)
```

#### Clear section mode

Clearable inputs now support `clearSectionMode` to control how the clear button and `rightSection` are rendered:

- `"both"` (default): show both.
- `"rightSection"`: show only the supplied `rightSection`.
- `"clear"`: show only the clear button.

Supported components include [Select](/components/select), [Autocomplete](/components/autocomplete), [MultiSelect](/components/multiselect), [TagsInput](/components/tagsinput), and the date and time input components.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

data = [f"Option-{i}" for i in range(6)]

component = dmc.Stack([
    dmc.MultiSelect(
        label="clearSectionMode='both' (default)",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="both",
    ),
    dmc.MultiSelect(
        label="clearSectionMode='rightSection'",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="rightSection",
    ),
    dmc.MultiSelect(
        label="clearSectionMode='clear'",
        placeholder="Select options",
        data=data,
        value=["Option-1", "Option-2"],
        clearable=True,
        rightSection=DashIconify(icon="tabler:chevron-down", width=16),
        clearSectionMode="clear",
    ),
])
```
#### Dropdown height

`Combobox`, [Select](/components/select), [MultiSelect](/components/multiselect), [Autocomplete](/components/autocomplete), and [TagsInput](/components/tagsinput) now support `floatingHeight="viewport"` to let dropdowns fill the available viewport height. This is useful for large option lists.

```python
import dash_mantine_components as dmc

data = [f"Option {i}" for i in range(100)]

component = dmc.MultiSelect(
    label="Fits viewport height",
    placeholder="Pick value",
    data=data,
    floatingHeight="viewport",
)
```
### Buttons & Navigation

#### Pagination sizing

[Pagination](/components/pagination) controls are smaller than inputs and buttons by default. Use the `input-` prefix with the `size` prop to match their size.

```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Group([
        dmc.Pagination(total=45, size="sm"),
        dmc.Button("sm button", size="sm"),
        dmc.TextInput(size="sm", placeholder="sm input"),
    ]),
    dmc.Group([
        dmc.Pagination(total=45, size="input-sm"),
        dmc.Button("sm button", size="sm"),
        dmc.TextInput(size="sm", placeholder="sm input"),
    ], mt="md"),
])
```
#### Pagination start value

[Pagination](/components/pagination) now supports `startValue` to set the first page number.

```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Text("Pages 5–15 (startValue=5, total=15)", mb="xs"),
    dmc.Pagination(total=15, startValue=5, value=5),
])
```
#### Responsive pagination

[Pagination](/components/pagination) now supports `layout="responsive"`, which switches between page buttons and a compact "Page X of Y" label based on available width. Use `formatLabel` to customize the label.

```python
import dash_mantine_components as dmc

component = dmc.Box(
    dmc.Pagination(total=20, layout="responsive"),
    style={
        "resize": "horizontal",
        "overflow": "auto",
        "minWidth": 200,
        "maxWidth": "100%",
        "border": "1px solid var(--mantine-color-gray-5)",
        "padding": "16px",
    },
)
```
#### Stepper label position

`Stepper` now supports `labelPosition="bottom"` to display step labels and descriptions below their icons.

```python
import dash_mantine_components as dmc

component = dmc.Stepper(
    [
        dmc.StepperStep(label="Account"),
        dmc.StepperStep(label="Verification"),
        dmc.StepperStep(label="Access"),
    ],
    id="stepper",
    active=1,
    labelPosition="bottom",
)
```
#### Tree connecting lines

[Tree](/components/tree) now supports `withLines` to display connecting lines between parent and child nodes. The lines adapt to `levelOffset`.

```python
import dash_mantine_components as dmc
from dash import callback, Input, Output
from .data import data

component = dmc.Tree(
    data=data,
    withLines=True,
    levelOffset=40,
    expanded=[
        "node_modules",
        "node_modules/@mantine",
        "node_modules/@mantine/form",
        "node_modules/@mantine/form/index.d.ts",
    ],
)
```
### Feedback

#### Notifications

[Notification](/components/notification) now support swipe dismissal, auto-close progress, stacked layout, and priority:

- Swipe dismissal: dismiss notifications by dragging left or right, or by horizontal scrolling while hovering. These behaviors can be disabled on `NotificationContainer`, and individual notifications can opt out with `allowClose=False`.
- Auto-close progress: `withAutoCloseProgress` displays a progress line showing the time remaining before a notification closes. The line pauses with the timer and uses the notification color. Set a default on the container or override it for individual notifications.
- Stacked layout: `layout="stacked"` displays the latest notification in front, with older notifications peeking out behind it.
- Priority: notifications with higher `priority` take visible slots when the active notification limit is reached. Equal priorities retain insertion order. The default priority is `0`.

```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback, no_update
from dash_iconify import DashIconify


component = html.Div([
    # Place one NotificationContainer in app.layout)
    dmc.Button("Show Notification", id="notification-progress-show")

])

@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("notification-progress-show", "n_clicks"),
    prevent_initial_call=True,
)
def show(n_clicks):
    if n_clicks is None:
        return no_update
    return [dict(
        title="Hey there!",
        id="show-notify",
        action="show",
        message="Notifications in Dash, Awesome!",
        icon=DashIconify(icon="ic:round-celebration"),
        withAutoCloseProgress=True
    )]
```
#### RingProgress improvements

[RingProgress](/components/ringprogress) now supports `sectionGap` to separate sections and `startAngle` to control where the progress starts.

```python
import dash_mantine_components as dmc

sections = [
    {"value": 40, "color": "cyan"},
    {"value": 25, "color": "orange"},
    {"value": 15, "color": "grape"},
]

component = dmc.Stack(
    [
        dmc.Box(
            [
                dmc.Text("No gap (default)", size="sm", ta="center", mb="xs"),
                dmc.RingProgress(sections=sections),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("5° gap", size="sm", ta="center", mb="xs"),
                dmc.RingProgress(sections=sections, sectionGap=5),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("10° gap", size="sm", ta="center", mb="xs"),
                dmc.RingProgress(sections=sections, sectionGap=10),
            ]
        ),
    ],
    align="center",
)
```
```python
import dash_mantine_components as dmc

sections = [{"value": 40, "color": "cyan"}]

component = dmc.Group(
    [
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=0),
                dmc.Text("0° (right)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=90),
                dmc.Text("90° (bottom)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=180),
                dmc.Text("180° (left)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
        dmc.Stack(
            [
                dmc.RingProgress(sections=sections, startAngle=270),
                dmc.Text("270° (top)", size="sm"),
            ],
            align="center",
            gap="xs",
        ),
    ],
    justify="center",
)
```
### Overlay

#### Tooltip arrow position

[Tooltip](/components/tooltip) now supports `arrowPosition="merge"`, which merges the arrow with the corresponding corner of the dropdown.

#### Stable dropdown positioning

[Popover](/components/popover) and components built on it now default to `preventPositionChangeWhenVisible=True`.

A dropdown chooses its position when opened and keeps that position until closed, even when scrolling, resizing, or changes to its content affect the available space. When neither side fits, it falls back to the preferred `position`.

To restore the previous behavior, set `preventPositionChangeWhenVisible=False` through `comboboxProps`:

```python
dmc.Select(
    comboboxProps={"preventPositionChangeWhenVisible": False},
    data=["React", "Angular", "Svelte"],
)
```

#### Interactive Tooltip

[Tooltip](/components/tooltip) now supports `interactive` to keep the tooltip open while the pointer moves from its target to the tooltip content. This allows users to interact with content such as links and supports WCAG 2.1 success criterion 1.4.13.

```python
import dash_mantine_components as dmc

component = dmc.Tooltip(
    label="This tooltip stays open while you move the pointer onto it, so you can read or select its full contents without it closing.",
    interactive=True,
    withArrow=True,
    multiline=True,
    w=220,
    children=dmc.Button("Hover to read the tooltip"),
)
```
#### Tooltip hideDetached

[Tooltip](/components/tooltip) now supports `hideDetached`, matching the behavior of [Popover](/components/popover). It is enabled by default and hides the tooltip when its target is removed from the DOM, hidden with `display: none`, or scrolled out of a clipping container.

#### HoverCard accessibility and behavior

[HoverCard](/components/hovercard) now opens on keyboard focus, closes with `Escape` or an outside press, and is announced by screen readers. New props include `events`, `interactive`, `role`, and `returnFocus`.

On touch devices, `HoverCard` no longer opens on tap by default. Set `events={"focus": False, "touch": True}` and `closeOnEscape=False` to restore the previous behavior.
### Data Display

#### Accordion disable collapse

[Accordion](/components/accordion) now supports `disableCollapse`. In single mode (`multiple=False`), the open item cannot be collapsed by clicking it again. Use `value` to ensure an item is open initially.

```python
import dash_mantine_components as dmc

data = [
    {
        "emoji": "🍎",
        "value": "Apples",
        "description": "Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.",
    },
    {
        "emoji": "🍌",
        "value": "Bananas",
        "description": "Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.",
    },
    {
        "emoji": "🥦",
        "value": "Broccoli",
        "description": "Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.",
    },
]

component = dmc.Accordion(
    [
        dmc.AccordionItem(
            [
                dmc.AccordionControl(item["value"], icon=item["emoji"]),
                dmc.AccordionPanel(item["description"]),
            ],
            value=item["value"],
        )
        for item in data
    ],
    value="Apples",
    disableCollapse=True,
    order=3,
)
```
#### Timeline opposite and alternate content

`TimelineItem` now supports `opposite` to display content on the opposite side of the timeline. When used, the timeline switches to a centered layout.

Use `alternate` on individual items to switch the positions of the main and opposite content.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Timeline(
    [
        dmc.TimelineItem(
            title="New branch",
            bullet=DashIconify(icon="tabler:git-branch", width=12),
            opposite=dmc.Text("2 hours ago", size="sm", c="dimmed"),
            children=dmc.Text(
                [
                    "You've created new branch ",
                    dmc.Text("fix-notifications", variant="link", span=True, inherit=True),
                    " from master",
                ],
                c="dimmed",
                size="sm",
            ),
        ),
        dmc.TimelineItem(
            title="Commits",
            bullet=DashIconify(icon="tabler:git-commit", width=12),
            opposite=dmc.Text("52 minutes ago", size="sm", c="dimmed"),
            children=dmc.Text(
                [
                    "You've pushed 23 commits to ",
                    dmc.Text("fix-notifications branch", variant="link", span=True, inherit=True),
                ],
                c="dimmed",
                size="sm",
            ),
        ),
        dmc.TimelineItem(
            title="Pull request",
            bullet=DashIconify(icon="tabler:git-pull-request", width=12),
            lineVariant="dashed",
            opposite=dmc.Text("34 minutes ago", size="sm", c="dimmed"),
            children=dmc.Text(
                [
                    "You've submitted a pull request ",
                    dmc.Text(
                        "Fix incorrect notification message (#187)",
                        variant="link",
                        span=True,
                        inherit=True,
                    ),
                ],
                c="dimmed",
                size="sm",
            ),
        ),
        dmc.TimelineItem(
            title="Code review",
            bullet=DashIconify(icon="tabler:message-circle", width=12),
            children=dmc.Text(
                [
                    dmc.Text("Claude", variant="link", span=True, inherit=True),
                    " left a code review on your pull request",
                ],
                c="dimmed",
                size="sm",
            ),
        ),
    ],
    active=1,
    bulletSize=24,
    lineWidth=2,
)
```
```python
import dash_mantine_components as dmc

component = dmc.Timeline(
    [
        dmc.TimelineItem(
            title="Project started",
            opposite=dmc.Text("Jan 2025", size="sm", c="dimmed"),
            children="Initial planning and requirements gathering.",
        ),
        dmc.TimelineItem(
            title="Beta release",
            opposite=dmc.Text("Apr 2025", size="sm", c="dimmed"),
            alternate=True,
            children="Released the first version to early adopters.",
        ),
        dmc.TimelineItem(
            title="General availability",
            opposite=dmc.Text("Aug 2025", size="sm", c="dimmed"),
            children="Launched publicly with full documentation.",
        ),
        dmc.TimelineItem(
            title="Version 2.0",
            opposite=dmc.Text("Jan 2026", size="sm", c="dimmed"),
            alternate=True,
            children="Introduced a redesigned interface and new features.",
        ),
    ],
    active=3,
    bulletSize=16,
    lineWidth=2,
)
```
#### Indicator improvements

[Indicator](/components/indicator) now supports:

- `maxValue` to display a capped label, such as `99+`.
- `showZero` to control whether an indicator with a label of `0` is visible. Defaults to `True`.
- `offset` with separate `x` and `y` values.

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
            ),
            inline=True,
            label=50,
            maxValue=99,
        ),
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
            ),
            inline=True,
            label=100,
            maxValue=99,
        ),
        dmc.Indicator(
            dmc.Avatar(
                size="lg",
                radius="xl",
                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png",
            ),
            inline=True,
            label=1000,
            maxValue=999,
        ),
    ]
)
```
### Typography

#### Highlight improvements

[Highlight](/components/highlight) now supports custom colors for individual terms using a list of dictionaries containing text and color properties.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Error: Invalid input. Warning: Check this field. Success: All tests passed.",
    highlight=[
        {"text": "error", "color": "red"},
        {"text": "warning", "color": "yellow"},
        {"text": "success", "color": "green"},
    ],
)
```
Use `wholeWord` to match complete words only.

```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Text(
        "With whole word matching (wholeWord=True)",
        size="sm", c="dimmed",
    ),
    dmc.Highlight(
        "The theme is there",
        highlight="the",
        wholeWord=True,
    ),
    dmc.Text(
        "Without whole word matching (default)",
        size="sm", c="dimmed", mt="lg",
    ),
    dmc.Highlight(
        "The theme is there",
        highlight="the",

    ),
])
```
Matching is case-insensitive and accent-insensitive by default. Use `caseInsensitive` or `accentInsensitive` to change this behavior.

```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Text(
        "With case-insensitive matching (default)",
        size="sm", c="dimmed",
    ),
    dmc.Highlight(
        "Highlight This, definitely THIS and also this!",
        highlight="this",
    ),
    dmc.Text(
        "With case-sensitive matching (caseInsensitive=False)",
        size="sm", c="dimmed", mt="lg",
    ),
    dmc.Highlight(
        "Highlight This, definitely THIS and also this!",
        highlight="this",
        caseInsensitive=False,
    ),
])
```
#### Text wrapping

[Text](/components/text) and [Blockquote](/components/blockquote) now support `textWrap` to control the CSS `text-wrap` property.

#### List attributes

[List](/components/list) now supports the HTML attributes `start`, `reversed`, and `value` for ordered lists.

```python
import dash_mantine_components as dmc

component = dmc.Box(
    [
        dmc.Text("Start from specific number:", c="dimmed"),
        dmc.List(
            [
                dmc.ListItem("This is item #5"),
                dmc.ListItem("This is item #6"),
                dmc.ListItem("This is item #7"),
                dmc.ListItem("This is item #8"),
            ],
            type="ordered",
            start=5,
        ),
        dmc.Text("Reversed numbering:", mt="lg", c="dimmed"),
        dmc.List(
            [
                dmc.ListItem("This is item #3"),
                dmc.ListItem("This is item #2"),
                dmc.ListItem("This is item #1"),
            ],
            type="ordered",
            reversed=True,
        ),
    ]
)
```
#### CodeHighlight line numbers

[CodeHighlight](/components/code-highlight) and `CodeHighligtTabs` now supports `withLineNumbers` to display line numbers alongside code.

``
dmc.CodeHighlightTabs(   # or dmc.CodeHighligh(
    code=code,
    withExpandButton=True,
    expandCodeLabel="Show full code",
    collapseCodeLabel="Show less",
    defaultExpanded=False
)

```python
import dash_mantine_components as dmc

component = dmc.CodeHighlight(
    withLineNumbers=True,
    withExpandButton=True,
    defaultExpanded=False,
    language="python",
    code="""# Kadane's Algorithm

class Solution:
    def maxSubArray(self, nums: List[int]) -> int:
        curr, summ = nums[0], nums[0]
        for n in nums[1:]:
            curr = max(n, curr + n)
            summ = max(summ, curr)
        return summ""",
)
```
`CodeHighlight` now supports expandable code snippets with `withExpandButton`, `defaultExpanded`, `expandCodeLabel`, and
`collapseCodeLabel` props, previously available only in `CodeHighlightTabs`.

### Datepickers

#### DateTimePicker range

[DateTimePicker](/components/datetimepicker) now supports `type="range"` for selecting a date and time range. Two time inputs are displayed for the start and end times, with a range summary below.

```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    label="Pick date and time range",
    placeholder="Pick date and time range",
    type="range",
)
```
#### TimePicker duration

[TimePicker](/components/timepicker) now supports `type="duration"` for entering durations longer than 24 hours. The hours field has no upper limit, and the input width adjusts to the value. The `format` prop is ignored, the display is always 24-hour, and the dropdown is disabled.

```python
import dash_mantine_components as dmc

component = dmc.TimePicker(
    label="Enter a duration",
    withSeconds=True,
    type="duration"
)
```
#### Month and year presets

[MonthPickerInput](/components/monthpickerinput) and [YearPickerInput](/components/yearpickerinput) now support `presets` for predefined values.

```python
from datetime import date
from dateutil.relativedelta import relativedelta

import dash_mantine_components as dmc

today = date.today()
start_of_month = lambda months: (today.replace(day=1) + relativedelta(months=months)).isoformat()

component = dmc.MonthPickerInput(
    label="With presets",
    placeholder="Select month",
    presets=[
        {"value": start_of_month(0), "label": "This month"},
        {"value": start_of_month(1), "label": "Next month"},
        {"value": start_of_month(-1), "label": "Last month"},
        {"value": start_of_month(6), "label": "In 6 months"},
        {"value": start_of_month(12), "label": "Next year"},
        {"value": start_of_month(-12), "label": "Last year"},
    ],
)
```
#### Date formatting functions

[DateTimePicker](/components/datetimepicker) and [DateInput](/components/dateinput) now accept functions in `valueFormat`. [DatePickerInput](/components/datepickerinput), [MonthPickerInput](/components/monthpickerinput), and [YearPickerInput](/components/yearpickerinput) accept functions in `valueFormatter` to customize displayed date text.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.DatePickerInput(
    label="Pick multiple dates",
    type="multiple",
    placeholder="Pick multiple dates",
    clearable=True,
    valueFormatter={"function": "formatDatesSelected"},
),
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDatesSelected = ({ type, date, locale, format }) => {
    if (type === "multiple" && Array.isArray(date)) {
        if (date.length === 1) {
            return dayjs(date[0]).locale(locale).format(format);
        }

        if (date.length > 1) {
            return `${date.length} dates selected`;
        }

        return "";
    }

    return "";
};
```

#### TimePicker preset selection

[TimePicker](/components/timepicker) now supports `closeDropdownOnPresetSelect` to close the dropdown after a preset is selected.

```python
import dash_mantine_components as dmc

component = dmc.TimePicker(
    label="Enter a time",
    format="12h",
    withDropdown=True,
    presets=['11:30', '15:45', '18:00', '20:15', '22:30'],
    closeDropdownOnPresetSelect=True
)
```
#### Native calendar level selection

Date picker components now support `withNativeLevelSelect`, which replaces the calendar header level button with native select elements for navigating to a month or year.

```python
import dash_mantine_components as dmc

component =  dmc.DatePicker(withNativeLevelSelect=True, yearsSelectRange=[2020, 2035])
```
### Charts

#### Chart brush (range slider)

[AreaChart](/components/areachart), [BarChart](/components/barchart), [LineChart](/components/linechart), and [CompositeChart](/components/compositechart) now support `withBrush` to add a range slider below the chart. Use `brushProps` to configure the Recharts Brush component and `brushDragEnd` to receive the selected `startIndex` and `endIndex`.

```python
import dash_mantine_components as dmc
from dash import callback, Input, Output

data = [
    {"date": "Mar 1", "Apples": 2200, "Oranges": 1400},
    {"date": "Mar 2", "Apples": 2500, "Oranges": 1500},
    {"date": "Mar 3", "Apples": 2800, "Oranges": 1700},
    {"date": "Mar 4", "Apples": 3100, "Oranges": 1600},
    {"date": "Mar 5", "Apples": 3000, "Oranges": 1800},
    {"date": "Mar 6", "Apples": 2700, "Oranges": 2000},
    {"date": "Mar 7", "Apples": 2400, "Oranges": 2100},
    {"date": "Mar 8", "Apples": 2100, "Oranges": 1900},
    {"date": "Mar 9", "Apples": 1900, "Oranges": 1700},
    {"date": "Mar 10", "Apples": 2200, "Oranges": 1500},
    {"date": "Mar 11", "Apples": 2600, "Oranges": 1600},
    {"date": "Mar 12", "Apples": 3000, "Oranges": 1800},
    {"date": "Mar 13", "Apples": 3300, "Oranges": 2000},
    {"date": "Mar 14", "Apples": 3100, "Oranges": 2200},
    {"date": "Mar 15", "Apples": 2800, "Oranges": 2100},
    {"date": "Mar 16", "Apples": 2500, "Oranges": 1900},
]

component = dmc.Stack([
    dmc.AreaChart(
        h=300,
        data=data,
        dataKey="date",
        withBrush=True,
        series=[
            {"name": "Apples", "color": "indigo.6"},
            {"name": "Oranges", "color": "blue.6"},
        ],
        id="areachart-brush"
    ),
    dmc.Text(id="areachart-brush-dragend")
])

@callback(
    Output("areachart-brush-dragend", "children"),
    Input("areachart-brush", "brushDragEnd"),
)
def brushDragEnd(brushDragEnd):
    return f"Brush range selected: {brushDragEnd}"
```
#### AreaChart streamgraph

[AreaChart](/components/areachart) now supports `type="stream"` to render a streamgraph, a stacked area chart with a flowing baseline. The y-axis is hidden by default because the values are not meaningful to read against a fixed baseline.

```python
import dash_mantine_components as dmc

data = [
    {"month": "Jan", "Apples": 220, "Oranges": 140, "Tomatoes": 90, "Grapes": 60},
    {"month": "Feb", "Apples": 260, "Oranges": 180, "Tomatoes": 120, "Grapes": 90},
    {"month": "Mar", "Apples": 300, "Oranges": 240, "Tomatoes": 180, "Grapes": 140},
    {"month": "Apr", "Apples": 340, "Oranges": 320, "Tomatoes": 260, "Grapes": 200},
    {"month": "May", "Apples": 380, "Oranges": 420, "Tomatoes": 360, "Grapes": 280},
    {"month": "Jun", "Apples": 420, "Oranges": 520, "Tomatoes": 460, "Grapes": 360},
    {"month": "Jul", "Apples": 400, "Oranges": 560, "Tomatoes": 520, "Grapes": 420},
    {"month": "Aug", "Apples": 360, "Oranges": 520, "Tomatoes": 560, "Grapes": 460},
    {"month": "Sep", "Apples": 300, "Oranges": 440, "Tomatoes": 520, "Grapes": 420},
    {"month": "Oct", "Apples": 260, "Oranges": 340, "Tomatoes": 440, "Grapes": 360},
    {"month": "Nov", "Apples": 220, "Oranges": 260, "Tomatoes": 340, "Grapes": 280},
    {"month": "Dec", "Apples": 200, "Oranges": 200, "Tomatoes": 260, "Grapes": 200},
]

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="month",
    type="stream",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
        {"name": "Grapes", "color": "grape.6"},
    ],
)
```
#### Reference areas

[AreaChart](/components/areachart), [BarChart](/components/barchart), [LineChart](/components/linechart), [CompositeChart](/components/compositechart), and [ScatterChart](/components/scatterchart) now support `referenceAreas` to highlight rectangular regions such as target ranges, thresholds, or weekends. Areas can be defined by x and y data values and support a theme color and label.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="date",
    type="stacked",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    referenceAreas=[
        {"x1": "Mar 23", "x2": "Mar 25", "color": "red.6", "label": "Weekend"},
    ],
)
```
#### Reference dots

[AreaChart](/components/areachart), [BarChart](/components/barchart), [LineChart](/components/linechart), [CompositeChart](/components/compositechart), and [ScatterChart](/components/scatterchart) now support `referenceDots` to mark individual data points. Each dot supports a radius, theme color, and label.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.AreaChart(
    h=300,
    data=data,
    dataKey="date",
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"},
    ],
    referenceDots=[
        {"x": "Mar 25", "y": 3470, "color": "red.6", "label": "Peak"},
    ],
)
```
#### Heatmap legend and month labels

[Heatmap](/components/heatmap) now supports `withLegend` to display a color legend below the chart. Use `legendLabels` to customize the labels. The default is `["Less", "More"]`.

`monthLabelsPosition` controls whether month labels appear above or below the heatmap.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    withWeekdayLabels=True,
    withMonthLabels=True,
    withLegend=True,
)
```
```python
import dash_mantine_components as dmc
from .data import data

component = dmc.Heatmap(
    data=data,
    startDate="2024-02-16",
    endDate="2025-02-16",
    withWeekdayLabels=True,
    withMonthLabels=True,
    monthLabelsPosition="bottom"
)
```
#### PieChart and DonutChart labels

[PieChart](/components/piechart) and [DonutChart](/components/donutchart) now support `labelsType="name"` to display segment names instead of values or percentages.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(
    data=data,
    withLabels=True,
    withLabelsLine=True,
    labelsType="name",
)
```
#### Chart legends

[PieChart](/components/piechart), [DonutChart](/components/donutchart), and [FunnelChart](/components/funnelchart) now support `withLegend` to display segment names and colors. Hovering over a legend item highlights the corresponding segment. Use `legendProps` to configure the underlying Recharts Legend component.

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.FunnelChart(data=data, withLegend=True)
```
#### ScatterChart right Y axis

[ScatterChart](/components/scatterchart) now supports `withRightYAxis` to display a second y-axis on the right. Configure it with `rightYAxisProps` and `rightYAxisLabel`.

```python
import dash_mantine_components as dmc
from .data import data3

component = dmc.ScatterChart(
    h=350,
    data=data3,
    dataKey={"x": "month", "y": "value"},
    withLegend=True,
    withRightYAxis=True,
    xAxisLabel="Month",
    yAxisLabel="Revenue",
    rightYAxisLabel="Conversion rate",
    rightYAxisProps={"unit": "%"},
)
```
### Other new features

#### Theming and styling

A new `fontWeights` theme property controls font weights across components. The defaults are `regular=400`, `medium=600`, and `bold=700`, mapped to CSS variables.

To restore the previous medium weight of 500:

```python
dmc.MantineProvider(theme={"fontWeights": {"medium": 500}})
```

All Mantine components now support logical margin and padding props:

- `mis`: margin-inline-start
- `mie`: margin-inline-end
- `pis`: padding-inline-start
- `pie`: padding-inline-end

#### Responsive style performance

[MantineProvider](/components/mantineprovider) now supports `deduplicateInlineStyles`, enabled by default. With React 19, repeated responsive style values can share a single style tag instead of generating one for each component.

This can improve performance when rendering large lists with identical responsive style props. See [Responsive Styles](https://www.dash-mantine-components.com/responsive-styles) for details.

#### Additional component enhancements

- [ColorPicker](/components/colorpicker) supports `name` and `hiddenInputProps` for uncontrolled form submissions.
- [ColorInput](/components/colorinput) supports `fullWidth` to make the dropdown match the input width.
- [JsonInput](/components/jsoninput) supports `indentSpaces` to control JSON formatting indentation.
- [Collapse](/components/collapse), [NavLink](/components/navlink), and `AccordionPanel` support `keepMounted=False` to unmount collapsed content.
- [Stepper](/components/stepper), [Tabs](/components/tabs), and [Tree](/components/tree) support `keepMounted`.
- [Tabs](/components/tabs) supports `keepMountedMode` to control how inactive panels are hidden when `keepMounted=True`. Use `"display-none"` to use `display: none` instead of the default `Activity` component.
- [Menu](/components/menu) submenus use a safe polygon when moving the pointer diagonally from a parent item to a submenu.
- [PasswordInput](/components/passwordinput) supports `visibilityToggleFocusable` to include the visibility toggle in the keyboard tab order.
- [Checkbox](/components/checkbox) supports `readOnly` and `withErrorStyles`.
- [Spoiler](/components/spoiler) supports `showAriaLabel` and `hideAriaLabel` to customize screen reader labels.

### Breaking and behavior changes

- `TypographyStylesProvider` was renamed to `Typography`.
- `Grid.gutter` was renamed to `gap`. Use `rowGap` and `columnGap` for separate row and column spacing.
- `Spoiler.initialState` was renamed to `defaultExpanded`.
- `Text` and `Anchor` no longer accept the `color` prop. Use the `c` style prop instead.
- `Popover` and `Tooltip` no longer accept `positionDependencies`; it is no longer required.
- `Tree` no longer defines the `data-hovered` attribute for hover state. Apply hover styles with `&:hover` instead.
- The `PasswordInput` visibility toggle icon has changed.
- Notifications now pause the auto-close timer for all visible notifications when any notification is hovered. Set `pauseResetOnHover="notification"` to restore the previous behavior of pausing only the hovered notification.
- The default `theme.defaultRadius` changed from `sm` (4px) to `md` (8px).
- The `light` variant now uses opaque colors to improve contrast.
- The `mod` prop converts camelCase keys to kebab-case for data attributes.
- The default medium font weight changed from 500 to 600. See the `fontWeights` theme property above to customize it.

## CSS Variables  
How to use CSS variables with Dash Mantine Components.  
Category: Styling  

MantineProvider exposes all Mantine CSS variables based on the given theme. You can use these variables in CSS files,
style prop or any other styles. See the full list of variables at the bottom of the page.

### Typography variables

#### Font family
The following CSS variables are used to assign font families to all Mantine components:


| Variable                        | Default value           | Description                                              |
|:--------------------------------|:------------------------|:---------------------------------------------------------|
| `mantine-font-family`           | system sans-serif fonts | Controls font-family property of most Mantine components |
| `mantine-font-family-monospace` | system monospace fonts  | Controls font-family property of code blocks             |
| `mantine-font-family-headings`  | system sans-serif fonts | Controls font-family property of headings                |


You can control these variables in the [theme](/theme-object). Note that if `theme.headings.fontFamily` is not set,
`--mantine-font-family-headings` value will be the same as `--mantine-font-family`


```python
theme = {
    # Controls --mantine-font-family
    "fontFamily": "Arial, sans-serif",

    # Controls --mantine-font-family-monospace
    "fontFamilyMonospace": "Courier New, monospace",

    "headings": {
        # Controls --mantine-font-family-headings
        "fontFamily": "Georgia, serif",
    },
}
dmc.MantineProvider(theme=theme, children=[])
```

If you want to use system fonts as a fallback for custom fonts, you can reference `dmc.DEFAULT_THEME` value instead of defining it manually:

```python
import dash_mantine_components as dmc

theme = {
    "fontFamily": f"Roboto, {dmc.DEFAULT_THEME['fontFamily']}"
}
```
You can reference font family variables in your CSS:

```css

.text {
  font-family: var(--mantine-font-family);
}

.code {
  font-family: var(--mantine-font-family-monospace);
}

.heading {
  font-family: var(--mantine-font-family-headings);
}

```

And in `ff` style prop:

- `ff="text"` will use `--mantine-font-family` variable
- `ff="monospace"` will use `--mantine-font-family-monospace` variable
- `ff="heading"` will use `--mantine-font-family-headings` variable


```python
dmc.Text(
    "This text uses --mantine-font-family-monospace variable",
    ff="monospace"
)
```


#### Font size

Font size variables are used in most Mantine components to control text size. The variable that is chosen depends on
the component and its size prop.

| Variable                        | Default value   |
|:--------------------------------|:----------------|
| --mantine-font-size-xs          | 0.75rem (12px)  |
| --mantine-font-size-sm          | 0.875rem (14px) |
| --mantine-font-size-md          | 1rem (16px)     |
| --mantine-font-size-lg          | 1.125rem (18px) |
| --mantine-font-size-xl          | 1.25rem (20px)  |

You can reference font size variables in CSS:

```css
.demo {
  font-size: var(--mantine-font-size-md);
}
```

And in `fz` style prop:
```python
dmc.Text(
    "This text uses --mantine-font-size-xl variable",
    fz="xl"
)
```

To define custom font sizes, can use `theme.fontSizes` property:

```python
theme = {
    'fontSizes': {
    'xs': '0.5rem',
    'sm': '0.75rem',
    'md': '1rem',
    'lg': '1.25rem',
    'xl': '1.5rem',
  },
}
dmc.MantineProvider(theme=theme, children=[])
```


Note that `theme.fontSizes` dict is merged with the dmc.DEFAULT_THEME – it is not required to define all values, only those that you want to change.

```python
theme = {
    'fontSizes': {'xs': '0.5rem'}
}
```

You can add any number of additional font sizes to the `theme.fontSizes` object. These values will be defined as
CSS variables in `--mantine-font-size-{size}` format:


```python
theme = {
    'fontSizes': {
        'xxs': '0.125rem',
        'xxl': '2rem',
    }
}
```

After defining `theme.fontSizes`, you can reference these variables in your CSS:

```css
.demo {
  font-size: var(--mantine-font-size-xxs);
}
```

> Case conversion
>
>Case conversion (camelCase to kebab-case) is not automatically applied to custom font sizes. If you define `theme.fontSizes`
with camelCase keys, you need to reference them in camelCase format. For example, if you define `{ customSize: '1rem' }`, you need to reference it as `--mantine-font-size-customSize`.


#### Line height

Line height variables are used in the Text component. In other components, line-height is either calculated based on font size or set to `--mantine-line-height`, which is an alias for `--mantine-line-height-md`.

| Variable                      | Default value  |
|:------------------------------|:---------------|
| --mantine-line-height         | 1.55           |
| --mantine-line-height-xs      | 1.4            |
| --mantine-line-height-sm      | 1.45           |
| --mantine-line-height-md      | 1.55           |
| --mantine-line-height-lg      | 1.6            |
| --mantine-line-height-xl      | 1.65           |

You can reference line height variables in your CSS:

```css
.demo {
  line-height: var(--mantine-line-height-md);
}
```

```python
dmc.Text("This text uses --mantine-line-height-xl variable", lh="xl")
```

To define custom line heights, you can use theme.lineHeights property:

```python
theme = {
    'lineHeights': {
    'xs': '1.2',
    'sm': '1.3',
    'md': '1.4',
    'lg': '1.5',
    'xl': '1.6',
  },
}
```


#### Headings

`theme.headings` controls `font-size`, `line-height`, `font-weight`, and `text-wrap` CSS properties of headings in `Title` and `Typography` components.

| Variable                        | Default value   |
|:--------------------------------|:----------------|
| **General variables**           |                 |
| --mantine-heading-font-weight   | 700             |
| --mantine-heading-text-wrap     | wrap            |
| **h1 heading**                  |                 |
| --mantine-h1-font-size          | 2.125rem (34px) |
| --mantine-h1-line-height        | 1.3             |
| --mantine-h1-font-weight        | 700             |
| **h2 heading**                  |                 |
| --mantine-h2-font-size          | 1.625rem (26px) |
| --mantine-h2-line-height        | 1.35            |
| --mantine-h2-font-weight        | 700             |
| **h3 heading**                  |                 |
| --mantine-h3-font-size          | 1.375rem (22px) |
| --mantine-h3-line-height        | 1.4             |
| --mantine-h3-font-weight        | 700             |
| **h4 heading**                  |                 |
| --mantine-h4-font-size          | 1.125rem (18px) |
| --mantine-h4-line-height        | 1.45            |
| --mantine-h4-font-weight        | 700             |
| **h5 heading**                  |                 |
| --mantine-h5-font-size          | 1rem (16px)     |
| --mantine-h5-line-height        | 1.5             |
| --mantine-h5-font-weight        | 700             |
| **h6 heading**                  |                 |
| --mantine-h6-font-size          | 0.875rem (14px) |
| --mantine-h6-line-height        | 1.5             |
| --mantine-h6-font-weight        | 700             |

These variables are used in the `Title` component. The `order` prop controls which heading level to use. For example, `order={3}` Title will use:

- `--mantine-h3-font-size`
- `--mantine-h3-line-height`
- `--mantine-h3-font-weight`


```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Title(f"This is h1 title", order=1),
        dmc.Title(f"This is h2 title", order=2),
        dmc.Title(f"This is h3 title", order=3),
        dmc.Title(f"This is h4 title", order=4),
        dmc.Title(f"This is h5 title", order=5),
        dmc.Title(f"This is h6 title", order=6),
    ]
)
```
You can reference heading variables in your CSS:


```css
.h1 {
  font-size: var(--mantine-h1-font-size);
  line-height: var(--mantine-h1-line-height);
  font-weight: var(--mantine-h1-font-weight);
}
```
And in fz and lh style props:

```python
dmc.Text("This text uses --mantine-h1-* variables",  fz="h1", lh="h1")
```

To change heading styles, can use `theme.headings` property:

```python
theme = {
    "headings": {
        "sizes": {
            "h1": {
                "fontSize": "2rem",
                "lineHeight": "1.5",
                "fontWeight": "500",
            },
            "h2": {
                "fontSize": "1.5rem",
                "lineHeight": "1.6",
                "fontWeight": "500",
            },
        },
        # ...
    },
}
```

`theme.headings` dict is deeply merged with the default theme – it is not required to define all values, only those that you want to change.


```python
theme = {
    "headings": {
        "sizes": {
            "h1": {
                "fontSize": "2rem",             
            },          
        },    
    },
}
```


#### Font smoothing

Font smoothing variables control `-webkit-font-smoothing` and `moz-osx-font-smoothing` CSS properties. These variables are used to make text look better on screens with high pixel density.

Font smoothing variables are controlled by the `theme.fontSmoothing` theme property, which is `True` by default. If `theme.fontSmoothing` is `False`, both variables will be set to `unset`.

| Variable                        | Default value  |
|:--------------------------------|:---------------|
| --mantine-webkit-font-smoothing | antialiased    |
| --mantine-moz-font-smoothing    | grayscale      |

If you need to override font smoothing values, the best way is to disable `theme.fontSmoothing` and set global styles on the `body` element:

```python
# Disable font smoothing in your theme
theme = {
  "fontSmoothing": False,
}
```

Add global styles to your project with desired font smoothing values
```css
body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}
```


### Colors variables

Colors variables are controlled by `theme.colors` and `theme.primaryColor`. Each color defined in the `theme.colors` object is required to have 10 shades. Theme colors can be referenced by their name and shade index, for example, `--mantine-color-red-6`.

You can define new colors on the theme object or override existing colors:

```python
theme = {
    "colors": {
        "demo": [
            "#FF0000",
            "#FF3333",
            "#FF6666",
            "#FF9999",
            "#FFCCCC",
            "#FFEEEE",
            "#FFFAFA",
            "#FFF5F5",
            "#FFF0F0",
            "#FFEBEB",
        ],
    },
}
```

The code above will define the following CSS variables:

| Variable                      | Default value  |
|:------------------------------|:---------------|
| --mantine-color-demo-0        | #FF0000        |
| --mantine-color-demo-1        | #FF3333        |
| --mantine-color-demo-2        | #FF6666        |
| --mantine-color-demo-3        | #FF9999        |
| --mantine-color-demo-4        | #FFCCCC        |
| --mantine-color-demo-5        | #FFEEEE        |
| --mantine-color-demo-6        | #FFFAFA        |
| --mantine-color-demo-7        | #FFF5F5        |
| --mantine-color-demo-8        | #FFF0F0        |
| --mantine-color-demo-9        | #FFEBEB        |

#### Variant colors

Some Mantine components like `Button` or `Badge` have the `variant` prop that in combination with the `color` prop controls the component text, background, and border colors. For each variant and color, Mantine defines a set of CSS variables that control these colors. For example, for the default blue color the following CSS variables are defined:

| Variable                                         | Default value                 |
|:-------------------------------------------------|:------------------------------|
| **Filled variant**                               |                               |
| --mantine-color-blue-filled                      | var(--mantine-color-blue-6)   |
| --mantine-color-blue-filled-hover                | var(--mantine-color-blue-7)   |
| **Light variant**                                |                               |
| --mantine-color-blue-light                       | rgba(34, 139, 230, 0.1)       |
| --mantine-color-blue-light-hover                 | rgba(34, 139, 230, 0.12)      |
| --mantine-color-blue-light-color                 | var(--mantine-color-blue-6)   |
| **Outline variant**                              |                               |
| --mantine-color-blue-outline                     | var(--mantine-color-blue-6)   |
| --mantine-color-blue-outline-hover               | rgba(34, 139, 230, 0.05)      |


For example, if you use Button component the following way:


```python
import dash_mantine_components as dmc

component = dmc.Button("Pink filled button", color="pink", variant="filled")
```
The component will have the following styles:

- Background color will be `var(--mantine-color-pink-filled)`
- Background color on hover will be `var(--mantine-color-pink-filled-hover)`
- Text color will be `var(--mantine-color-white)`
- Border color will be `transparent`

Note that the variables above are not static; they are generated based on the values of `theme.colors` and `theme.primaryShade`. Additionally, their values are different for dark and light color schemes.

#### Variant Colors Variables

Variant colors variables are used in all components that support the `color` prop, for example, `Button`, `Badge`, `Avatar`, and `Pagination`. The color values used by these components are determined by `cssVariablesResolver` and `variantColorResolver`.

#### Primary Color Variables

Primary color variables are defined by `theme.primaryColor` (which must be a key of `theme.colors`). The following CSS variables are defined for the primary color:

| Variable                                      | Default value                                      |
|:----------------------------------------------|:---------------------------------------------------|
| --mantine-primary-color-{shade}               | `var(--mantine-color-{primaryColor}-{shade})`      |
| --mantine-primary-color-filled                | `var(--mantine-color-{primaryColor}-filled)`       |
| --mantine-primary-color-filled-hover          | `var(--mantine-color-{primaryColor}-filled-hover)` |
| --mantine-primary-color-light                 | `var(--mantine-color-{primaryColor}-light)`        |
| --mantine-primary-color-light-hover           | `var(--mantine-color-{primaryColor}-light-hover)`  |
| --mantine-primary-color-light-color           | `var(--mantine-color-{primaryColor}-light-color)`  |

You can reference primary color variables in CSS:

```css
.demo {
  color: var(--mantine-primary-color-0);
  background-color: var(--mantine-primary-color-filled);
}
```

#### Other Color Variables

The following colors are used in various Mantine components. Note that default values are provided for the light color scheme; dark color scheme values are different.

| Variable                          | Description                                             | Default Value                    |
|-----------------------------------|---------------------------------------------------------|----------------------------------|
| --mantine-color-white             | Value of `theme.white`                                  | #fff                             |
| --mantine-color-black             | Value of `theme.black`                                  | #000                             |
| --mantine-color-text              | Color used for text in the body element                 | var(--mantine-color-black)       |
| --mantine-color-body              | Body background color                                   | var(--mantine-color-white)       |
| --mantine-color-error             | Color used for error messages and states                | var(--mantine-color-red-6)       |
| --mantine-color-placeholder       | Color used for input placeholders                       | var(--mantine-color-gray-5)      |
| --mantine-color-dimmed            | Color used for dimmed text                              | var(--mantine-color-gray-6)      |
| --mantine-color-bright            | Color used for bright text                              | var(--mantine-color-black)       |
| --mantine-color-anchor            | Color used for links                                    | var(--mantine-primary-color-6)   |
| --mantine-color-default           | Background color of default variant                     | var(--mantine-color-white)       |
| --mantine-color-default-hover     | Background color of default variant on hover            | var(--mantine-color-gray-0)      |
| --mantine-color-default-color     | Text color of default variant                           | var(--mantine-color-black)       |
| --mantine-color-default-border    | Border color of default variant                         | var(--mantine-color-gray-4)      |


### Spacing variables

`theme.spacing` values are used in most Mantine components to control paddings, margins, and other spacing-related properties. The following CSS variables are defined based on `theme.spacing`:

| Variable               | Default value   |
|------------------------|-----------------|
| --mantine-spacing-xs   | 0.625rem (10px) |
| --mantine-spacing-sm   | 0.75rem (12px)  |
| --mantine-spacing-md   | 1rem (16px)     |
| --mantine-spacing-lg   | 1.25rem (20px)  |
| --mantine-spacing-xl   | 2rem (32px)     |

To define custom spacing values, use the `theme.spacing` property:

```python
theme = {
    "spacing": {
        "xs": "0.5rem",
        "sm": "0.75rem",
        "md": "1rem",
        "lg": "1.5rem",
        "xl": "2rem",
    },
}
```

### Border radius variables

Mantine components that support the `radius` prop use border radius variables to control border radius. The following CSS variables are defined based on `theme.radius`:

| Variable                 | Default value  |
|--------------------------|----------------|
| --mantine-radius-xs      | 0.125rem (2px) |
| --mantine-radius-sm      | 0.25rem (4px)  |
| --mantine-radius-md      | 0.5rem (8px)   |
| --mantine-radius-lg      | 1rem (16px)    |
| --mantine-radius-xl      | 2rem (32px)    |

Additionally, `--mantine-radius-default` variable is defined based on `theme.defaultRadius` value. If the `radius` prop on components is not set explicitly, `--mantine-radius-default` is used instead.

To define custom border radius values, use the `theme.radius` and `theme.defaultRadius` properties:

```python
theme = {
    "defaultRadius": "sm",
    "radius": {
        "xs": "0.25rem",
        "sm": "0.5rem",
        "md": "1rem",
        "lg": "2rem",
        "xl": "3rem",
    },
}
```


### Shadow variables

Shadow variables are used in all Mantine components that support the `shadow` prop. The following CSS variables are defined based on `theme.shadows`:

| Variable              | Default value                                                                                          |
|-----------------------|--------------------------------------------------------------------------------------------------------|
| --mantine-shadow-xs   | 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)                                            |
| --mantine-shadow-sm   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px |
| --mantine-shadow-md   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px|
| --mantine-shadow-lg   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px|
| --mantine-shadow-xl   | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px|

To define custom shadow values, use the `theme.shadows` property:

```python
theme = {
    "shadows": {
        "xs": "0 1px 2px rgba(0, 0, 0, 0.1)",
        "sm": "0 1px 3px rgba(0, 0, 0, 0.1)",
        "md": "0 2px 4px rgba(0, 0, 0, 0.1)",
        "lg": "0 4px 8px rgba(0, 0, 0, 0.1)",
        "xl": "0 8px 16px rgba(0, 0, 0, 0.1)",
    },
}
```

### z-index variables

z-index variables are defined in `@mantine/core/styles.css`. Unlike other variables, z-index variables are not controlled by the theme and are not exposed in the theme object.

| Variable                  | Default value |
|---------------------------|---------------|
| --mantine-z-index-app     | 100           |
| --mantine-z-index-modal   | 200           |
| --mantine-z-index-popover | 300           |
| --mantine-z-index-overlay | 400           |
| --mantine-z-index-max     | 9999          |

You can reference z-index variables in CSS:

```css
/* Display content above the modal */
.my-content {
  z-index: calc(var(--mantine-z-index-modal) + 1);
}
```

And in components by referencing the CSS variable:

```python
import dash_mantine_components as dmc

dmc.Modal(
    zIndex="var(--mantine-z-index-max)",
    opened=True,
    children="Modal content"
) 
```

### CSS Variables list

#### CSS variables not depending on color scheme
#### Light color scheme only variables 
#### Dark color scheme only variables


### CSS Variables Not Depending on Color Scheme

| Variable | Value |
|----------|-------|
| --mantine-scale | 1 |
| --mantine-cursor-type | default |
| --mantine-color-scheme | light dark |
| --mantine-webkit-font-smoothing | antialiased |
| --mantine-moz-font-smoothing | grayscale |
| --mantine-color-white | #fff |
| --mantine-color-black | #000 |
| --mantine-line-height | 1.55 |
| --mantine-font-family | -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji |
| --mantine-font-family-monospace | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace |
| --mantine-font-family-headings | -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji |
| --mantine-heading-font-weight | 700 |
| --mantine-heading-text-wrap | wrap |
| --mantine-radius-default | 0.25rem |
| --mantine-primary-color-filled | var(--mantine-color-blue-filled) |
| --mantine-primary-color-filled-hover | var(--mantine-color-blue-filled-hover) |
| --mantine-primary-color-light | var(--mantine-color-blue-light) |
| --mantine-primary-color-light-hover | var(--mantine-color-blue-light-hover) |
| --mantine-primary-color-light-color | var(--mantine-color-blue-light-color) |
| --mantine-breakpoint-xs | 36em |
| --mantine-breakpoint-sm | 48em |
| --mantine-breakpoint-md | 62em |
| --mantine-breakpoint-lg | 75em |
| --mantine-breakpoint-xl | 88em |
| --mantine-spacing-xs | 0.625rem |
| --mantine-spacing-sm | 0.75rem |
| --mantine-spacing-md | 1rem |
| --mantine-spacing-lg | 1.25rem |
| --mantine-spacing-xl | 2rem |
| --mantine-font-size-xs | 0.75rem |
| --mantine-font-size-sm | 0.875rem |
| --mantine-font-size-md | 1rem |
| --mantine-font-size-lg | 1.125rem |
| --mantine-font-size-xl | 1.25rem |
| --mantine-line-height-xs | 1.4 |
| --mantine-line-height-sm | 1.45 |
| --mantine-line-height-md | 1.55 |
| --mantine-line-height-lg | 1.6 |
| --mantine-line-height-xl | 1.65 |
| --mantine-shadow-xs | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1) |
| --mantine-shadow-sm | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem |
| --mantine-shadow-md | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem |
| --mantine-shadow-lg | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.75rem 1.4375rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 0.75rem 0.75rem -0.4375rem |
| --mantine-shadow-xl | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem |
| --mantine-radius-xs | 0.125rem |
| --mantine-radius-sm | 0.25rem |
| --mantine-radius-md | 0.5rem |
| --mantine-radius-lg | 1rem |
| --mantine-radius-xl | 2rem |

#### Primary Color Shades (0-9)
| Variable | Value |
|----------|-------|
| --mantine-primary-color-0 | var(--mantine-color-blue-0) |
| --mantine-primary-color-1 | var(--mantine-color-blue-1) |
| --mantine-primary-color-2 | var(--mantine-color-blue-2) |
| --mantine-primary-color-3 | var(--mantine-color-blue-3) |
| --mantine-primary-color-4 | var(--mantine-color-blue-4) |
| --mantine-primary-color-5 | var(--mantine-color-blue-5) |
| --mantine-primary-color-6 | var(--mantine-color-blue-6) |
| --mantine-primary-color-7 | var(--mantine-color-blue-7) |
| --mantine-primary-color-8 | var(--mantine-color-blue-8) |
| --mantine-primary-color-9 | var(--mantine-color-blue-9) |

#### Color Palette - Dark
| Variable | Value |
|----------|-------|
| --mantine-color-dark-0 | #C9C9C9 |
| --mantine-color-dark-1 | #b8b8b8 |
| --mantine-color-dark-2 | #828282 |
| --mantine-color-dark-3 | #696969 |
| --mantine-color-dark-4 | #424242 |
| --mantine-color-dark-5 | #3b3b3b |
| --mantine-color-dark-6 | #2e2e2e |
| --mantine-color-dark-7 | #242424 |
| --mantine-color-dark-8 | #1f1f1f |
| --mantine-color-dark-9 | #141414 |

#### Color Palette - Gray
| Variable | Value |
|----------|-------|
| --mantine-color-gray-0 | #f8f9fa |
| --mantine-color-gray-1 | #f1f3f5 |
| --mantine-color-gray-2 | #e9ecef |
| --mantine-color-gray-3 | #dee2e6 |
| --mantine-color-gray-4 | #ced4da |
| --mantine-color-gray-5 | #adb5bd |
| --mantine-color-gray-6 | #868e96 |
| --mantine-color-gray-7 | #495057 |
| --mantine-color-gray-8 | #343a40 |
| --mantine-color-gray-9 | #212529 |

#### Color Palette - Red
| Variable | Value |
|----------|-------|
| --mantine-color-red-0 | #fff5f5 |
| --mantine-color-red-1 | #ffe3e3 |
| --mantine-color-red-2 | #ffc9c9 |
| --mantine-color-red-3 | #ffa8a8 |
| --mantine-color-red-4 | #ff8787 |
| --mantine-color-red-5 | #ff6b6b |
| --mantine-color-red-6 | #fa5252 |
| --mantine-color-red-7 | #f03e3e |
| --mantine-color-red-8 | #e03131 |
| --mantine-color-red-9 | #c92a2a |

#### Color Palette - Pink
| Variable | Value |
|----------|-------|
| --mantine-color-pink-0 | #fff0f6 |
| --mantine-color-pink-1 | #ffdeeb |
| --mantine-color-pink-2 | #fcc2d7 |
| --mantine-color-pink-3 | #faa2c1 |
| --mantine-color-pink-4 | #f783ac |
| --mantine-color-pink-5 | #f06595 |
| --mantine-color-pink-6 | #e64980 |
| --mantine-color-pink-7 | #d6336c |
| --mantine-color-pink-8 | #c2255c |
| --mantine-color-pink-9 | #a61e4d |

#### Color Palette - Grape
| Variable | Value |
|----------|-------|
| --mantine-color-grape-0 | #f8f0fc |
| --mantine-color-grape-1 | #f3d9fa |
| --mantine-color-grape-2 | #eebefa |
| --mantine-color-grape-3 | #e599f7 |
| --mantine-color-grape-4 | #da77f2 |
| --mantine-color-grape-5 | #cc5de8 |
| --mantine-color-grape-6 | #be4bdb |
| --mantine-color-grape-7 | #ae3ec9 |
| --mantine-color-grape-8 | #9c36b5 |
| --mantine-color-grape-9 | #862e9c |

#### Color Palette - Violet
| Variable | Value |
|----------|-------|
| --mantine-color-violet-0 | #f3f0ff |
| --mantine-color-violet-1 | #e5dbff |
| --mantine-color-violet-2 | #d0bfff |
| --mantine-color-violet-3 | #b197fc |
| --mantine-color-violet-4 | #9775fa |
| --mantine-color-violet-5 | #845ef7 |
| --mantine-color-violet-6 | #7950f2 |
| --mantine-color-violet-7 | #7048e8 |
| --mantine-color-violet-8 | #6741d9 |
| --mantine-color-violet-9 | #5f3dc4 |

#### Color Palette - Indigo
| Variable | Value |
|----------|-------|
| --mantine-color-indigo-0 | #edf2ff |
| --mantine-color-indigo-1 | #dbe4ff |
| --mantine-color-indigo-2 | #bac8ff |
| --mantine-color-indigo-3 | #91a7ff |
| --mantine-color-indigo-4 | #748ffc |
| --mantine-color-indigo-5 | #5c7cfa |
| --mantine-color-indigo-6 | #4c6ef5 |
| --mantine-color-indigo-7 | #4263eb |
| --mantine-color-indigo-8 | #3b5bdb |
| --mantine-color-indigo-9 | #364fc7 |

#### Color Palette - Blue
| Variable | Value |
|----------|-------|
| --mantine-color-blue-0 | #e7f5ff |
| --mantine-color-blue-1 | #d0ebff |
| --mantine-color-blue-2 | #a5d8ff |
| --mantine-color-blue-3 | #74c0fc |
| --mantine-color-blue-4 | #4dabf7 |
| --mantine-color-blue-5 | #339af0 |
| --mantine-color-blue-6 | #228be6 |
| --mantine-color-blue-7 | #1c7ed6 |
| --mantine-color-blue-8 | #1971c2 |
| --mantine-color-blue-9 | #1864ab |

#### Color Palette - Cyan
| Variable | Value |
|----------|-------|
| --mantine-color-cyan-0 | #e3fafc |
| --mantine-color-cyan-1 | #c5f6fa |
| --mantine-color-cyan-2 | #99e9f2 |
| --mantine-color-cyan-3 | #66d9e8 |
| --mantine-color-cyan-4 | #3bc9db |
| --mantine-color-cyan-5 | #22b8cf |
| --mantine-color-cyan-6 | #15aabf |
| --mantine-color-cyan-7 | #1098ad |
| --mantine-color-cyan-8 | #0c8599 |
| --mantine-color-cyan-9 | #0b7285 |

#### Color Palette - Teal
| Variable | Value |
|----------|-------|
| --mantine-color-teal-0 | #e6fcf5 |
| --mantine-color-teal-1 | #c3fae8 |
| --mantine-color-teal-2 | #96f2d7 |
| --mantine-color-teal-3 | #63e6be |
| --mantine-color-teal-4 | #38d9a9 |
| --mantine-color-teal-5 | #20c997 |
| --mantine-color-teal-6 | #12b886 |
| --mantine-color-teal-7 | #0ca678 |
| --mantine-color-teal-8 | #099268 |
| --mantine-color-teal-9 | #087f5b |

#### Color Palette - Green
| Variable | Value |
|----------|-------|
| --mantine-color-green-0 | #ebfbee |
| --mantine-color-green-1 | #d3f9d8 |
| --mantine-color-green-2 | #b2f2bb |
| --mantine-color-green-3 | #8ce99a |
| --mantine-color-green-4 | #69db7c |
| --mantine-color-green-5 | #51cf66 |
| --mantine-color-green-6 | #40c057 |
| --mantine-color-green-7 | #37b24d |
| --mantine-color-green-8 | #2f9e44 |
| --mantine-color-green-9 | #2b8a3e |

#### Color Palette - Lime
| Variable | Value |
|----------|-------|
| --mantine-color-lime-0 | #f4fce3 |
| --mantine-color-lime-1 | #e9fac8 |
| --mantine-color-lime-2 | #d8f5a2 |
| --mantine-color-lime-3 | #c0eb75 |
| --mantine-color-lime-4 | #a9e34b |
| --mantine-color-lime-5 | #94d82d |
| --mantine-color-lime-6 | #82c91e |
| --mantine-color-lime-7 | #74b816 |
| --mantine-color-lime-8 | #66a80f |
| --mantine-color-lime-9 | #5c940d |

#### Color Palette - Yellow
| Variable | Value |
|----------|-------|
| --mantine-color-yellow-0 | #fff9db |
| --mantine-color-yellow-1 | #fff3bf |
| --mantine-color-yellow-2 | #ffec99 |
| --mantine-color-yellow-3 | #ffe066 |
| --mantine-color-yellow-4 | #ffd43b |
| --mantine-color-yellow-5 | #fcc419 |
| --mantine-color-yellow-6 | #fab005 |
| --mantine-color-yellow-7 | #f59f00 |
| --mantine-color-yellow-8 | #f08c00 |
| --mantine-color-yellow-9 | #e67700 |
#
### Color Palette - Orange
| Variable | Value |
|----------|-------|
| --mantine-color-orange-0 | #fff4e6 |
| --mantine-color-orange-1 | #ffe8cc |
| --mantine-color-orange-2 | #ffd8a8 |
| --mantine-color-orange-3 | #ffc078 |
| --mantine-color-orange-4 | #ffa94d |
| --mantine-color-orange-5 | #ff922b |
| --mantine-color-orange-6 | #fd7e14 |
| --mantine-color-orange-7 | #f76707 |
| --mantine-color-orange-8 | #e8590c |
| --mantine-color-orange-9 | #d9480f |

#### Heading Sizes
| Variable | Value |
|----------|-------|
| --mantine-h1-font-size | 2.125rem |
| --mantine-h1-line-height | 1.3 |
| --mantine-h1-font-weight | 700 |
| --mantine-h2-font-size | 1.625rem |
| --mantine-h2-line-height | 1.35 |
| --mantine-h2-font-weight | 700 |
| --mantine-h3-font-size | 1.375rem |
| --mantine-h3-line-height | 1.4 |
| --mantine-h3-font-weight | 700 |
| --mantine-h4-font-size | 1.125rem |
| --mantine-h4-line-height | 1.45 |
| --mantine-h4-font-weight | 700 |
| --mantine-h5-font-size | 1rem |
| --mantine-h5-line-height | 1.5 |
| --mantine-h5-font-weight | 700 |
| --mantine-h6-font-size | 0.875rem |
| --mantine-h6-line-height | 1.5 |
| --mantine-h6-font-weight | 700 |

### Light Color Scheme Only Variables

| Variable | Value |
|----------|-------|
| --mantine-primary-color-contrast | var(--mantine-color-white) |
| --mantine-color-bright | var(--mantine-color-black) |
| --mantine-color-text | #000 |
| --mantine-color-body | #fff |
| --mantine-color-error | var(--mantine-color-red-6) |
| --mantine-color-placeholder | var(--mantine-color-gray-5) |
| --mantine-color-anchor | var(--mantine-color-blue-6) |
| --mantine-color-default | var(--mantine-color-white) |
| --mantine-color-default-hover | var(--mantine-color-gray-0) |
| --mantine-color-default-color | var(--mantine-color-black) |
| --mantine-color-default-border | var(--mantine-color-gray-4) |
| --mantine-color-dimmed | var(--mantine-color-gray-6) |
| --mantine-color-disabled | var(--mantine-color-gray-2) |
| --mantine-color-disabled-color | var(--mantine-color-gray-5) |
| --mantine-color-disabled-border | var(--mantine-color-gray-3) |
| --mantine-color-dark-text | var(--mantine-color-dark-filled) |
| --mantine-color-dark-filled | var(--mantine-color-dark-6) |
| --mantine-color-dark-filled-hover | var(--mantine-color-dark-7) |
| --mantine-color-dark-light | rgba(46, 46, 46, 0.1) |
| --mantine-color-dark-light-hover | rgba(46, 46, 46, 0.12) |
| --mantine-color-dark-light-color | var(--mantine-color-dark-6) |
| --mantine-color-dark-outline | var(--mantine-color-dark-6) |
| --mantine-color-dark-outline-hover | rgba(46, 46, 46, 0.05) |
| --mantine-color-gray-text | var(--mantine-color-gray-filled) |
| --mantine-color-gray-filled | var(--mantine-color-gray-6) |
| --mantine-color-gray-filled-hover | var(--mantine-color-gray-7) |
| --mantine-color-gray-light | rgba(134, 142, 150, 0.1) |
| --mantine-color-gray-light-hover | rgba(134, 142, 150, 0.12) |
| --mantine-color-gray-light-color | var(--mantine-color-gray-6) |
| --mantine-color-gray-outline | var(--mantine-color-gray-6) |
| --mantine-color-gray-outline-hover | rgba(134, 142, 150, 0.05) |
| --mantine-color-red-text | var(--mantine-color-red-filled) |
| --mantine-color-red-filled | var(--mantine-color-red-6) |
| --mantine-color-red-filled-hover | var(--mantine-color-red-7) |
| --mantine-color-red-light | rgba(250, 82, 82, 0.1) |
| --mantine-color-red-light-hover | rgba(250, 82, 82, 0.12) |
| --mantine-color-red-light-color | var(--mantine-color-red-6) |
| --mantine-color-red-outline | var(--mantine-color-red-6) |
| --mantine-color-red-outline-hover | rgba(250, 82, 82, 0.05) |
| --mantine-color-pink-text | var(--mantine-color-pink-filled) |
| --mantine-color-pink-filled | var(--mantine-color-pink-6) |
| --mantine-color-pink-filled-hover | var(--mantine-color-pink-7) |
| --mantine-color-pink-light | rgba(230, 73, 128, 0.1) |
| --mantine-color-pink-light-hover | rgba(230, 73, 128, 0.12) |
| --mantine-color-pink-light-color | var(--mantine-color-pink-6) |
| --mantine-color-pink-outline | var(--mantine-color-pink-6) |
| --mantine-color-pink-outline-hover | rgba(230, 73, 128, 0.05) |
| --mantine-color-grape-text | var(--mantine-color-grape-filled) |
| --mantine-color-grape-filled | var(--mantine-color-grape-6) |
| --mantine-color-grape-filled-hover | var(--mantine-color-grape-7) |
| --mantine-color-grape-light | rgba(190, 75, 219, 0.1) |
| --mantine-color-grape-light-hover | rgba(190, 75, 219, 0.12) |
| --mantine-color-grape-light-color | var(--mantine-color-grape-6) |
| --mantine-color-grape-outline | var(--mantine-color-grape-6) |
| --mantine-color-grape-outline-hover | rgba(190, 75, 219, 0.05) |
| --mantine-color-violet-text | var(--mantine-color-violet-filled) |
| --mantine-color-violet-filled | var(--mantine-color-violet-6) |
| --mantine-color-violet-filled-hover | var(--mantine-color-violet-7) |
| --mantine-color-violet-light | rgba(121, 80, 242, 0.1) |
| --mantine-color-violet-light-hover | rgba(121, 80, 242, 0.12) |
| --mantine-color-violet-light-color | var(--mantine-color-violet-6) |
| --mantine-color-violet-outline | var(--mantine-color-violet-6) |
| --mantine-color-violet-outline-hover | rgba(121, 80, 242, 0.05) |
| --mantine-color-indigo-text | var(--mantine-color-indigo-filled) |
| --mantine-color-indigo-filled | var(--mantine-color-indigo-6) |
| --mantine-color-indigo-filled-hover | var(--mantine-color-indigo-7) |
| --mantine-color-indigo-light | rgba(76, 110, 245, 0.1) |
| --mantine-color-indigo-light-hover | rgba(76, 110, 245, 0.12) |
| --mantine-color-indigo-light-color | var(--mantine-color-indigo-6) |
| --mantine-color-indigo-outline | var(--mantine-color-indigo-6) |
| --mantine-color-indigo-outline-hover | rgba(76, 110, 245, 0.05) |
| --mantine-color-blue-text | var(--mantine-color-blue-filled) |
| --mantine-color-blue-filled | var(--mantine-color-blue-6) |
| --mantine-color-blue-filled-hover | var(--mantine-color-blue-7) |
| --mantine-color-blue-light | rgba(34, 139, 230, 0.1) |
| --mantine-color-blue-light-hover | rgba(34, 139, 230, 0.12) |
| --mantine-color-blue-light-color | var(--mantine-color-blue-6) |
| --mantine-color-blue-outline | var(--mantine-color-blue-6) |
| --mantine-color-blue-outline-hover | rgba(34, 139, 230, 0.05) |
| --mantine-color-cyan-text | var(--mantine-color-cyan-filled) |
| --mantine-color-cyan-filled | var(--mantine-color-cyan-6) |
| --mantine-color-cyan-filled-hover | var(--mantine-color-cyan-7) |
| --mantine-color-cyan-light | rgba(21, 170, 191, 0.1) |
| --mantine-color-cyan-light-hover | rgba(21, 170, 191, 0.12) |
| --mantine-color-cyan-light-color | var(--mantine-color-cyan-6) |
| --mantine-color-cyan-outline | var(--mantine-color-cyan-6) |
| --mantine-color-cyan-outline-hover | rgba(21, 170, 191, 0.05) |
| --mantine-color-teal-text | var(--mantine-color-teal-filled) |
| --mantine-color-teal-filled | var(--mantine-color-teal-6) |
| --mantine-color-teal-filled-hover | var(--mantine-color-teal-7) |
| --mantine-color-teal-light | rgba(18, 184, 134, 0.1) |
| --mantine-color-teal-light-hover | rgba(18, 184, 134, 0.12) |
| --mantine-color-teal-light-color | var(--mantine-color-teal-6) |
| --mantine-color-teal-outline | var(--mantine-color-teal-6) |
| --mantine-color-teal-outline-hover | rgba(18, 184, 134, 0.05) |
| --mantine-color-green-text | var(--mantine-color-green-filled) |
| --mantine-color-green-filled | var(--mantine-color-green-6) |
| --mantine-color-green-filled-hover | var(--mantine-color-green-7) |
| --mantine-color-green-light | rgba(64, 192, 87, 0.1) |
| --mantine-color-green-light-hover | rgba(64, 192, 87, 0.12) |
| --mantine-color-green-light-color | var(--mantine-color-green-6) |
| --mantine-color-green-outline | var(--mantine-color-green-6) |
| --mantine-color-green-outline-hover | rgba(64, 192, 87, 0.05) |
| --mantine-color-lime-text | var(--mantine-color-lime-filled) |
| --mantine-color-lime-filled | var(--mantine-color-lime-6) |
| --mantine-color-lime-filled-hover | var(--mantine-color-lime-7) |
| --mantine-color-lime-light | rgba(130, 201, 30, 0.1) |
| --mantine-color-lime-light-hover | rgba(130, 201, 30, 0.12) |
| --mantine-color-lime-light-color | var(--mantine-color-lime-6) |
| --mantine-color-lime-outline | var(--mantine-color-lime-6) |
| --mantine-color-lime-outline-hover | rgba(130, 201, 30, 0.05) |
| --mantine-color-yellow-text | var(--mantine-color-yellow-filled) |
| --mantine-color-yellow-filled | var(--mantine-color-yellow-6) |
| --mantine-color-yellow-filled-hover | var(--mantine-color-yellow-7) |
| --mantine-color-yellow-light | rgba(250, 176, 5, 0.1) |
| --mantine-color-yellow-light-hover | rgba(250, 176, 5, 0.12) |
| --mantine-color-yellow-light-color | var(--mantine-color-yellow-6) |
| --mantine-color-yellow-outline | var(--mantine-color-yellow-6) |
| --mantine-color-yellow-outline-hover | rgba(250, 176, 5, 0.05) |
| --mantine-color-orange-text | var(--mantine-color-orange-filled) |
| --mantine-color-orange-filled | var(--mantine-color-orange-6) |
| --mantine-color-orange-filled-hover | var(--mantine-color-orange-7) |
| --mantine-color-orange-light | rgba(253, 126, 20, 0.1) |
| --mantine-color-orange-light-hover | rgba(253, 126, 20, 0.12) |
| --mantine-color-orange-light-color | var(--mantine-color-orange-6) |
| --mantine-color-orange-outline | var(--mantine-color-orange-6) |
| --mantine-color-orange-outline-hover | rgba(253, 126, 20, 0.05) |

### Dark Color Scheme Only Variables

| Variable | Value |
|----------|-------|
| --mantine-primary-color-contrast | var(--mantine-color-white) |
| --mantine-color-bright | var(--mantine-color-white) |
| --mantine-color-text | var(--mantine-color-dark-0) |
| --mantine-color-body | var(--mantine-color-dark-7) |
| --mantine-color-error | var(--mantine-color-red-8) |
| --mantine-color-placeholder | var(--mantine-color-dark-3) |
| --mantine-color-anchor | var(--mantine-color-blue-4) |
| --mantine-color-default | var(--mantine-color-dark-6) |
| --mantine-color-default-hover | var(--mantine-color-dark-5) |
| --mantine-color-default-color | var(--mantine-color-white) |
| --mantine-color-default-border | var(--mantine-color-dark-4) |
| --mantine-color-dimmed | var(--mantine-color-dark-2) |
| --mantine-color-disabled | var(--mantine-color-dark-6) |
| --mantine-color-disabled-color | var(--mantine-color-dark-3) |
| --mantine-color-disabled-border | var(--mantine-color-dark-4) |
| --mantine-color-dark-text | var(--mantine-color-dark-4) |
| --mantine-color-dark-filled | var(--mantine-color-dark-8) |
| --mantine-color-dark-filled-hover | var(--mantine-color-dark-9) |
| --mantine-color-dark-light | rgba(46, 46, 46, 0.15) |
| --mantine-color-dark-light-hover | rgba(46, 46, 46, 0.2) |
| --mantine-color-dark-light-color | var(--mantine-color-dark-3) |
| --mantine-color-dark-outline | var(--mantine-color-dark-4) |
| --mantine-color-dark-outline-hover | rgba(66, 66, 66, 0.05) |
| --mantine-color-gray-text | var(--mantine-color-gray-4) |
| --mantine-color-gray-filled | var(--mantine-color-gray-8) |
| --mantine-color-gray-filled-hover | var(--mantine-color-gray-9) |
| --mantine-color-gray-light | rgba(134, 142, 150, 0.15) |
| --mantine-color-gray-light-hover | rgba(134, 142, 150, 0.2) |
| --mantine-color-gray-light-color | var(--mantine-color-gray-3) |
| --mantine-color-gray-outline | var(--mantine-color-gray-4) |
| --mantine-color-gray-outline-hover | rgba(206, 212, 218, 0.05) |
| --mantine-color-red-text | var(--mantine-color-red-4) |
| --mantine-color-red-filled | var(--mantine-color-red-8) |
| --mantine-color-red-filled-hover | var(--mantine-color-red-9) |
| --mantine-color-red-light | rgba(250, 82, 82, 0.15) |
| --mantine-color-red-light-hover | rgba(250, 82, 82, 0.2) |
| --mantine-color-red-light-color | var(--mantine-color-red-3) |
| --mantine-color-red-outline | var(--mantine-color-red-4) |
| --mantine-color-red-outline-hover | rgba(255, 135, 135, 0.05) |
| --mantine-color-pink-text | var(--mantine-color-pink-4) |
| --mantine-color-pink-filled | var(--mantine-color-pink-8) |
| --mantine-color-pink-filled-hover | var(--mantine-color-pink-9) |
| --mantine-color-pink-light | rgba(230, 73, 128, 0.15) |
| --mantine-color-pink-light-hover | rgba(230, 73, 128, 0.2) |
| --mantine-color-pink-light-color | var(--mantine-color-pink-3) |
| --mantine-color-pink-outline | var(--mantine-color-pink-4) |
| --mantine-color-pink-outline-hover | rgba(247, 131, 172, 0.05) |
| --mantine-color-grape-text | var(--mantine-color-grape-4) |
| --mantine-color-grape-filled | var(--mantine-color-grape-8) |
| --mantine-color-grape-filled-hover | var(--mantine-color-grape-9) |
| --mantine-color-grape-light | rgba(190, 75, 219, 0.15) |
| --mantine-color-grape-light-hover | rgba(190, 75, 219, 0.2) |
| --mantine-color-grape-light-color | var(--mantine-color-grape-3) |
| --mantine-color-grape-outline | var(--mantine-color-grape-4) |
| --mantine-color-grape-outline-hover | rgba(218, 119, 242, 0.05) |
| --mantine-color-violet-text | var(--mantine-color-violet-4) |
| --mantine-color-violet-filled | var(--mantine-color-violet-8) |
| --mantine-color-violet-filled-hover | var(--mantine-color-violet-9) |
| --mantine-color-violet-light | rgba(121, 80, 242, 0.15) |
| --mantine-color-violet-light-hover | rgba(121, 80, 242, 0.2) |
| --mantine-color-violet-light-color | var(--mantine-color-violet-3) |
| --mantine-color-violet-outline | var(--mantine-color-violet-4) |
| --mantine-color-violet-outline-hover | rgba(151, 117, 250, 0.05) |
| --mantine-color-indigo-text | var(--mantine-color-indigo-4) |
| --mantine-color-indigo-filled | var(--mantine-color-indigo-8) |
| --mantine-color-indigo-filled-hover | var(--mantine-color-indigo-9) |
| --mantine-color-indigo-light | rgba(76, 110, 245, 0.15) |
| --mantine-color-indigo-light-hover | rgba(76, 110, 245, 0.2) |
| --mantine-color-indigo-light-color | var(--mantine-color-indigo-3) |
| --mantine-color-indigo-outline | var(--mantine-color-indigo-4) |
| --mantine-color-indigo-outline-hover | rgba(116, 143, 252, 0.05) |
| --mantine-color-blue-text | var(--mantine-color-blue-4) |
| --mantine-color-blue-filled | var(--mantine-color-blue-8) |
| --mantine-color-blue-filled-hover | var(--mantine-color-blue-9) |
| --mantine-color-blue-light | rgba(34, 139, 230, 0.15) |
| --mantine-color-blue-light-hover | rgba(34, 139, 230, 0.2) |
| --mantine-color-blue-light-color | var(--mantine-color-blue-3) |
| --mantine-color-blue-outline | var(--mantine-color-blue-4) |
| --mantine-color-blue-outline-hover | rgba(77, 171, 247, 0.05) |
| --mantine-color-cyan-text | var(--mantine-color-cyan-4) |
| --mantine-color-cyan-filled | var(--mantine-color-cyan-8) |
| --mantine-color-cyan-filled-hover | var(--mantine-color-cyan-9) |
| --mantine-color-cyan-light | rgba(21, 170, 191, 0.15) |
| --mantine-color-cyan-light-hover | rgba(21, 170, 191, 0.2) |
| --mantine-color-cyan-light-color | var(--mantine-color-cyan-3) |
| --mantine-color-cyan-outline | var(--mantine-color-cyan-4) |
| --mantine-color-cyan-outline-hover | rgba(59, 201, 219, 0.05) |
| --mantine-color-teal-text | var(--mantine-color-teal-4) |
| --mantine-color-teal-filled | var(--mantine-color-teal-8) |
| --mantine-color-teal-filled-hover | var(--mantine-color-teal-9) |
| --mantine-color-teal-light | rgba(18, 184, 134, 0.15) |
| --mantine-color-teal-light-hover | rgba(18, 184, 134, 0.2) |
| --mantine-color-teal-light-color | var(--mantine-color-teal-3) |
| --mantine-color-teal-outline | var(--mantine-color-teal-4) |
| --mantine-color-teal-outline-hover | rgba(56, 217, 169, 0.05) |
| --mantine-color-green-text | var(--mantine-color-green-4) |
| --mantine-color-green-filled | var(--mantine-color-green-8) |
| --mantine-color-green-filled-hover | var(--mantine-color-green-9) |
| --mantine-color-green-light | rgba(64, 192, 87, 0.15) |
| --mantine-color-green-light-hover | rgba(64, 192, 87, 0.2) |
| --mantine-color-green-light-color | var(--mantine-color-green-3) |
| --mantine-color-green-outline | var(--mantine-color-green-4) |
| --mantine-color-green-outline-hover | rgba(105, 219, 124, 0.05) |
| --mantine-color-lime-text | var(--mantine-color-lime-4) |
| --mantine-color-lime-filled | var(--mantine-color-lime-8) |
| --mantine-color-lime-filled-hover | var(--mantine-color-lime-9) |
| --mantine-color-lime-light | rgba(130, 201, 30, 0.15) |
| --mantine-color-lime-light-hover | rgba(130, 201, 30, 0.2) |
| --mantine-color-lime-light-color | var(--mantine-color-lime-3) |
| --mantine-color-lime-outline | var(--mantine-color-lime-4) |
| --mantine-color-lime-outline-hover | rgba(169, 227, 75, 0.05) |
| --mantine-color-yellow-text | var(--mantine-color-yellow-4) |
| --mantine-color-yellow-filled | var(--mantine-color-yellow-8) |
| --mantine-color-yellow-filled-hover | var(--mantine-color-yellow-9) |
| --mantine-color-yellow-light | rgba(250, 176, 5, 0.15) |
| --mantine-color-yellow-light-hover | rgba(250, 176, 5, 0.2) |
| --mantine-color-yellow-light-color | var(--mantine-color-yellow-3) |
| --mantine-color-yellow-outline | var(--mantine-color-yellow-4) |
| --mantine-color-yellow-outline-hover | rgba(255, 212, 59, 0.05) |
| --mantine-color-orange-text | var(--mantine-color-orange-4) |
| --mantine-color-orange-filled | var(--mantine-color-orange-8) |
| --mantine-color-orange-filled-hover | var(--mantine-color-orange-9) |
| --mantine-color-orange-light | rgba(253, 126, 20, 0.15) |
| --mantine-color-orange-light-hover | rgba(253, 126, 20, 0.2) |
| --mantine-color-orange-light-color | var(--mantine-color-orange-3) |
| --mantine-color-orange-outline | var(--mantine-color-orange-4) |
| --mantine-color-orange-outline-hover | rgba(255, 169, 77, 0.05) |

## Responsive Styles  
Responsive styles let you adjust the appearance of individual components, including font size, visibility, spacing, and colors, based on screen size.  
Category: Styling  

Note:  If you are looking for how to structure app’s layout responsively, use components like
[Grid](/components/grid) and [Group](/components/group), [Stack](/components/stack) and others. Check out the [Layout Overview](/layout-overview) section
for tips on selecting the right layout components.  

### Media Queries

Resize the browser window to see the color changing between blue and red.

```python
from dash import html

component = html.Div("Demo", className="media-query-demo")
```
```css

.media-query-demo  {
  background-color: var(--mantine-color-blue-filled);
  color: var(--mantine-color-white);
  padding: var(--mantine-spacing-md);
  text-align: center;

  @media (min-width: 48em) {
    background-color: var(--mantine-color-red-filled);
  }
}

```

When choosing between pixels (px) and rems (rem or em) for media queries, it's generally recommended to use rems because they
are relative to the user's font size, making your design more accessible and responsive to different browser zoom
levels; whereas pixels are absolute and won't adjust with font size changes.

Note that the rem unit is relative to the document's root element, while the em unit is relative to the immediate 
parent of the targeted element. In Mantine, breakpoints are expected to be set in em units to align with its contextual
scaling approach.

### Configure breakpoints
`theme.breakpoints` are used in all responsive Mantine components. Breakpoints are expected to be set in `em` units. You
can configure these values in the [Theme Object](/theme-object) in the `MantineProvider`:

You can customize the `breakpoints` defaults in the `theme`: 

```python
theme = {
    "breakpoints": {
        "xs": '30em',              # customize breakpoints here
        "sm": '48em',
        "md": '64em',
        "lg": '74em',
        "xl": '90em',
  },
}

dmc.MantineProvider(
    # your layout,
    theme=theme
)
```

### Default `theme.breakpoints` Values

| Breakpoint | Viewport width | Value in px |
|------------|----------------|-------------|
| xs         | 36em           | 576px       |
| sm         | 48em           | 768px       |
| md         | 62em           | 992px       |
| lg         | 75em           | 1200px      |
| xl         | 88em           | 1408px      |



### hiddenFrom and visibleFrom props
All Mantine components that have a root element support `hiddenFrom` and `visibleFrom` props. These props accept breakpoint
(`xs`, `sm`, `md`, `lg`, `xl`) and hide the component when viewport width is less than or greater than the specified breakpoint:


```python
import dash_mantine_components as dmc

component = dmc.Group(
    justify="center",
    children=[
        dmc.Button(
            "Hidden from sm",
            hiddenFrom="sm",
            color="orange"
        ),
        dmc.Button(
            "Visible from sm",
            visibleFrom="sm",
            color="cyan"
        ),
        dmc.Button(
            "Visible from md",
            visibleFrom="md",
            color="pink"
        )
    ]
)
```
### Hidden and visible from as classes
If you are building a component and want to use the same logic as in `hiddenFrom` and `visibleFrom` props but you do
not want to use Mantine components, you can use` mantine-hidden-from-{x}` and `mantine-visible-from-{x}` classes.

```python
html.Div("Hidden from md", className="mantine-hidden-from-md")
html.Div("visible from xl", className="mantine-visible-from-xl")

```

### Component size based on media query
Some components support `size` prop, which changes various aspects of component appearance. `size` prop is not
responsive – it is not possible to define different component sizes for different screen sizes. 

### Container queries
Container queries enable you to apply styles to an element based on the size of the element's container. If, for
example, a container has less space available in the surrounding context, you can hide certain elements or use 
smaller fonts. Container queries are supported in all modern browsers.

Note that CSS variables do not work in container queries and because of that rem scaling feature is not available. 
If you rely on this feature, it is better to define breakpoints in px units.


```python
from dash import html
import dash_mantine_components as dmc

component = html.Div(
    className="container-query-demo-root",
    children=html.Div(
        "Resize parent element to see container query in action",
        className="container-query-demo-child"
    )
)
```
Add the following to a .css file in /assets

```css

.container-query-demo-root {
  min-width: 200px;
  max-width: 100%;
  min-height: 120px;
  container-type: inline-size;
  overflow: auto;
  resize: horizontal;
  border: solid;
  border-color: var(--mantine-color-default-border)
}

.container-query-demo-child {
  background-color: var(--mantine-color-dimmed);
  color: var(--mantine-color-white);
  padding: var(--mantine-spacing-md);

  @container (max-width: 500px) {
    background-color: var(--mantine-color-blue-filled);
  }

  @container (max-width: 300px) {
    background-color: var(--mantine-color-red-filled);
  }
}
```

### Responsive styles

You can pass a dictionary to style props to add responsive styles with [style props](/style-props). 
Note that responsive style props are less performant than regular style props, it is not recommended using them in large amounts.

```python
import dash_mantine_components as dmc

component = dmc.Box(
    "Box with responsive style props",
    w={"base": 200, "sm": 400, "lg": 500},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    c="#fff",
    ta="center",
    mx="auto",
)
```
Responsive values are calculated the following way:

- `base` value is used when none of the breakpoint values are provided
- `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in `dmc.DEFAULT_THEME`.

```python
import dash_mantine_components as dmc

dmc.Box(w={ "base": 320, "sm": 480, "lg": 640 })
```

In this case the element will have the following styles:

```css
/* Base styles added to element and then get overwritten with responsive values */
.element {
  width: 20rem;
}

/* 48em is theme.breakpoints.sm by default */
@media (min-width: 48em) {
  .element {
    width: 30rem;
  }
}

/* 75em is theme.breakpoints.lg by default */
@media (min-width: 75em) {
  .element {
    width: 40rem;
  }
}
```

### Deduplicating responsive style props
*new in dmc v3*

If you have many components with the same responsive style props, you can set `deduplicateInlineStyles=True` on `MantineProvider`
to automatically share `<style /> tags` between components with identical responsive styles. This uses React 19 style
hoisting to deduplicate and hoist styles to `<head />`

Default is  `True`. This can significantly improve performance when rendering large lists of components with identical responsive style props. 


```python
app.layout = dmc.MantineProvider(
    deduplicateInlineStyles=True # This is the default
    # Components with the same responsive style props  will now share a single <style /> tag
)

```

Note that deduplication only helps when multiple components share the same responsive style prop values. If every
component has unique responsive values, each still requires its own `<style />` tag.

Currently, deduplication applies to style props on all components and to responsive props on the `Flex` component.
Components like `Grid` and `SimpleGrid` are not yet covered.

## Right-to-left direction  
All Mantine components support right-to-left direction out of the box. You can preview how components work with RTL direction by clicking direction control in the top right corner.  
Category: Styling  

### DirectionProvider

`DirectionProvider` component is used to set direction for all components inside it. It is required to wrap your 
application with `DirectionProvider` if you are planning to either use RTL direction or change direction dynamically.

```python
app.layout=dmc.DirectionProvider(
    dmc.MantineProvider(
        # your layout
    ),
    direction="rtl",  # or "ltr"
    id="direction-provider"
)
```

The `direction` prop sets the `dir` attribute on the root element of your application, the `html` element.

### RTL direction toggle

You can change the text direction by updating the `direction` prop in a callback.

Here is a minimal example of a RTL direction toggle, similar to the one used in the DMC documentation:

```python

import dash_mantine_components as dmc
from dash import Dash, Input, Output, State, callback
from dash.exceptions import PreventUpdate
from dash_iconify import DashIconify

app = Dash()

layout = dmc.Stack([
    dmc.Group([
        dmc.Title("RTL Direction demo", order=3),
        dmc.ActionIcon(
            DashIconify(icon="tabler:text-direction-rtl", width=18),
            id="rtl-toggle",
            variant="outline",
        ),
    ], justify="space-between"),
    dmc.Slider(value=25, labelAlwaysOn=True, mt="xl"),
], m="lg")

app.layout = dmc.DirectionProvider(
    dmc.MantineProvider(layout),
    id="direction-provider",
    direction="ltr"
)

@callback(
    Output("rtl-toggle", "children"),
    Output("direction-provider", "direction"),
    Input("rtl-toggle", "n_clicks"),
    State("direction-provider", "direction")
)
def toggle_direction(n, d):
    if n is None:
        raise PreventUpdate

    new_dir = "ltr" if d == "rtl" else "rtl"
    return DashIconify(icon=f"tabler:text-direction-{new_dir}", width=18), new_dir


if __name__ == "__main__":
    app.run(debug=True)

```

## Style Props  
With style props you can add responsive styles to any Mantine component that supports these props.  
Category: Styling  

### Supported props

Style props add styles to the root element, if you want to style nested elements use [Styles API](/styles-api) instead.

```python
dmc.Box(mx="auto", maw=400, c="blue.6", bg="#fff")
```

:border: false

### Theme values
Some style props can reference values from theme, for example `mt` will use `theme.spacing` value if you set `xs`, `sm`, `md`, `lg`, `xl`:

```python

# margin-top: theme.spacing.xs
dmc.Box(mt="xs")

# margin-top: theme.spacing.md * -1 
dmc.Box(mt="-md") 

# margin-top: auto 
dmc.Box(mt="auto")

# margin-top: 1rem 
dmc.Box(mt=16)

# margin-top: 5rem 
dmc.Box(mt="5rem") 


```

In `c`, `bd` and `bg` props you can reference colors from `theme.colors`:

```python

# Color: theme.colors.blue[theme.primaryShade]
dmc.Box(c="blue")

# Background: theme.colors.orange[1]
dmc.Box(bg="orange.1")

# Border: 1px solid theme.colors.red[6]
dmc.Box(bd="1px solid red.6")

# Color: if colorScheme is dark `var(--mantine-color-dark-2)`, if colorScheme is light `var(--mantine-color-gray-6)`
dmc.Box(c="dimmed")

# Color: if colorScheme is dark `var(--mantine-color-white)`, if colorScheme is light `var(--mantine-color-black)`
dmc.Box(c="bright")

# Background: #EDFEFF
dmc.Box(bg="#EDFEFF")

# Background: rgba(0, 34, 45, 0.6)
dmc.Box(bg="rgba(0, 34, 45, 0.6)")

```




### Responsive styles

You can pass a dictionary to style props to add responsive styles with style props. 
Note that responsive style props are less performant than regular style props, it is not recommended using them in large amounts.

```python
import dash_mantine_components as dmc

component = dmc.Box(
    "Box with responsive style props",
    w={"base": 200, "sm": 400, "lg": 500},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    c="#fff",
    ta="center",
    mx="auto",
)
```
Responsive values are calculated the following way:

- `base` value is used when none of the breakpoint values are provided
- `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in `dmc.DEFAULT_THEME`.

```python
import dash_mantine_components as dmc

dmc.Box(w={ "base": 320, "sm": 480, "lg": 640 })
```

In this case the element will have the following styles:

```css
/* Base styles added to element and then get overwritten with responsive values */
.element {
  width: 20rem;
}

/* 48em is theme.breakpoints.sm by default */
@media (min-width: 48em) {
  .element {
    width: 30rem;
  }
}

/* 75em is theme.breakpoints.lg by default */
@media (min-width: 75em) {
  .element {
    width: 40rem;
  }
}
```

Note that underlying Mantine transforms `px` to `rem`, but for most part you can ignore this.

## Styles API  
With Styles API you can overwrite styles of inner elements in Mantine components with classNames or styles props.  
Category: Styling  

### Styles API Overview

DMC supports `style` and `className` props for styling the root element, just like other Dash libraries.
However, many DMC components have nested elements.  For example the `TextInput` includes `label`, `description`,
`error` props.

The Styles API is a set of props and techniques that allows you to customize the style of any element inside a Mantine
component - inline using the  `classNames` or `styles` props, or using the [Theme Object](/theme-object).


### Styles API Selectors

Each component has its own set of selectors based on its structure. These are documented in the Styles API section of each component’s page.


#### Example: `dmc.Button` Selectors

| Name    | Static selector         | Description                      |
| :------ | :---------------------- | :------------------------------- |
| root    | .mantine-Button-root    | Root element                     |
| loader  | .mantine-Button-loader  | Loader shown when `loading=True` |
| section | .mantine-Button-section | Left and right icon sections     |
| inner   | .mantine-Button-inner   | Container for label and content  |
| label   | .mantine-Button-label   | The button’s text                |


You can use these selectors in multiple ways:

#### 1) With `classNames` or `styles` props

```python
# Using classNames
dmc.Button(
    "Styled with classNames",
    classNames={
        "root": "my-root-class",
        "label": "my-label-class",
        "inner": "my-inner-class",
    }
)

# Using inline styles
dmc.Button(
    "Styled with styles prop",
    styles={
        "root": {"backgroundColor": "red"},
        "label": {"color": "blue"},
        "inner": {"fontSize": 20},
    }
)
```

#### 2) In the `theme` prop in  `MantineProvider`

```python
theme = {
    "components": {
        "Button": {
            "classNames": {
                "root": "my-root-class",
                "label": "my-label-class",
                "inner": "my-inner-class",
            },
            "styles": {
                "root": {"backgroundColor": "red"},
                "label": {"color": "blue"},
                "inner": {"fontSize": 20},
            }
        }
    }
}

app.layout = dmc.MantineProvider(
    theme=theme,
    children=dmc.Button("Themed Button")
)
```

#### 3) In a `.css` file using static selectors

```css
.mantine-Button-root {
    background-color: red;
}

.mantine-Button-label {
    color: blue;
}

.mantine-Button-inner {
    font-size: 20px;
}
```

### classNames Prop

The `classNames` prop is used to apply custom CSS class names to specific inner elements of a Mantine component. It 
accepts a dictionary  with element names as keys and classes as values. This approach is preferred for larger-scale styling and
maintainability.


### Styles Prop

The `styles` prop is used to apply inline styles directly to specific inner elements of a Mantine component. It accepts
an dictionary where keys correspond to the names of the inner elements (as defined in the component's Styles API documentation)
and values are style objects. Inline styles have higher specificity than classes, meaning they will override styles
defined by classes unless `!important` is explicitly used in the class definition.

You cannot use pseudo-classes (for example, `:hover`, `:first-of-type`) and media queries inside the `styles` prop.


> styles prop usage
>
> Some examples and demos in the documentation use the `styles` prop for convenience, but it is not recommended to use the `styles` prop as the primary means of styling components, as the `classNames` prop is more flexible and has better performance.

### Avoid dynamic class names

When inspecting elements in the browser, you may see generated class names like `m_77c9d27d`. These are internal to Mantine and can change between versions. Don’t target these in your CSS.

Instead, use:

* the `styles` or `classNames` props
* static class selectors like `.mantine-Button-root`



### Global vs. Specific Styling

You can combine global styling (via `theme` or static CSS) with component-specific overrides using `styles` or `classNames`.

For example:

* A default red background can be applied globally using `.mantine-Button-root`
* A specific button can override this with its own `className` or `styles`

Note: For components rendered in a portal — such as `Popover`, `Tooltip`, or `Modal` — static selectors often won’t work because parts of the DOM are rendered outside the main tree. In these cases, use `classNames` or `styles`, or set `withinPortal=False` if appropriate.


### Component Classes

Mantine uses hashed class names (e.g., `m_77c9d27d`) for internal styling. These class names may change between versions or builds, so you should never rely on them directly.

**Do not do this:**

```css
/* This is fragile and will likely break */
.m_77c9d27d {
  background: blue;
}
```

**Instead, do this:**

```css
/* Use static selectors */
.mantine-Button-root {
  background: blue;
}
```

Or:

```python
# Use the Styles API
dmc.Button(
    "Styled Button",
    classNames={"root": "my-custom-button"}
)
```



### Data Attributes

Many Mantine components use `data-*` attributes to reflect state or props. These can be useful for styling in CSS, especially when using features like loading states, icons, or layout modifiers.

You’ll find a list of data attributes for each component in its Styles API docs.

Example (`dmc.Button`):

| Selector  | Attribute                | Set When…            | Example value     |
| --------- | ------------------------ | -------------------- | ----------------- |
| `root`    | `data-disabled`          | `disabled=True`      | –                 |
| `root`    | `data-loading`           | `loading=True`       | –                 |
| `root`    | `data-block`             | `fullWidth=True`     | –                 |
| `root`    | `data-with-left-section` | `leftSection` is set | –                 |
| `section` | `data-position`          | Always               | `left` or `right` |

Example CSS targeting data attributes:

```css
/* Style disabled buttons */
.dmc-data-attributes-demo[data-disabled="true"] {
    color: red;
    cursor: not-allowed;
}

/* Style buttons while loading */
.dmc-data-attributes-demo[data-loading="true"] {
    background-color: darkgray;
}

/* Style left icon section */
.dmc-data-attributes-demo .mantine-Button-section[data-position="left"] {
    color: var(--mantine-color-yellow-filled);
}
```

```python
import dash_mantine_components as dmc
from dash import html

component = dmc.Group(
    [
        dmc.Button("Default Button"),
        dmc.Button("Disabled Button", disabled=True, className="dmc-data-attributes-demo"),
        dmc.Button("Loading Button", loading=True, className="dmc-data-attributes-demo"),
        dmc.Button("Button with Left Section", leftSection=html.Div("left"), className="dmc-data-attributes-demo"),
    ],
    gap="sm"
)
```
### attributes prop

Use `attributes` prop to pass attributes to inner elements of all components that support Styles API. For example,
it can be used to add data attributes for testing purposes:


```python
import dash_mantine_components as dmc


component = dmc.Button(
    "Button with attributes",
    attributes={
        "root": { "data-test-id": "root" },
        "label": { "data-test-id": "label" },
        "inner": { "data-test-id": "inner" },
      },
)
```
### More Examples

Here are a few component-specific examples. Refer to each component’s Styles API section for the full list of selectors and attributes.

#### Button

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Button(
    "Settings",
    leftSection=DashIconify(icon="ic:baseline-settings-input-composite"),
    styles={"root": {"fontWeight": 400}, "section": {"width": 100}},
)
```
#### Badge

```python
import dash_mantine_components as dmc

component = dmc.Badge(
    "Badge 1",
    variant="dot",
    styles={
        "root": {"borderWidth": 1, "height": 30, "padding": 10},
        "inner": {"fontWeight": 500},
    },
)
```
#### TextInput

```python
import dash_mantine_components as dmc

component = dmc.TextInput(
    label="TextInput with custom styles",
    placeholder="TextInput with custom styles",
    description="Description below the input",
    w=300,
    styles={
        "input": {"borderColor":  "var(--mantine-color-violet-4)"},
        "label": {
            "color": "blue",
            "backgroundColor":  "var(--mantine-color-yellow-1)",
        },
    },
)
```
### Styles with Callbacks

```python
from dash import  html, callback, Output, Input, State
import dash_mantine_components as dmc

component = html.Div([
    dmc.TextInput(
        id="styles-input",
        label="Required Input",
        required=True,
    ),
    dmc.Button("Submit", id="styles-submit-btn")
])

@callback(
    Output("styles-input", "styles"),
    Input("styles-submit-btn", "n_clicks"),
    State("styles-input", "value"),
    prevent_initial_call=True
)
def update_styles(n_clicks, value):
    if not value:
        return {
            "input": {"borderColor": "red"},
            "label": {"color": "red"}
        }
    return {
        "input": {"borderColor": "green"},
        "label": {"color": "green"}
    }
```
### Slider

See the [Styling the Slider](/components/slider#styling-the-slider) section for a detailed example including:

* Dynamic theming with `light-dark`
* Custom styling for tracks, marks, and thumbs
* Attribute-based styling using `[data-filled]`


### Tabs

For another advanced example, see the [Styling the Tabs](/components/tabs#styling-the-tabs) section.


### DatePickerInput

Components that use portals (like `Popover`, `Modal`, and `Tooltip`) often render outside the DOM tree. To style their internal parts:

* Use `classNames` or `styles` props
* Or set `withinPortal=False` if supported

```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.DatePickerInput(
        label="Default Calendar style"
    ),
    dmc.DatePickerInput(
        label="Calendar without red weekend days",
        styles={"day": {"color": "var(--mantine-color-text)"}},
    )
])
```

## Styles Overview  
This guide will help you understand how to apply styles to Dash Mantine components.  
Category: Styling  

### Component specific props
Most of the components provide props that allow you to customize their styles. For example, `Button` component has
`color`, `variant`, `size` and `radius` props that control its appearance:


### Style props

[Style props](/style-props) work similar to component specific props, but with several differences:

- Style props are not component specific, they can be used with any component.
- Style props always control a single CSS property. For example, `c` prop controls CSS `color` property, while `color` prop controls a set of properties: `color`, `background-color` and `border-color`.
- Style props are set in style attribute. It is not possible to override them with CSS without using `!important`.

[Style props](/style-props) are useful when you need to change a single CSS property without creating a separate file for styles. Some of the most common use cases are:


- Changing text color and font-size

```python

dmc.Card([
    dmc.Text("Card title", c="blue.8", fz="lg"),
    dmc.Text("Card description", c="dimmed", fz="sm")
])
```

- Applying margins to inputs inside a form:

```python
dmc.Paper([
    dmc.TextInput(label="First name"),
    dmc.TextInput(label="Last name", mt="md"),
    dmc.TextInput(label="Email", mt="md")    
])
```

- Adding padding to various elements:

```python
dmc.Paper("My custom card", p="xl")
```

Note that style props were never intended to be used as a primary way of styling components. In most cases, it is better
to limit the number of style props used per component to 3-4. If you find yourself using more than 4 style props, 
consider creating a separate CSS file with styles – it will be easier to maintain and will be more performant.


### style prop

You can use the `style` prop to define inline styles, just like in other dash components:
```python
dmc.Card(style={"backgroundColor": "blue", "color": "white"})
```

### className prop
You can define CSS classes in a `.css` file in the `/assets` folder. These can then be referenced using the `className` prop, just like in other dash components:

```python 
dmc.Card(className="card-style")
```

.css file:
```css
.card-style {
    background-color: blue;
    color: white;
}
```

### Styles API

Note that the `style` and the `className` props will apply style to the root of the component.  Many DMC components contain
multiple elements, for example the `TextInput` includes `label`, `description`, `error` props.  

Use the `classNames` or `styles` props to target the nested elements.  See more information in the [StylesAPI](/styles-api) section.

- `styles` prop: Used to apply inline styles directly to specific inner elements of a Mantine component.
- `classNames`prop: Used to apply custom CSS class names to specific inner elements of a Mantine component

### theme prop in MantineProvider

DMC includes a great default theme that supports light and dark mode. Use the `theme` prop to change the global styles.

For those of you familiar with Dash Bootstrap Components, this is similar to setting the theme using a Bootstrap
stylesheet. However, in DMC, instead of linking to a  CSS file, you can directly define the theme using a Python
dictionary, which makes it easy to customize the theme. For example, you can  override colors, fonts, spacing,
and even component-specific styles globally.

For more information see the [Theme Object](/theme-object) section.


###  Theme Tokens

A theme token is a named value from the global theme, like a color, spacing unit, or font family. In DMC, these tokens
can be used in any styles with the Mantine [CSS variables](/css-variables):

For example:

 - In a `.css` file in `/assets`:

```css
.root {
  background: var(--mantine-color-red-5); /* red[5] from theme.colors */
  margin-top: var(--mantine-spacing-md);  /* md from theme.spacing */
}
```

-  In style props:
```python
dcc.Box(bg="red.5", mt="xl")
# Shorthand for: var(--mantine-color-red-5), var(--mantine-spacing-xl)
```

- In the `style` prop:
```python
dcc.Box(style={"backgroundColor": "var(--mantine-color-red-5)"})

```

## Colors  
How to use colors with Dash Mantine Components.  
Category: Theming  

Mantine uses [open-color](https://yeun.github.io/open-color/) in default theme with some additions. Each color has 10 shades.


### Colors in the default theme

Colors are stored in the [theme object](/theme-object) as an array of strings. Each color is indexed from `0` (lightest) to `9`
(darkest). The default theme is available as `dmc.DEFAULT_THEME`, which contains all theme properties with their default values.

For example, access a specific shade by using the color name and index: `dmc.DEFAULT_THEME['colors']['blue'][1]`
Colors with larger indices are darker.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    " This is a blue element",
    style={
        "backgroundColor": dmc.DEFAULT_THEME["colors"]["blue"][1],
        "color": dmc.DEFAULT_THEME["colors"]["blue"][9],
        "padding": dmc.DEFAULT_THEME["spacing"]["lg"]
    }
)
```
When using the `color` or other style props like `c`, `bd` or `bg` prop, you can use just the color.index:

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.Button("Button", color="blue.3"),
    dmc.Button("Button", variant="light", color="blue.3"),
    dmc.Button("Button", variant="outline", color="blue.3")
])
```
### Colors as CSS Variables

Mantine also exposes colors as CSS variables. A complete list of Mantine CSS variables is available in the 
[Mantine Docs](https://mantine.dev/styles/css-variables-list/).

If you define custom colors in the `theme` object (via the `MantineProvider` component), these will also be included as
CSS variables.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    " This is a blue theme",
    style={
        "backgroundColor": "var(--mantine-color-blue-1)",
        "color": "var(--mantine-color-blue-9)",
        "padding": "var(--mantine-spacing-lg)",
    }
)
```

### Adding extra colors
You can add any number of extra colors to `theme.colors` object. This will allow you to use them in all components that
support color prop, for example `Button`, `Badge` and `Switch`.


```python
import dash_mantine_components as dmc

dmc.MantineProvider(
    theme={
        "colors": {
            "myColor": [                
              "#F2FFB6",
              "#DCF97E",
              "#C3E35B",
              "#AAC944",
              "#98BC20",
              "#86AC09",
              "#78A000",
              "#668B00",
              "#547200",
              "#455D00",                
            ]
        },
    },
    children=[dmc.Button("Custom Colors!", color="myColor")],
)
```
### Changing colors

You can override named theme colors as well, by providing your own list of 10 colors

```python

dmc.MantineProvider(
    theme={
        "colors": {
            "blue": [... ] # your 10 colors for "blue" theme color
        }
    }
)
```

> 10 shades per color
>
> Colors override must include at least 10 shades per color. Otherwise, you will get a TypeScript error and some 
> variants will not have proper colors. If you only have one color value, you can either pick the remaining colors 
> manually or use the [colors generator tool](https://mantine.dev/colors-generator/).
> 
> You can add more than 10 shades per color: these values will not be used by Mantine components with the default 
> colors resolver, but you can still reference them by index, for example, color="blue.11".



### Supported color formats
You can use the following color formats in theme.colors:

- HEX: `#fff`, `#ffffff`
- RGB: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)`
- HSL: `hsl(0, 0%, 100%)`, `hsla(0, 0%, 100%, 0.5)`
- OKLCH: `oklch(96.27% 0.0217 238.66)`, `oklch(96.27% 0.0217 238.66 / 0.5)`

### Changing Theme Object defaults

You can change the defaults for `primaryColor` and `primaryShade` in the [theme object](/theme-object) in the
`MantineProvider` component.

#### primaryColor

The value of `theme.primaryColor` must be defined as key of `theme.colors`, it is used:

- As a default value for most of the components that support color prop
- To set default focus ring outline color

You can customize the primary color by changing it from its default value of `blue` to another predefined theme color.  

This example changed the default primary color to `green`:

```python
dmc.MantineProvider(
    theme={"primaryColor": "green"},
    children=[] # your layout here
    
)
```


> Note You cannot assign CSS color values to `defaultColor`  It must be a defined color in the `theme` object.



#### primaryShade

`theme.primaryShade` is a number from 0 to 9. It determines which shade will be used for the components that have color prop.

```python
dmc.MantineProvider(
    theme={"primaryShade": 3},
    children=dmc.Group([
        dmc.Button("Button",),
        dmc.Button("Button", variant="light"),
        dmc.Button("Button", variant="outline")
    ])
    
)
```

You can also customize primary shade for dark and light color schemes separately (This is the default):


```python
dmc.MantineProvider(
    theme={"primaryShade": { "light": 6, "dark": 8 }},
    children=[] # your layout here
    
)
```

### Color prop
Components that support changing their color have color prop. This prop supports the following values:

- Key of `theme.colors`, for example, `blue` or `green`
- Key of `theme.colors` with color index, for example, `blue.5` or `green.9`
- CSS color value, for example, #fff or rgba(0, 0, 0, 0.5)


```python
import dash_mantine_components as dmc

component= dmc.Box([
    dmc.Text("Filled variant", size="sm", mb=5, fw=500),
    dmc.Group([
        dmc.Button("Theme color", color="cyan"),
        dmc.Button("Hex color", color="#1D72FE")
    ]),

    dmc.Text("Light variant", size="sm", mb=5, mt="md", fw=500),
    dmc.Group([
        dmc.Button("Theme color", variant="light", color="cyan"),
        dmc.Button("Hex color", variant="light", color="#1D72FE")
    ]),

    dmc.Text("Outline variant", size="sm", mb=5, mt="md", fw=500),
    dmc.Group([
        dmc.Button("Theme color", variant="outline", color="cyan"),
        dmc.Button("Hex color", variant="outline", color="#1D72FE")
    ])
])
```
### Colors index reference
You can reference colors by index in `color` prop and style props, for example `c` prop:


```python
dmc.Text("Text with blue.5 color", c="blue.5")
dmc.Button("Button", color="blue.5")
```

### Difference between color and c props
`color` prop is used to control multiple CSS properties of the component. These properties can vary across different
components, but usually `color` prop controls `background`, `color` and `border-color` CSS properties. For example,
when you set `color='#C3FF36'` on `Button` component (with `variant='filled'`), it will set the following CSS properties:

- `background-color` to `#C3FF36`
- `background-color` when button is hovered to `#B0E631` (`#C3FF36` darkened by 10%)
- color to `var(--mantine-color-white)`
- `border-color` to `transparent`

`c` is a [style prop](/style-props) – it is responsible for setting a single CSS property `color` (color of the text). 
You can combine both props to achieve better contrast between text and background. In the following example:

- `color` prop sets all background: #C3FF36 and color: `var(--mantine-color-white)`
- `c` prop overrides color styles to `color: var(--mantine-color-black)`


```python
import dash_mantine_components as dmc

component = dmc.Button("Button with color and c props",  color="#C3FF36", c="black")
```
### Colors in light and dark mode

#### Using light-dark() CSS Function
The [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function allows defining different styles for light and dark color schemes.

```css
background-color: light-dark(white, black);
```

- The first argument applies in light mode.
- The second argument applies in dark mode.

Note that the light-dark() function is not supported in older browsers.

```python
import dash_mantine_components as dmc

component = dmc.Box([

    dmc.Text(
        "Click the theme switch in the header to see how the background changes in different modes:"
    ),
    # Using CSS color names
    dmc.Text(
        "light-dark(whitesmoke, gray)",
        style={"backgroundColor": "light-dark(whitesmoke, gray)"},
        p="lg",
        m="md"
    ),
    # Using Mantine CSS variables
    dmc.Text(
        "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))",
        style={"backgroundColor": "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))"},
        p="lg",
        m="md"
    )
])
```
#### CSS Class Names for Light/Dark Mode

Since light-dark() is not supported in older browsers, you can use class-based styling instead:

```python
import dash_mantine_components as dmc

component = dmc.Box([

    dmc.Text(
        "Click the theme switch in the header to see how the background changes in different modes"
    ),
    dmc.Text(
        "CSS class defined for light and dark scheme",
        className="light-dark-demo",
        p="lg",
        m="md"
    ),
])
```

```css
/* applied in light color-scheme */
.light-dark-demo {
    background-color: #ffec99
}

/* applied in dark color-scheme */
 [data-mantine-color-scheme='dark'] .light-dark-demo {
     background-color: #ff6b6b
}



/*
You can also use mantine colors

.light-dark-demo {
    background-color: var(--mantine-color-blue-1)
}

[data-mantine-color-scheme='dark'] .light-dark-demo {
     background-color:  var(--mantine-color-blue-1)
*/
```


#### CSS Variables for Light/Dark Mode

Defining CSS variables on the `:root` element allows global styling across your app, including the `body` element.

Here is an example using a CSS variable:

```python
import dash_mantine_components as dmc

component = dmc.Box([

    dmc.Text(
        "Click the theme switch in the header to see how the background changes in different modes:"
    ),
    dmc.Text(
        "CSS variable defined for light and dark scheme",
        style={"backgroundColor": "var(--my-light-dark-colors"},
        p="lg",
        m="md"
    ),
])
```

```css

:root {
  --my-light-dark-colors: aliceblue;
}

:root[data-mantine-color-scheme="dark"] {
  --my-light-dark-colors: blue;
}

/*
You can also use mantine colors

:root {
  --my-light-dark-colors: var(--mantine-color-blue-1);
}

:root[data-mantine-color-scheme="dark"] {
  --my-light-dark-colors: var(--mantine-color-blue-1);
}
*/


/*
The  --mantine-color-body CSS variable is used for body background and as background color
 of some components (Modal, Paper, etc.).  You can change it like this:

:root {
  --mantine-color-body: #f9f9f9;
}

:root[data-mantine-color-scheme="dark"] {
  --mantine-color-body: #333;
}


*/
```


### Default colors


```python
import dash_mantine_components as dmc

colors = dmc.DEFAULT_THEME["colors"]

component= dmc.SimpleGrid([
    dmc.Card([
        dmc.Box(h=100, w=100, bg=f"{c}.{i}" ),
        dmc.Text(f"{c} {i}", size="sm"),
        dmc.Text(f"{colors[c][i]}", size="sm", c="dimmed")
    ])  for c in list(colors) for i in range(10)
], cols={ "base": 5,  "lg": 10 }, spacing="xs")
```
### Default colors: CSS Variables list

For a list of all Mantine CSS variables that are generated from default theme, see the [CSS Variables](/css-variables/) section.

## MantineProvider  
Use MantineProvider component to manage themes in your app globally.  
Category: Theming  

Wrap your `app.layout` with a single `MantineProvider` to enable theming and styling features across your app. There should only be one `MantineProvider` in your app.

The `MantineProvider`:

1. Sets the global theme, including colors, spacing, and fonts.
2. Handles light and dark mode toggling.
3. Provides Mantine CSS variables according to the selected theme.

### Usage

Your app must be wrapped inside a MantineProvider, and it must be used only once.

```python
import dash_mantine_components as dmc

app.layout = dmc.MantineProvider(
    theme = {...},
    children={...}
)
```


### theme

Use the `theme` prop to customize the Mantine theme. The theme is merged with the default Mantine theme and is available to all DMC components.

See the [Theme Object](/theme-object) section to learn how to customize the default Mantine theme.

For example, you can change the default font and primary color:

```python
import dash_mantine_components as dmc

theme = {
    "fontFamily": "Open Sans, sans-serif",
    "primaryColor": "cyan",
}

app.layout = dmc.MantineProvider(
    theme=theme,
    children=dmc.Text("Hello")
)
```

See the [Mantine theme documentation](https://mantine.dev/llms/theming-theme-object.md) for the available theme options.


### Light and Dark Color Schemes
Mantine supports both light and dark color schemes.  The default color scheme is "light".
When the `MantineProvider` is added to your app, it automatically sets the `data-mantine-color-scheme` attribute at the 
top level of the app. This attribute controls whether the app uses light or dark mode. All components in the app 
reference this attribute to decide which colors to apply.

You can change the color scheme with the `forceColorScheme` prop.

In the [Theme Switch Components](/theme-switch) section, learn how to add a component to allow users to select either light or dark mode.

```python
import dash_mantine_components as dmc

app.layout = dmc.MantineProvider(
    forceColorScheme="dark",
    theme = {...},
    children={...}
)
```



### cssVariablesSelector

`cssVariablesSelector` specifies the CSS selector to which Mantine CSS variables are added.

```python
dmc.MantineProvider(
    cssVariablesSelector="html",
    children=dmc.Text("Hello")
)
```

By default, Mantine variables are added to the root element.

### withCssVariables

`withCssVariables` determines whether Mantine CSS variables are generated. It defaults to `True`.

```python
dmc.MantineProvider(
    withCssVariables=False,
    children=dmc.Text("Hello")
)
```

You normally should not disable this option. If you do, you will need to provide the required CSS variables yourself.

### deduplicateCssVariables

`deduplicateCssVariables` determines whether CSS variables that have the same value as the default theme are omitted.

It defaults to `True`. Set it to `False` if you need all Mantine CSS variables to be generated.

```python
dmc.MantineProvider(
    deduplicateCssVariables=False,
    children=dmc.Text("Hello")
)
```

### classNamesPrefix

`classNamesPrefix` sets the prefix used for Mantine component static classes. The default is `"mantine"`.

```python
dmc.MantineProvider(
    classNamesPrefix="app",
    children=dmc.Text("Hello")
)
```

With the default prefix, a component such as `Text` has a static class such as `mantine-Text-root`. Setting `classNamesPrefix="app"` changes this to `app-Text-root`.

This only changes static component classes. It does not change Mantine's generated component classes or global utility classes.

### withStaticClasses

`withStaticClasses` determines whether Mantine component static classes are generated. It defaults to `True`.

```python
dmc.MantineProvider(
    withStaticClasses=False,
    children=dmc.Text("Hello")
)
```

Static classes are used by the Mantine Styles API and can also be useful when writing custom CSS.

### withGlobalClasses

`withGlobalClasses` determines whether Mantine global utility classes are generated. It defaults to `True`.

Global classes are required for features such as `hiddenFrom`, `visibleFrom`, `lightHidden`, and `darkHidden`.

```python
dmc.MantineProvider(
    withGlobalClasses=False,
    children=dmc.Text("Hello")
)
```

You normally should not disable this option because some Mantine components and style props depend on the global classes.

### deduplicateInlineStyles

`deduplicateInlineStyles` enables React 19 style tag deduplication for responsive style props.

When enabled, components that use identical responsive style props can share a single generated `<style>` tag instead of each generating their own.

```python
dmc.MantineProvider(
    deduplicateInlineStyles=True,
    children=dmc.Text("Hello")
)
```

This can improve performance when many components use the same responsive style values.

### cssVariablesResolver

`cssVariablesResolver` is a function that generates CSS variables based on the theme.

DMC supports functions as props using the `window.dashMantineFunctions` mechanism. For example, a function can be registered in JavaScript and then referenced from Python.

```python
dmc.MantineProvider(
    cssVariablesResolver={"function": "myCssVariablesResolver"},
    children=dmc.Text("Hello")
)
```

See the [Functions as Props](../advanced/functions-as-props) documentation for more information.

### useV8CssVariablesResolver

`useV8CssVariablesResolver` enables Mantine's v8 CSS variable resolver.

This option is provided for applications that need compatibility with the CSS variable behavior used by Mantine v8. It defaults to `False`.

```python
dmc.MantineProvider(
    useV8CssVariablesResolver=True,
    children=dmc.Text("Hello")
)
```

If both `useV8CssVariablesResolver` and `cssVariablesResolver` are specified, the explicitly provided `cssVariablesResolver` takes precedence.

This option is specific to DMC v3 and is not part of the Mantine `MantineProvider` API.


### Keyword Arguments


#### MantineProvider

- children (a list of or a singular dash component, string or number; optional):
    Your application.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- classNamesPrefix (string; optional):
    A prefix for components static classes (for example
    {selector}-Text-root), `mantine` by default.

- colorSchemeManager (dict; optional):
    Used to retrieve/set color scheme value in external storage, by
    default uses `window.localStorage`.

    `colorSchemeManager` is a dict with keys:

- cssVariablesResolver (dict; optional):
    Function to generate CSS variables based on theme object.

    `cssVariablesResolver` is a dict with keys:

- cssVariablesSelector (string; optional):
    CSS selector to which CSS variables should be added, by default
    variables are applied to `:root` and `:host`.

- deduplicateCssVariables (boolean; optional):
    Determines whether CSS variables should be deduplicated: if CSS
    variable has the same value as in default theme, it is not added
    in the runtime. @,default,True.

- deduplicateInlineStyles (boolean; optional):
    Determines whether inline styles with identical content should be
    deduplicated using React 19 style hoisting. When enabled,
    components with the same responsive style props share a single
    `<style />` tag instead of each generating their own.
    @,default,False.

- defaultColorScheme (a value equal to: 'light', 'dark', 'auto'; optional):
    Default color scheme value used when `colorSchemeManager` cannot
    retrieve value from external storage, `light` by default.

- env (a value equal to: 'default', 'test'; optional):
    Environment at which the provider is used, `'test'` environment
    disables all transitions and portals.

- forceColorScheme (a value equal to: 'light', 'dark'; optional):
    Forces color scheme value, if set, MantineProvider ignores
    `colorSchemeManager` and `defaultColorScheme`.

- getRootElement (boolean | number | string | dict | list; optional):
    Function to resolve root element to set
    `data-mantine-color-scheme` attribute, must return undefined on
    server, `() => document.documentElement` by default.

- getStyleNonce (boolean | number | string | dict | list; optional):
    getStyleNonce is a function to generate
    [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
    attribute added to dynamic generated `<style />` tags.

- stylesTransform (dict; optional):
    An object to transform `styles` and `sx` props into css classes,
    can be used with CSS-in-JS libraries.

    `stylesTransform` is a dict with keys:

- theme (list; optional):
    Theme override object.

- useV8CssVariablesResolver (boolean; optional):
    Whether to use the Mantine v8 CSS variables resolver for
    compatibility with Mantine v8.

- withCssVariables (boolean; optional):
    Determines whether theme CSS variables should be added to given
    `cssVariablesSelector` @,default,True.

- withGlobalClasses (boolean; optional):
    Determines whether global classes should be added with `<style />`
    tag. Global classes are required for `hiddenFrom`/`visibleFrom`
    and `lightHidden`/`darkHidden` props to work. @,default,True.

- withStaticClasses (boolean; optional):
    Determines whether components should have static classes, for
    example, `mantine-Button-root`. @,default,True.

## Plotly figure templates  
How to style Plotly figures with a Mantine theme.  
Category: Theming  

---

### Plotly Figure Template Basics

Plotly figure templates allow you to style your figures globally or per-figure. Templates include pre-defined color schemes, font styles, and layout configurations.

For more details, refer to the [Plotly templates documentation](https://plotly.com/python/templates/).

Below is an example using Plotly's built-in `plotly_white` and `plotly_dark` templates.  This is the same figure
styled for a light and dark theme.


```python
import dash_mantine_components as dmc
from dash import dcc
import plotly.express as px

df = px.data.gapminder()
dff = df[df.year == 2007]

component = dmc.SimpleGrid(
    [
        dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="plotly_white", title="plotly_white theme")),
        dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="plotly_dark", title="plotly_dark theme"))
    ],
    cols=2
)
```
### Mantine-Themed Plotly Templates

To make Plotly figures consistent with Mantine's default theme, Dash Mantine Components provides two custom Plotly templates:

- **`mantine_light`**: Based on `plotly_white` and styled with Mantine's light theme.  
- **`mantine_dark`**: Based on `plotly_dark` and styled with Mantine's dark theme.  

These templates are created and registered using the `add_figure_templates` function. They include:  
- Color palettes from Mantine’s theme.  
- Fonts (`Inter` by default).  
- Background and grid colors that match Mantine’s styles.  


```python
import dash_mantine_components as dmc
from dash import dcc
import plotly.express as px

df = px.data.gapminder()
dff = df[df.year == 2007]

dmc.add_figure_templates()


component = dmc.SimpleGrid(
    [
        dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="mantine_light", title="mantine_light theme" )),
        dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="mantine_dark",  title="mantine_dark theme"))
    ],
    cols=2
)
```
### Setting a Default Template
You can globally set either `mantine_light` or `mantine_dark` as the default Plotly template. This ensures all figures
use the specified template unless explicitly overridden.

```python
import dash_mantine_components as dmc

# Set "mantine_dark" as the default template
dmc.add_figure_templates(default="mantine_dark")
```


### Modifying Existing Plotly Templates
The `mantine_light` and `mantine_dark` templates can be customized like any other Plotly template. Refer to the
[Plotly templates documentation](https://plotly.com/python/templates/) for more info and examples.

```python
import plotly.io as pio
import plotly.express as px
import dash_mantine_components as dmc

dmc.add_figure_templates()

# Access the registered Mantine light template
template = pio.templates["mantine_light"]

# Reduce the margins in the template
template.layout.margin = dict(l=20, r=20, t=20, b=20)

fig = px.scatter(px.data.gapminder(), x="gdpPercap", y="lifeExp", template="mantine_light")



```

### Customizing `add_figure_templates` Function
The `add_figure_templates` function is available starting in DMC version 0.15.1.
If you are using an earlier version, or if you are using a custom Mantine theme, you can include your own `add_figure_templates` implementation in your project.

Example Project Structure:
```bash
my_project/  
├── app.py  
├── my_figure_templates.py  
```

In `my_figure_templates.py`:

Copy the `add_figure_templates` code from the [Dash Mantine Components GitHub](https://github.com/snehilvj/dash-mantine-components/blob/master/dash_mantine_components/figure_templates.py) 
repository and modify it to fit your project's requirements.

In `app.py`:
```python
from my_figure_templates import add_figure_templates

# Register custom templates
add_figure_templates()
```

In the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates_custom) you'll find a complete minimal example of a custom figure template with a green primary color.

### Using a Theme Switcher

To update the figure when switching themes, you need to change the Plotly template in a callback.


> For more information on adding a theme switcher to your app, check the [Theme Switch Component](/theme-switch) section.

The example below uses this app's  theme switch component in the callback.  Try it out by clicking the **theme switch** in the header!

See a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates_simple)

```python
import dash_mantine_components as dmc
from dash import dcc, Input, Output, callback
import plotly.express as px

df = px.data.gapminder()
dff = df[df.year == 2007]

dmc.add_figure_templates()

# Theme switch in the dmc-docs header:
# dmc.ColorSchemeToggle(
#     lightIcon=DashIconify(icon="radix-icons:sun", width=20),
#     darkIcon=DashIconify(icon="radix-icons:moon", width=20),
#     variant="light",
#     color="gray",
#     id="docs-color-scheme-switch",
# )
component = dcc.Graph(id="figure-templates-histogram")

@callback(
    Output("figure-templates-histogram", "figure"),
    Input("docs-color-scheme-switch", "computedColorScheme"),
)
def update_figure(color):
    template = "mantine_dark" if color=="dark" else "mantine_light"
    return px.bar(dff, x="continent", y="pop", title="Population by Continent", template=template)
```
For better performance, you can update the figure template using [Partial Property Updates.](https://dash.plotly.com/partial-properties)

Here is the callback updated to use `Patch` to change the figure template.  Note that when using `Patch` you must use the template
object rather than just the string name.  

```python

from dash import  Input, Output, callback, Patch
import plotly.io as pio


@callback(
    Output("figure-templates-bar", "figure"),
    Input("docs-color-scheme-switch", "computedColorScheme"),
)
def update_figure(color):
    # template must be template object rather than just the template string name
    template = pio.templates["mantine_dark"] if color=="dark" else pio.templates["mantine_light"]
    patched_fig = Patch()
    patched_fig["layout"]["template"] = template
    return patched_fig
```

### Updating multiple figures

To update multiple figure when switching themes, you can use [Pattern Matching Callbacks.](https://dash.plotly.com/pattern-matching-callbacks)
 
The example below uses this app's  theme switch component in the callback.  Try it out by clicking the **theme switch** in the header!

See a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates)

```python
import dash_mantine_components as dmc
from dash import  dcc, Input, Output, State, callback, Patch, ALL
import plotly.express as px
import plotly.io as pio

dmc.add_figure_templates(default="mantine_light")

df = px.data.gapminder()

line_fig = px.line(
    df.query("1952 <= year <= 1982 & continent != 'Asia'"),
    x="year",
    y="gdpPercap",
    color="continent",
    line_group="country"
)

dff = df[df.year == 2007]
scatter_fig = px.scatter(
    dff,
    x="gdpPercap",
    y="lifeExp",
    size="pop",
    color="continent",
    log_x=True,
    size_max=60,
    title=f"2007 GDP per Capita vs Life Expectancy, Sized by Population ",
)


avg_lifeExp = (dff["lifeExp"] * dff["pop"]).sum() / dff["pop"].sum()
map_fig = px.choropleth(
    dff,
    locations="iso_alpha",
    color="lifeExp",
    title="%.0f World Average Life Expectancy was %.1f years" % (2007, avg_lifeExp),
)

bar_fig = px.bar(dff, x="continent", y="pop", title="Population by Continent")

graphs = dmc.Grid(
    [
        dmc.GridCol(dcc.Graph(figure=bar_fig, id={"type": "graph", "index": "bar"}), span={"base": 12, "md":6}),
        dmc.GridCol(dcc.Graph(figure=scatter_fig, id={"type": "graph", "index": "scatter"}), span={"base": 12, "md":6}),
        dmc.GridCol(dcc.Graph(figure=line_fig, id={"type": "graph", "index": "line"}), span={"base": 12, "md":6}),
        dmc.GridCol(dcc.Graph(figure=map_fig, id={"type": "graph", "index": "map"}), span={"base": 12, "md":6}),
    ],
    gap="xl",
)

sample_controls = dmc.Box([
    dmc.Button("sample button"),
    dmc.Button("sample red button", color="red"),
    dmc.Button("sample yellow button", color="yellow"),
    dmc.Slider(value=25, my="lg"),
], w=600)

# used in the children prop of  MantinePovider([], id="m2d-mantine-provider)
component = dmc.Box([sample_controls, graphs])

@callback(
    Output({"type": "graph", "index": ALL}, "figure"),
    Input("docs-color-scheme-switch", "computedColorScheme"),
    State({"type": "graph", "index": ALL}, "id"),
)
def update_figure(color, ids):
    # template must be template object rather than just the template string name
    template = pio.templates["mantine_dark"] if color=="dark" else pio.templates["mantine_light"]
    patched_figures = []
    for i in ids:
        patched_fig = Patch()
        patched_fig["layout"]["template"] = template
        patched_figures.append(patched_fig)

    return patched_figures
```

## Theme Object  
Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.  
Category: Theming  

### Theme overview

Mantine’s default theme makes Dash apps look great in both light and dark modes. If you’re new to Dash Mantine Components,
start with the default theme. You can customize the theme globally by editing the `theme` prop in the `MantineProvider`.

The `theme` object is a dictionary where you can set things like colors, border radius, spacing, fonts, and breakpoints.
Mantine will merge your custom theme with the defaults, so you just need to provide what you want to change.

This example demonstrates how changing the `theme` updates the entire app’s appearance. Here, we change:
- Primary accent color
- Border radius
- Card shadow style
- Color scheme (light/dark)

Try it live: [DMC Theme Builder on Pycafe](https://py.cafe/app/dash.mantine.components/dash-mantine-theme-builder)

---

---


### Usage


```python
import dash_mantine_components as dmc

dmc.MantineProvider(
    theme={
        # add your colors
        "colors": {
             # add your colors
            "deepBlue": ["#E9EDFC", "#C1CCF6", "#99ABF0" "..."], # 10 colors
            # or replace default theme color
            "blue": ["#E9EDFC", "#C1CCF6", "#99ABF0" "..."],   # 10 colors
        },
        "shadows": {
            # other shadows (xs, sm, lg) will be merged from default theme
            "md": "1px 1px 3px rgba(0,0,0,.25)",
            "xl": "5px 5px 3px rgba(0,0,0,.25)",
        },
        "headings": {
            "fontFamily": "Roboto, sans-serif",
            "sizes": {
                "h1": {"fontSize": '30px'},
            },
        },
    },
    children=[
        # your app layout here
    ],
)
```


### Theme properties
You can find a complete list of all theme properties in the theme object in the references section at the bottom of the 
page. In the next section, we’ll focus on a few key properties to explain them in more detail.

#### Colors

See more information and examples in [Colors](/colors) section

- `colors` adds colors or over-rides named theme colors
- `primaryColor` sets the app's primary (default) accent color 
- `primaryShade` sets the app's primary shade in either light or dark mode

#### Typography

See more information and examples in [Typography](/typography) section

- `fontFamily` – controls font-family in all components except `Title`, `Code` and `Kbd`
- `fontFamilyMonospace` – controls font-family of components that require monospace font: `Code`, `Kbd` and `CodeHighlight`
- `headings.fontFamily` – controls font-family of h1-h6 tags in `Title`, fallbacks to `theme.fontFamily` if not defined
- `fontSizes` - defines the font-size from `xs` to `xl`
- `lineHeights` -defines `line-height` values for `Text` component, most other components use `theme.lineHeights.md` by default

#### Breakpoints

See more information and examples in [Responsive Styles](/responsive-styles) section

#### autoContrast
`autoContrast` controls whether text color should be changed based on the given color prop in the following components:

* `ActionIcon` with `variant='filled'` only
* `Alert` with `variant='filled'` only
* `Avatar` with `variant='filled'` only
* `Badge` with `variant='filled'` only
* `Button` with `variant='filled'` only
* `Chip` with `variant='filled'` only
* `NavLink` with `variant='filled'` only
* `ThemeIcon` with `variant='filled'` only
* `Checkbox` with `variant='filled'` only
* `Radio` with `variant='filled'` only
* `Tabs` with `variant='filled'` only
* `SegmentedControl`
* `Stepper`
* `Pagination`
* `Progress`
* `Indicator`
* `Timeline`
* `Spotlight`
* All dates components that are based on Calendar component

`autoContrast` checks whether the given color luminosity is above or below the `luminanceThreshold` value and changes text color to either `theme.white` or `theme.black` accordingly.

`autoContrast` can be set globally on the theme level or individually for each component via `autoContrast` prop, except for dates components which only support global theme setting.


```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Code("autoContrast=True"),
    dmc.Group(
        [
            dmc.Button("Lime.4 button", color="lime.4", autoContrast=True),
            dmc.Button("Blue.2 button", color="blue.2", autoContrast=True),
            dmc.Button("Orange.3 button", color="orange.3", autoContrast=True),
        ],
        mt="xs",
        mb="lg"
    ),
    dmc.Code("autoContrast=False"),
    dmc.Group(
        [
            dmc.Button("Lime.4 button", color="lime.4"),
            dmc.Button("Blue.2 button", color="blue.2"),
            dmc.Button("Orange.3 button", color="orange.3"),
        ],
        mt="xs"
    )
])
```
#### luminanceThreshold

`luminanceThreshold` controls which luminance value is used to determine if text color should be light or dark. It is 
used only if `theme.autoContrast` is set to `True`. Default value is 0.3.

See a live demo of `luminanceThreshold` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#luminancethreshold)

```python
dmc.MantineProvider(
    dmc.Group([
        dmc.Button("button", color=f"blue.{i}") for i in range(10)
    ]),
    theme={
        "luminanceThreshold": .45,
        "autoContrast": True
    }
)
```

#### focusRing
`theme.focusRing` controls focus ring styles, it supports the following values:

- 'auto' (default and recommended) – focus ring is visible only when the user navigates with keyboard, this is the default browser behavior for native interactive elements
- 'always' – focus ring is visible when user navigates with keyboard and mouse, for example, the focus ring will be visible when user clicks on a button
- 'never' – focus ring is always hidden, it is not recommended – users who navigate with keyboard will not have visual indication of the current focused element


See a live demo of `focusRing` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#focusring)

#### focusClassName

`theme.focusClassName` is a CSS class that is added to elements that have focus styles, for example, `Button` or 
`ActionIcon`. It can be used to customize focus ring styles of all interactive components except inputs. Note that when
`theme.focusClassName` is set, `theme.focusRing` is ignored.

See a live demo of `focusClassName` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#focusclassname)

```python
dmc.MantineProvider(
    dmc.Button("click button to see focus ring", m="lg"),
    theme={"focusClassName": "focus"}
)
```
Define the class in the `.css` file in `/assets` folder
```css

/* Use `&:focus` when you want focus ring to be visible when control is clicked */
.focus {
  &:focus {
    outline: 2px solid var(--mantine-color-red-filled);
    outline-offset: 3px;
  }
}
```


#### activeClassName
`theme.activeClassName` is a CSS class that is added to elements that have active styles, for example, `Button` or
`ActionIcon`. It can be used to customize active styles of all interactive components.

To disable active styles for all components, set `theme.activeClassName` to an empty string.


See a live demo of `activeClassName` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#activeclassname)

#### defaultRadius 

`theme.defaultRadius` controls the default border-radius property in most components, for example, `Button` or `TextInput`.
You can set to either one of the values from `theme.radius` or a number/string to use exact value. Note that numbers are
treated as pixels, but converted to rem. For example, `{'defaultRadius': 4}` will be converted to 0.25rem. You can learn
more about rem conversion in the [rem units guide](https://mantine.dev/styles/rem/).


See a live demo of `defaultRadius` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#defaultradius)

```python

dmc.MantineProvider(
    dmc.Box([
        dmc.Button("Button", m="sm"),
        dmc.TextInput(m="sm", label="TextInput with defaultRadius", placeholder="TextInput with default radius")
    ]),
    theme={"defaultRadius": "xl"},    
)
```

#### cursorType
`theme.cursorType` controls the default cursor type for interactive elements, that do not have cursor: pointer styles 
by default. For example, `Checkbox`.


See a live demo of `cursorType` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#cursortype)


```python
dmc.MantineProvider(
    dmc.Checkbox(label="Pointer cursor", mt="md"),
    theme={"cursorType": 'pointer'},    
)
```

#### defaultGradient
`theme.defaultGradient` controls the default gradient configuration for components that support `variant='gradient'`
(Button, ActionIcon, Badge, etc.).


See a live demo of `defaultGradient` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#defaultgradient)

```python
dmc.MantineProvider(
    dmc.Button("Button with custom default gradient", variant="gradient"),
    theme={
        "defaultGradient": {
            "from": 'orange',
            "to": 'red',
            "deg": 45,
          },
    }  
)
```
#### components defaultProps

Default props  

You can define default props for every Mantine component by setting `theme.components`. These props will be used by
default by all components of your application unless they are overridden by component props.

Note that Dash-specific props such as `persistence` and `debounce` are not supported in `theme.components` and must be
set directly on each component.

See a live demo of `defaultProps` in the [Mantine Docs](https://mantine.dev/theming/default-props/)


```python
dmc.MantineProvider(
    dmc.Group(
        [
            dmc.Button("Default button"),
            dmc.Button("Button with props", color="red", variant="filled"),
        ]
    ),
    theme={
        "components": {
            "Button": {
                "defaultProps": {
                    "color": "cyan",
                    "variant": "outline",
                },
            },
        },
    }
)
```

#### components custom variants

See how to add custom variants to `ActionIcon` and `Button` in the theme object, making these variants available globally
across your app. Detailed examples are provided in their respective documentation sections.  Also, see examples live:

- [Live Demo: Button Variants on PyCafe](https://py.cafe/dash.mantine.components/button-custom-variants-demo-0)  
- [Live Demo: ActionIcon Variants on PyCafe](https://py.cafe/dash.mantine.components/actionicon-custom-variants-demo)  

#### components custom sizes

See and example of adding custom sizes in the  [Checkbox](/components/checkbox) section.  Also see a live dome on PyCafe:

- [Live Demo: Checkbox Sizes PyCafe](https://py.cafe/dash.mantine.components/checkbox-custom-sizes-demo) 

#### other 

`theme.other` is an object that can be used to store any other properties that you want to access with the theme objects.

```python
dmc.MantineProvider(
    # your app layout,
    theme={
        "other": {
            "charcoal": "#333333",
            "primaryHeadingSize": 45,
            "fontWeights": {
                "bold": 700,
                "extraBold": 900,
            },
        },
    }
)
```


### Usage in DMC docs

MantineProvider is used to customize theme for these docs as well. The theming is more or less inline with below.

```python
import dash_mantine_components as dmc

app.layout = dmc.MantineProvider(
     forceColorScheme="light",
     theme={
         "primaryColor": "indigo",
         "fontFamily": "'Inter', sans-serif",
         "components": {
             "Button": {"defaultProps": {"fw": 400}},
             "Alert": {"styles": {"title": {"fontWeight": 500}}},
             "AvatarGroup": {"styles": {"truncated": {"fontWeight": 500}}},
             "Badge": {"styles": {"root": {"fontWeight": 500}}},
             "Progress": {"styles": {"label": {"fontWeight": 500}}},
             "RingProgress": {"styles": {"label": {"fontWeight": 500}}},
             "CodeHighlightTabs": {"styles": {"file": {"padding": 12}}},
             "Table": {
                 "defaultProps": {
                     "highlightOnHover": True,
                     "withTableBorder": True,
                     "verticalSpacing": "sm",
                     "horizontalSpacing": "md",
                 }
             },
         },
     },
     children=[
         # content
     ],
 )
```

### Default theme

Default theme is available as `dmc.DEFAULT_THEME`. It includes all theme properties with default values. 
When you pass theme override to MantineProvider, it will be deeply merged with the default theme.

### Theme Object Reference

| **Name**               | **Description**                                                                                                                                                                | **Type**                         |
|:-----------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------|
| `focusRing`            | Controls focus ring styles. Options: `auto` (default, shows when navigating with keyboard), `always` (shows for keyboard and mouse), `never` (always hidden, not recommended). | 'auto' or 'always' or 'never'    | 
| `scale`                | rem units scale, adjust if customizing `<html />` font-size. Default: `1` (16px font-size).                                                                                    | `number`                         |
| `fontSmoothing`        | Determines whether `font-smoothing` is applied to the body. Default: `true`.                                                                                                   | `boolean`                        |
| `white`                | Base white color. Example: `#ffffff`.                                                                                                                                          | `string`                         |
| `black`                | Base black color. Example: `#000000`.                                                                                                                                          | `string`                         |
| `colors`               | Object of colors, where each key is a color name, and each value is an array of at least 10 shades. Example: `colors.blue = ['#f0f8ff', '#add8e6', ...]`.                      | `object`                         |
| `primaryShade`         | Determines which shade of `colors.primary` is used. Options: `{light: 6, dark: 8}` (default) or a single number (e.g., `6` for both modes).                                    | `number or object`               |
| `primaryColor`         | Key of `theme.colors`. Determines the default primary color. Default: `blue`.                                                                                                  | `string`                         |
| `variantColorResolver` | Function to resolve colors for variants like `Button` and `ActionIcon`. Can be used for deep customization.                                                                    | `function`                       |
| `autoContrast`         | If `true`, adjusts text color for better contrast based on the background color. Default: `false`.                                                                             | `boolean`                        |
| `luminanceThreshold`   | Threshold for determining whether text should be light or dark when `autoContrast` is enabled. Default: `0.3`.                                                                 | `number`                         |
| `fontFamily`           | Font-family used in all components. Example: `'Arial, sans-serif'`.                                                                                                            | `string`                         |
| `fontFamilyMonospace`  | Monospace font-family used in code components. Example: `'Courier, monospace'`.                                                                                                | `string`                         |
| `headings`             | Controls heading styles. Includes `fontFamily`, `fontWeight`, `textWrap` (e.g., `'wrap'`, `'nowrap'`) and sizes for `h1` to `h6` (e.g., `{'fontSize': 32, 'lineHeight': 1.4}`). | `object`                         |
| `radius`               | Object defining border-radius values. Example: `{sm: 4, md: 8, lg: 16}`.                                                                                                       | `object`                         |
| `defaultRadius`        | Default border-radius used by most components. Example: `md`.                                                                                                                  | `string`                         |
| `spacing`              | Object defining spacing values (e.g., margins, padding). Example: `{xs: 4, sm: 8, md: 16, lg: 24}`.                                                                            | `object`                         |
| `fontSizes`            | Object defining font-size values. Example: `{xs: 12, sm: 14, md: 16, lg: 20}`.                                                                                                 | `object`                         |
| `lineHeights`          | Object defining line-height values. Example: `{xs: 1.2, sm: 1.4, md: 1.6}`.                                                                                                    | `object`                         |
| `breakpoints`          | Object defining responsive breakpoints (in em). Example: `{xs: 30, sm: 48, md: 64}` (for 480px, 768px, and 1024px respectively).                                               | `object`                         |
| `shadows`              | Object defining box-shadow values. Example: `{sm: '0px 1px 3px rgba(0, 0, 0, 0.2)', md: '0px 4px 6px rgba(0, 0, 0, 0.1)'}`.                                                    | `object`                         |
| `respectReducedMotion` | If `true`, respects OS reduce-motion settings. Default: `false`.                                                                                                               | `boolean`                        |
| `cursorType`           | Determines cursor style for interactive elements. Options: `'default'` or `'pointer'`. Default: `'default'`.                                                                   | `'default' or 'pointer'`         |
| `defaultGradient`      | Default gradient configuration. Example: `{'from': '#6a11cb', 'to': '#2575fc', 'deg': 45}`.                                                                                    | `object`                         |
| `activeClassName`      | CSS class applied to elements with active styles (e.g., `Button`).                                                                                                             | `string`                         |
| `focusClassName`       | CSS class applied to elements with focus styles (overrides `focusRing`).                                                                                                       | `string`                         |
| `components`           | Customizations for individual components (e.g., default props for `Button`).                                                                                                   | `object`                         |
| `other`                | User-defined custom properties for additional flexibility.                                                                                                                     | `object`                         |

## Theme Switch Components  
Examples of components to switch between light and dark modes  
Category: Theming  

### ColorSchemeToggle Component
For apps using DMC versions ≥ 2.6, it is recommended to use the [ColorSchemeToggle](/components/colorschemetoggle)  component.
It automatically switches between light and dark themes and persists the user’s selection in localStorage.

Copy this app to run it locally. For a live demo, click the ColorSchemeToggle in the header of these docs.

> The toggle handles theme switching internally and does not require a Dash callback.

For more information, see the  [ColorSchemeToggle](/components/colorschemetoggle) documentation.

```python
import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

component = dmc.ColorSchemeToggle(
    lightIcon=DashIconify(icon="radix-icons:sun", width=20),
    darkIcon=DashIconify(icon="radix-icons:moon", width=20),
    color="yellow",
    size="lg",
    m="xl",
)

app.layout = dmc.MantineProvider(component)

if __name__ == "__main__":
    app.run(debug=True)

```


### Mantine Light and dark themes

Mantine sets the light and dark color schemes using the `data-mantine-color-scheme` attribute on the `<html>` element.
This allows it to apply global styles dynamically based on the theme.

If you are not using the `ColorSchemeToggle` component, you can switch themes by setting the `data-mantine-color-scheme` in a clientside callback.


### Custom Theme Switch

This example shows how to use the `Switch` component with icon labels to create a theme switch component.   The `Switch`
is set with `persistence=True` to retain the selected theme even after a browser refresh.

Use this approach if you are on DMC < 2.6.0 or want a custom control (such as `Switch`, `SegmentedControl`, or `Button` etc.) 
instead of the `ActionIcon` used by `ColorSchemeToggle`.

Here is a complete minimal example:

```python

import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, Input, Output,  clientside_callback


theme_toggle = dmc.Switch(
    offLabel=DashIconify(icon="radix-icons:sun", width=15, color= "var(--mantine-color-yellow-8)"),
    onLabel=DashIconify(icon="radix-icons:moon", width=15, color= "var(--mantine-color-yellow-6)"),
    id="color-scheme-switch",
    persistence=True,
    color="grey",
)

app = Dash()

app.layout = dmc.MantineProvider(
    [theme_toggle, dmc.Text("Your page content")],
)

clientside_callback(
    """
    (switchOn) => {
       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');
       return window.dash_clientside.no_update
    }
    """,
    Output("color-scheme-switch", "id"),
    Input("color-scheme-switch", "checked"),
)


if __name__ == "__main__":
    app.run(debug=True)

```

## Typography  
How to set fonts, size and line height in the app theme  
Category: Theming  

### Change fonts

You can change fonts and other text styles for headings, code and all other components with the following theme properties:

- `theme.fontFamily` – controls font-family in all components except `Title`, `Code` and `Kbd`
- `theme.fontFamilyMonospace` – controls font-family of components that require monospace font: `Code`, `Kbd` and `CodeHighlight`
- `theme.headings.fontFamily` – controls font-family of h1-h6 tags in `Title`, fallbacks to `theme.fontFamily` if not defined

In this example, you can toggle between the default fonts and custom fonts specified in the `theme`.

```python
import dash_mantine_components as dmc
from dash import Dash, Input, Output


app = Dash()

component = dmc.Box([
    dmc.SegmentedControl(id="segment", data=["default", "custom-fonts"], value="default"),
    dmc.Box([
        dmc.Title("Greycliff CF title", order=3),
        dmc.Button("Verdana button"),
        dmc.Code("Monaco, Courier Code")
    ], bd=True, m="lg")
], m="lg")

theme= {
  "fontFamily": 'Verdana',
  "fontFamilyMonospace": 'Monaco, Courier, monospace',
  "headings": { "fontFamily": 'Greycliff CF' },
}

app.layout = dmc.MantineProvider(
    component,
    id="provider",
)

@app.callback(
    Output("provider", "theme"),
    Input("segment", "value")
)
def update_font_theme(val):
    if val == "default":
        return {}
    return theme


if __name__ == "__main__":
    app.run(debug=True)
```

### System fonts
By default, Mantine uses system fonts. It means that different devices will display components based on available font,
for example, macOS and iOS users will see San Francisco font, Windows users will see Segoe UI font, Android users will
see Roboto font and so on. This approach provides a familiar experience to the users and allows avoiding common problems 
related to custom fonts loading (layout shift, invisible text, etc.), if you do not have strict requirements, it is 
recommended to use system fonts for better performance.

Default values for theme properties:

- Default value for `theme.fontFamily` and `theme.headings.fontFamily` is `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji`
- Default value for `theme.fontFamilyMonospace` is `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`


### Font Sizes

Default `theme.fontSizes` Values

| Key | Value      | Value in px |
|-----|------------|-------------|
| xs  | 0.75rem    | 12px        |
| sm  | 0.875rem   | 14px        |
| md  | 1rem       | 16px        |
| lg  | 1.125rem   | 18px        |
| xl  | 1.25rem    | 20px        |

You can customize the `fontSizes` defaults in the `theme`: 
```python
theme = {
    "fontSizes" : {
        "xs": "0.75rem",            # customize font sizes here
        "sm": "0.875rem",
        "md": "1rem",
        "lg": "1.125rem",
        "xl": "1.25rem",
    }
}

dmc.MantineProvider(
    # your layout,
    theme=theme
)
```

### Line Heights

`theme.lineHeights` property defines line-height values for `Text` component, most other components use 
`theme.lineHeights.md` by default:

 Default `theme.lineHeights` Values


| Key | Value  |
|-----|--------|
| xs  | 1.4    |
| sm  | 1.45   |
| md  | 1.55   |
| lg  | 1.6    |
| xl  | 1.65   |

You can customize the `lineHeights` defaults in the `theme`:

```python
theme = {
    "lineHeights" : {
        "xs": "1.4",            # customize line heights here
        "sm": "1.45",
        "md": "1.55",
        "lg": "1.6",
        "xl": "1.65",
    }
}

dmc.MantineProvider(
    # your layout,
    theme=theme
)

```

### h1-h6 styles
To customize headings styles in `Title` components set `theme.headings`:

```python
import dash_mantine_components as dmc

theme = {
    "headings": {
        # Properties for all headings
        "fontWeight": "400",
        "fontFamily": "Roboto",
        # Properties for individual headings
        "sizes": {
            "h1": {
                "fontWeight": "100",
                "fontSize": "36px",
                "lineHeight": "1.4",
            },
            "h2": {
                "fontSize": "30px",
                "lineHeight": "1.5",
            },
            # Additional heading levels
            "h6": {
                "fontWeight": "900",
            },
        },
    },
}

dmc.MantineProvider(    
    # your app layout here,
    theme=theme,
)
```

With `theme.headings` you can customize `font-size`, `font-weight` and `line-height` per heading level. If you need
more control over styles, use `:is` selector with [Styles API](/styles-api) to target specific heading level:

You can find a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/blob/main/help_center/theme/change_headings.py)

```python

theme = {
    "components": {
        "Title": {
            "classNames": {
                "root": "change-heading-demo",
            },
        },
    },
}

dmc.MantineProvider(
    theme=theme,
    children=[
        dmc.Title("Heading 1", order=1),
        dmc.Title("Heading 2", order=2),
        dmc.Title("Heading 3", order=3),
        dmc.Title("Heading 4", order=4),
        dmc.Title("Heading 5", order=5),
        dmc.Title("Heading 6", order=6),
    ],
)
```

In a `.css` file in `/assets` folder add:

```css

.change-heading-demo {
  &:is(h1) {
    font-family: GreycliffCF, sans-serif;
    font-weight: 900;
  }

  &:is(h5, h6) {
    color: var(--mantine-color-dimmed);
  }
}

```

## Blockquote  
Use the Blockquote to display quotes with optional cite and icon.  
Category: Typography  

### Simple Example

A simple blockquote can be created by just passing the main message and `cite` prop.

```python
import dash_mantine_components as dmc

component = dmc.Blockquote(
    "Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth.",
    cite="- Marcus Aurelius , Meditations",
)
```
### Color, Radius, iconSize


### With Icon

Icons can be provided via `icon` prop and its color can be customized using the `color` prop.
Here's an example using [DashIconify](/dash-iconify).

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Blockquote(
    "Doth mother know you weareth her drapes?",
    cite="- Ironman",
    icon=DashIconify(icon="codicon:flame", width=30),
    color="red",
)
```
### Textwrap

Use the `textWrap` prop to control the `text-wrap` CSS property. For example, `balance` evens out line lengths and
`pretty` prevents orphaned words on the last line:

### 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-Blockquote-root  | Root element       |
| icon   | .mantine-Blockquote-icon  | Icon wrapper       |
| cite   | .mantine-Blockquote-cite  | Cite element       |


### Keyword Arguments
#### Blockquote

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- cite (a list of or a singular dash component, string or number; optional):
    Reference to a cited quote.

- 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, `theme.primaryColor`
    by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Blockquote icon, displayed on the top left.

- iconSize (string | number; optional):
    Controls icon `width` and `height`, numbers are converted to rem,
    `40` by default.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` 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.

- textWrap (a value equal to: 'wrap', 'nowrap', 'balance', 'pretty', 'stable'; optional):
    Controls `text-wrap` CSS property.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Code  
Use Code to display code without syntax highlighting.  
Category: Typography  

### Inline Code

```python
import dash_mantine_components as dmc

component = dmc.Code("app = Dash(__name__)")
```
### Block Code

```python
import dash_mantine_components as dmc

component = dmc.Code(
    """from dash import Dash
import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = dmc.Button("Settings")

if __name__ == "__main__":
    app.run_server(debug=True)""",
    block=True,
)
```
### Colors

```python
import dash_mantine_components as dmc

code = "import collections"

component = dmc.Group(
    children=[
        dmc.Code(code, color=color) for color in ["red", "blue", "green", "pink"]
    ],
)
```
### Syntax Highlighting

In case you need syntax highlight like in all code examples on this documentation, use [dmc.CodeHighlight](/components/code-highlight)
component.

### 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-Code-root | Root element                                  |


### Keyword Arguments
#### Code

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- block (boolean; optional):
    If set code will be rendered inside `pre`, `False` by default.

- 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, controls
    `background-color` of the code, by default value is calculated
    based on color scheme.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- 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.

- 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## CodeHighlight  
Use CodeHighlight component for highlighting code snippets with syntax highlighting for different languages like python, cpp, javascript, etc.  
Category: Typography  

### CSS Extensions

As of DMC 1.2.0, `CodeHightlight` component styles are bundled automatically, so you no longer need to include a separate CSS file.
If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets.



### Simple Usage

`CodeHighlight` highlight given code with [highlight.js](https://highlightjs.org/), it accepts `code` prop with string of
code to highlight and `language` prop with language name. If language is not provided, `CodeHighlight` will assume that
the code language is `tsx` (TypeScript).

`CodeHighlight` is used to show the code for all the examples in these docs.

```python
import dash_mantine_components as dmc

component = dmc.CodeHighlight(
    language="python",
    code="""# Kadane's Algorithm

class Solution:
    def maxSubArray(self, nums: List[int]) -> int:
        curr, summ = nums[0], nums[0]
        for n in nums[1:]:
            curr = max(n, curr + n)
            summ = max(summ, curr)
        return summ""",
)
```
### Supported Languages 

The `CodeHighlight` components supports syntax highlighting for the top 10 most commonly used languages:

* `python` / `py`
* `javascript` / `js`
* `typescript` / `ts`
* `html` / `xml`
* `css`
* `json`
* `yaml` / `yml`
* `bash` / `sh`
* `sql`
* `markdown` / `md`
* `plaintext`

If you set `language="some-unsupported-lang"`, the code will render with no syntax highlighting.

If you need support for a language not currently included, please open an issue on our [GitHub repository.](https://github.com/snehilvj/dash-mantine-components/issues)

### Copy button
You can customize copy button labels with `copyLabel` and `copiedLabel` props. In case you need to remove 
the copy button, set `withCopyButton=False`.


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.CodeHighlight(
        code = "dmc.Text('This codeblock has a custom copy button label')",
        language="python",
        copyLabel="Copy button code",
        copiedLabel="Copied!",
    ),
    dmc.CodeHighlight(
            code = "dmc.Text('This codeblock does not have a copy button')",
            language="python",
            withCopyButton=False,
            mt="md"
        )
])
```
### With tabs
`CodeHighlightTabs` component allows organizing multiple code blocks into tabs:

The `code` prop is a list of dictionaries, where each dictionary defines a tab. Each dictionary can include the following keys:

- `fileName`: The label for the tab.
- `code`: The code string to display in the tab.
- `language`: The programming language for syntax highlighting.
- `icon`: An optional component to display to the left of the fileName.


```python

code = [
    {
        "fileName": "demo.py",
        "code": demo_py, # your code string here
        "language": "python",
        "icon": DashIconify(icon="vscode-icons:file-type-python", width=20), 
    },
    {
        "fileName": "styles.css",
        "code":styles_css, # your code string here
        "language": "css",
        "icon": DashIconify(icon="vscode-icons:file-type-css", width=20), 
    },    
]

dmc.CodeHighlightTabs(code=code)

```

### Expandable code


Both `CodeHighlight` and `CodeHighlightTabs` support expandable code snippets. If the code is too long, use
`withExpandButton` and `defaultExpanded=False` to let users expand or collapse it.

To customize the expand/collapse control tooltips, use `expandCodeLabel` and `collapseCodeLabel`.


```python
dmc.CodeHighlightTabs(   # or dmc.CodeHighligh(
    code=code,
    withExpandButton=True,
    expandCodeLabel="Show full code",
    collapseCodeLabel="Show less",
    defaultExpanded=False
)
```

### Line Numbers

Set `withLineNumbers=True`  to display line numbers alongside the code:

```python
import dash_mantine_components as dmc

component = dmc.CodeHighlight(
    withLineNumbers=True,
    withExpandButton=True,
    defaultExpanded=False,
    language="python",
    code="""# Kadane's Algorithm

class Solution:
    def maxSubArray(self, nums: List[int]) -> int:
        curr, summ = nums[0], nums[0]
        for n in nums[1:]:
            curr = max(n, curr + n)
            summ = max(summ, curr)
        return summ""",
)
```
### Radius and Border

```python
import dash_mantine_components as dmc

component = dmc.CodeHighlight(
    radius="xl",
    withBorder=True,
    withExpandButton=True,
    expandCodeLabel="Show full code",
    collapseCodeLabel="Show less",
    defaultExpanded=False,
    language="python",

    code="""# Kadane's Algorithm

class Solution:
    def maxSubArray(self, nums: List[int]) -> int:
        curr, summ = nums[0], nums[0]
        for n in nums[1:]:
            curr = max(n, curr + n)
            summ = max(summ, curr)
        return summ""",
)
```
### Inline code

`InlineCodeHighlight` component allows highlighting inline code snippets:


```python
import dash_mantine_components as dmc

component = dmc.Text(
    [
        "You can highlight code inline ",
        dmc.InlineCodeHighlight(
            code='dmc.InlineCodeHighlight(code="Your code string here", language="python")',
            language="python",
        ),
        " Is not that cool?",
    ]
)
```
### 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.


#### CodeHighlight Selectors

| Selector | Static selector               | Description                          |
|----------|--------------------------------|--------------------------------------|
| root     | .mantine-CodeHighlight-root    | Root element                         |
| pre      | .mantine-CodeHighlight-pre     | Pre element, contains code element   |
| code     | .mantine-CodeHighlight-code    | Code element                         |
| copy     | .mantine-CodeHighlight-copy    | Copy button                          |



#### CodeHighlightTabs Selectors

| Selector      | Static selector                     | Description                                            |
|---------------|--------------------------------------|--------------------------------------------------------|
| root          | .mantine-CodeHighlightTabs-root      | Root element                                           |
| pre           | .mantine-CodeHighlightTabs-pre       | Pre element, contains code element                    |
| codeWrapper   | .mantine-CodeHighlightTabs-codeWrapper | Wrapper around code element, used for expand/collapse logic |
| code          | .mantine-CodeHighlightTabs-code      | Code element, contains highlighted code               |
| header        | .mantine-CodeHighlightTabs-header    | Header element, contains copy button and file names   |
| controls      | .mantine-CodeHighlightTabs-controls  | Controls container, contains control buttons (copy, collapse, etc.) |
| control       | .mantine-CodeHighlightTabs-control   | Control button (copy, collapse, etc.)                 |
| files         | .mantine-CodeHighlightTabs-files     | File names list                                       |
| file          | .mantine-CodeHighlightTabs-file      | File name                                             |
| fileIcon      | .mantine-CodeHighlightTabs-fileIcon  | File icon                                             |
| showCodeButton| .mantine-CodeHighlightTabs-showCodeButton | Button that reveals full code when it is collapsed |


#### InlineCodeHighlight Selectors

| Selector | Static selector                    | Description    |
|----------|-------------------------------------|----------------|
| code     | .mantine-InlineCodeHighlight-code   | Root element   |


### Keyword Arguments
#### CodeHighlight

- 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.

- 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.

- code (string; required):
    Code to highlight.

- collapseCodeLabel (string; optional):
    Label for collapse button default 'Collapse code'.

- copiedLabel (string; optional):
    Copied tooltip label, `'Copied'` by default.

- copyLabel (string; optional):
    Copy tooltip label, `'Copy code'` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- defaultExpanded (boolean; optional):
    Uncontrolled expanded default state.

- expandCodeLabel (string; optional):
    Label for expand button default 'Expand code'.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- highlightOnClient (boolean; optional):
    Determines whether code should be highlighted only after component
    is mounted to the dom (disables code highlight on server), `False`
    by default.

- language (string; optional):
    Code language, `'tsx'` by default.

- 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:

- maxCollapsedHeight (string | number; optional):
    Max height of collapsed state default 180px.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius
    default 0.

- 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withBorder (boolean; optional):
    Adds border to the root element default False.

- withCopyButton (boolean; optional):
    Determines whether copy button should be displayed, `True` by
    default.

- withExpandButton (boolean; optional):
    Determines whether the expand/collapse button should be displayed
    default False.

- withFirstLineIndentation (boolean; optional):
    If set, indentation of the first line of the code is preserved. By
    default, it is removed along with the rest of the leading and
    trailing whitespace. @,default,False.

- withLineNumbers (boolean; optional):
    Determines whether line numbers should be displayed
    @,default,False.
#### CodeHighlightTabs

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- activeTab (number; optional):
    Index of controlled active tab state.

- 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.

- 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.

- code (boolean | number | string | dict | list; required):
    Code to highlight with meta data (file name and icon).

- collapseCodeLabel (string; optional):
    Collapse button label and tooltip, `'Collapse code'` by default.

- copiedLabel (string; optional):
    Copied tooltip label, `'Copied'` by default.

- copyLabel (string; optional):
    Copy tooltip label, `'Copy code'` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- defaultExpanded (boolean; optional):
    Uncontrolled expanded state initial value.

- expandCodeLabel (string; optional):
    Expand button label and tooltip, `'Expand code'` 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:

- maxCollapsedHeight (string | number; optional):
    `max-height` of code in collapsed state.

- 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.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius
    default 0.

- 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withBorder (boolean; optional):
    Adds border to the root element default False.

- withCopyButton (boolean; optional):
    Determines whether copy button should be displayed, `True` by
    default.

- withExpandButton (boolean; optional):
    Determines whether to show the expand button, `False` by default.

- withFirstLineIndentation (boolean; optional):
    If set, indentation of the first line of the code is preserved. By
    default, it is removed along with the rest of the leading and
    trailing whitespace. default False.

- withHeader (boolean; optional):
    Determines whether header with file names and copy button should
    be rendered, `True` by default.

- withLineNumbers (boolean; optional):
    Determines whether line numbers should be displayed default False.
#### InlineCodeHighlight

- 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.

- 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.

- code (string; required):
    Code to highlight.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- language (string; optional):
    Code language, `'tsx'` by default.

- 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.

- 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Highlight  
Use the Highlight component to highlight a substring in a given string with mark tag.  
Category: Typography  

### Simple Example

Use the `Highlight` component to highlight substrings within text.

Pass the text as `children` and specify which substring(s) to highlight with the `highlight` prop. Matching is
case-insensitive and accent-insensitive by default, and highlights all occurrences of the matched substring.
Use the `caseInsensitive` and `accentInsensitive` props to opt out.


```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also this!", highlight="this"
)
```
### Matching behavior

* Case-insensitive: `"hello"` matches `"Hello"`, `"HELLO"`, `"hElLo"`, etc. Controlled by `caseInsensitive`, which defaults to `True`.
* Accent-insensitive: `"cafe"` matches `"café"`, `"cafè"`, `"CAFÉ"`, etc. Controlled by `accentInsensitive`, which defaults to `True`.
* All occurrences: Every instance of the matched substring is highlighted.
* Special characters: Regex special characters like `[`, `]`, `(`, and `)` are automatically escaped and treated as literal text.
* Whitespace: Leading and trailing whitespace in highlight strings is trimmed and ignored.
* Empty strings: Empty or whitespace-only highlight strings are ignored.

### Case-sensitive matching

Set `caseInsensitive=False` to only match substrings with the same casing as the highlight term:

```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Text(
        "With case-insensitive matching (default)",
        size="sm", c="dimmed",
    ),
    dmc.Highlight(
        "Highlight This, definitely THIS and also this!",
        highlight="this",
    ),
    dmc.Text(
        "With case-sensitive matching (caseInsensitive=False)",
        size="sm", c="dimmed", mt="lg",
    ),
    dmc.Highlight(
        "Highlight This, definitely THIS and also this!",
        highlight="this",
        caseInsensitive=False,
    ),
])
```
### Accent-sensitive matching

Set `accentInsensitive=False` to require accented characters in the text to match the highlight term exactly:

```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Text(
        "With accent-insensitive matching (default)",
        size="sm", c="dimmed",
    ),
    dmc.Highlight(
        "We visited café and cafe.",
         highlight="cafe",
    ),
    dmc.Text(
        "With accent-sensitive matching (accentInsensitive=False)",
        size="sm", c="dimmed", mt="lg",
    ),
    dmc.Highlight(
        "We visited café and cafe.",
        highlight="cafe",
        accentInsensitive=False,
    ),
])
```
### Highlight Multiple Strings

To highlight multiple substrings, provide a list of values.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also that!", highlight=["this", "that"]
)
```
### Custom colors per term

You can assign different colors to different highlighted terms by providing a list of dictionaries with `text` and `color` properties:


```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Error: Invalid input. Warning: Check this field. Success: All tests passed.",
    highlight=[
        {"text": "error", "color": "red"},
        {"text": "warning", "color": "yellow"},
        {"text": "success", "color": "green"},
    ],
)
```
### Whole word matching

Use the `wholeWord` prop to match only complete words. When enabled, `"the"` will not match `"there"` or `"theme"`:


```python
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Text(
        "With whole word matching (wholeWord=True)",
        size="sm", c="dimmed",
    ),
    dmc.Highlight(
        "The theme is there",
        highlight="the",
        wholeWord=True,
    ),
    dmc.Text(
        "Without whole word matching (default)",
        size="sm", c="dimmed", mt="lg",
    ),
    dmc.Highlight(
        "The theme is there",
        highlight="the",

    ),
])
```
### Change highlight styles

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "You can change styles of highlighted part if you do not like default styles",
    ta="center",
    highlight=["highlighted", "default"],
    highlightStyles={
        "backgroundImage": "linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5))",
        "fontWeight": 500,
        "WebkitBackgroundClip": "text",
        "WebkitTextFillColor": "transparent",
    },
)
```
### Colors

You can customize the highlight color with the `color` prop from one of colors in Mantine's theme.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also this!",
    highlight="this",
    color="lime",
)
```

### Text Props

Highlight component supports same props as Text component.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also this!",
    highlight="this",
    size="lg",
    c="green",
    color="yellow",
    ta="center",
)
```
### 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-Highlight-root | Root element |


### Keyword Arguments
#### Highlight

- children (string; required):
    String in which to highlight substrings.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- accentInsensitive (boolean; optional):
    Perform accent-insensitive matching. When enabled, cafe will match
    cafe, café, cafè, etc. default True.

- 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.

- caseInsensitive (boolean; optional):
    Perform case-insensitive matching. default True.

- 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 (string; optional):
    Default background color for all highlighted text. Key of
    `theme.colors` or any valid CSS color, passed to `Mark` component.
    Can be overridden per term when using HighlightTerm objects.
    default 'yellow'.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- highlight (boolean | number | string | dict | list; required):
    Substring(s) to highlight in `children`. Can be a string for a
    single term, a list of strings for multiple terms with the same
    color, or a list of dictionaries for multiple terms with custom
    colors.

- highlightStyles (dict; optional):
    Styles applied to `mark` elements.

    `highlightStyles` is a dict with keys:

- inherit (boolean; optional):
    Determines whether font properties should be inherited from the
    parent, `False` by default.

- inline (boolean; optional):
    Sets `line-height` to 1 for centering, `False` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lineClamp (number; optional):
    Number of lines after which Text will be truncated.

- 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.

- size (optional):
    Controls `font-size` and `line-height`, `'md'` by default.

- span (boolean; optional):
    Shorthand for `component="span"`, `False` by default, default
    root element is `p`.

- 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.

- textWrap (a value equal to: 'wrap', 'nowrap', 'balance', 'pretty', 'stable'; optional):
    Controls `text-wrap` CSS property.

- truncate (boolean; optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- wholeWord (boolean; optional):
    Only match whole words (adds word boundaries to regex). When
    enabled, 'the' will not match 'there'. default False.

## List  
Use List component to show ordered and unordered lists with icon support.  
Category: Typography  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.List(
    [
        dmc.ListItem(
            dmc.Text(
                [
                    "Join our ",
                    dmc.Anchor(
                        "Discord", href="https://discord.gg/KuJkh4Pyq5", underline="never"
                    ),
                    " Community.",
                ]
            )
        ),
        dmc.ListItem("Install python virtual environment."),
    ]
)
```
### Interactive Demo

### With Icons

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.List(
    icon=dmc.ThemeIcon(
        DashIconify(icon="radix-icons:check-circled", width=16),
        radius="xl",
        color="teal",
        size=24,
    ),
    size="sm",
    spacing="sm",
    children=[
        dmc.ListItem("Join our Discord Community."),
        dmc.ListItem("Install python virtual environment."),
        dmc.ListItem(
            dmc.Text(["Install npm dependencies with ", dmc.Code("npm install")])
        ),
        dmc.ListItem(
            dmc.Text(["Add your new component in ", dmc.Code("src/lib/components.")])
        ),
        dmc.ListItem(
            "Raise a PR, including an example to reproduce the changes contributed by the PR.",
            icon=dmc.ThemeIcon(
                DashIconify(icon="radix-icons:pie-chart", width=16),
                radius="xl",
                color="blue",
                size=24,
            ),
        ),
    ],
)
```
### Nested Lists

```python
import dash_mantine_components as dmc

component = dmc.List(
    [
        dmc.ListItem("First order item"),
        dmc.ListItem("First order item"),
        dmc.ListItem(
            [
                "First order item with list",
                dmc.List(
                    withPadding=True,
                    listStyleType="disc",
                    children=[
                        dmc.ListItem("Nested Item"),
                        dmc.ListItem("Nested Item"),
                        dmc.ListItem(
                            [
                                "Nested item with list",
                                dmc.List(
                                    withPadding=True,
                                    listStyleType="disc",
                                    children=[
                                        dmc.ListItem("Even more nested"),
                                        dmc.ListItem("Even more nested"),
                                    ],
                                ),
                            ]
                        ),
                        dmc.ListItem("Nested Item"),
                    ],
                ),
            ]
        ),
        dmc.ListItem("First order item"),
    ]
)
```
### Ordered List numbering
- Use the `start` prop to begin numbering from a specific value
- Use the `reversed` prop to create countdown lists:

```python
import dash_mantine_components as dmc

component = dmc.Box(
    [
        dmc.Text("Start from specific number:", c="dimmed"),
        dmc.List(
            [
                dmc.ListItem("This is item #5"),
                dmc.ListItem("This is item #6"),
                dmc.ListItem("This is item #7"),
                dmc.ListItem("This is item #8"),
            ],
            type="ordered",
            start=5,
        ),
        dmc.Text("Reversed numbering:", mt="lg", c="dimmed"),
        dmc.List(
            [
                dmc.ListItem("This is item #3"),
                dmc.ListItem("This is item #2"),
                dmc.ListItem("This is item #1"),
            ],
            type="ordered",
            reversed=True,
        ),
    ]
)
```
### 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-List-root        | Root element                                          |
| item        | .mantine-List-item        | ListItem root element                                 |
| itemIcon    | .mantine-List-itemIcon    | ListItem icon                                         |
| itemLabel   | .mantine-List-itemLabel   | ListItem content                                      |
| itemWrapper | .mantine-List-itemWrapper | ListItem wrapper element, container, icon and content |


### Keyword Arguments
#### List

- children (a list of or a singular dash component, string or number; optional):
    `List.Item` components only.

- 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.

- center (boolean; optional):
    Determines whether items must be centered with their icon, `False`
    by default.

- 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.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Icon that replaces list item dot.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- listStyleType (optional):
    Controls `list-style-type`, by default inferred from `type`.

- 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.

- reversed (boolean; optional):
    Reverses the order of list items (only works with
    type="ordered").

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls `font-size` and `line-height`, `'md'` by default.

- spacing (number; optional):
    Key of `theme.spacing` or any valid CSS value to set spacing
    between items, `0` by default.

- start (number; optional):
    Starting value for ordered list numbering (only works with
    type="ordered").

- 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.

- type (a value equal to: 'ordered', 'unordered'; optional):
    List type: `ol` or `ul`, `'unordered'` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withPadding (boolean; optional):
    Determines whether list items should be offset with padding,
    `False` by default.
#### ListItem

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Icon to replace item bullet.

- 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.

- 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Mark  
Use the Mark component to highlight part of the text.  
Category: Typography  

### Introduction

```python
import dash_mantine_components as dmc

component = dmc.Text(
    [
        "Thanks for checking out ",
        dmc.Mark("Dash Mantine Components."),
        " You are awesome!",
    ]
)
```
### Change color

```python
import dash_mantine_components as dmc

component = dmc.Text(
    ["Highlight ", dmc.Mark("this section", color="cyan"), " of the text."]
)
```
### 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-Mark-root | Root element                                     |


### Keyword Arguments
#### Mark

- children (string; optional):
    Content.

- 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.

- 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, `yellow` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- 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.

- 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.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Table  
Use the Table component to display tables with Mantine's theme styles. An alternative to html.Table  
Category: Typography  

> Looking for advanced table capabilities? [Dash AG Grid](/dash-ag-grid) pairs well with DMC and supports editing, sorting, filtering, selecting, conditional formatting and much more.

### Simple Example

Use Table component to add Mantine styled tables in your app. use `dmc.Table` and associated components as
drop-in replacements for `html.Table` and associated components respectively.

```python
import dash_mantine_components as dmc

elements = [
    {"position": 6, "mass": 12.011, "symbol": "C", "name": "Carbon"},
    {"position": 7, "mass": 14.007, "symbol": "N", "name": "Nitrogen"},
    {"position": 39, "mass": 88.906, "symbol": "Y", "name": "Yttrium"},
    {"position": 56, "mass": 137.33, "symbol": "Ba", "name": "Barium"},
    {"position": 58, "mass": 140.12, "symbol": "Ce", "name": "Cerium"},
]

rows = [
    dmc.TableTr(
        [
            dmc.TableTd(element["position"]),
            dmc.TableTd(element["name"]),
            dmc.TableTd(element["symbol"]),
            dmc.TableTd(element["mass"]),
        ]
    )
    for element in elements
]

head = dmc.TableThead(
    dmc.TableTr(
        [
            dmc.TableTh("Element Position"),
            dmc.TableTh("Element Name"),
            dmc.TableTh("Symbol"),
            dmc.TableTh("Atomic Mass"),
        ]
    )
)
body = dmc.TableTbody(rows)
caption = dmc.TableCaption("Some elements from periodic table")

component = dmc.Table([head, body, caption])
```
### data prop

You can use `data` prop to automatically generate table rows from raw data. 
`data` prop accepts an object with the following properties: `head`, `foot`, `body`, `caption`:

```python
import dash_mantine_components as dmc

component = dmc.Table(
    data={
        "caption": "Some elements from periodic table",
        "head": ["Element position", "Atomic mass", "Symbol", "Element name"],
        "body": [
            [6, 12.011, "C", "Carbon"],
            [7, 14.007, "N", "Nitrogen"],
            [39, 88.906, "Y", "Yttrium"],
            [56, 137.33, "Ba", "Barium"],
            [58, 140.12, "Ce", "Cerium"],
        ],
    }
)
```
### Spacing

To control spacing use `horizontalSpacing` and `verticalSpacing` props. Both props support spacing from Mantine's theme
and number values to set cell padding in px.


### Striped and Rows Hover


### Scroll container
To prevent viewport overflow wrap `Table` with `TableScrollContainer`. The component accepts `minWidth` prop which sets
minimum width below which table will be scrollable.

By default, `TableScrollContainer` uses `ScrollArea`, you can change it to native scrollbars by setting `type="native"`

You can also set `maxHeight` prop on `TableScrollContainer` to limit table height


```python
import dash_mantine_components as dmc
import random

rows = [
    [
        i + 1,
        f"S-{1000 + i}",
        round(random.uniform(15, 30), 1),   # Temperature °C
        round(random.uniform(30, 70), 1),   # Humidity %
    ]
    for i in range(50)
]

component = dmc.TableScrollContainer(
    dmc.Table(
        data={
            "caption": "Synthetic Sensor Readings",
            "head": ["#", "Sensor ID", "Temperature (°C)", "Humidity (%)"],
            "body": rows,
        },
        striped=True,
        highlightOnHover=True,
        withTableBorder=True,
    ),
    maxHeight=300,
    minWidth=600,
    type="scrollarea",
)
```
### Vertical variant
Set `variant="vertical"` to render table with vertical layout:



```python
import dash_mantine_components as dmc

component = dmc.Table(
    withTableBorder=True,
    layout="fixed",
    variant="vertical",
    children=[
        dmc.TableTbody([
            dmc.TableTr([
                dmc.TableTh("Epic name", w=160),
                dmc.TableTd("7.x migration"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Status"),
                dmc.TableTd("Open"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Total issues"),
                dmc.TableTd("135"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Total story points"),
                dmc.TableTd("874"),
            ]),
            dmc.TableTr([
                dmc.TableTh("Last updated at"),
                dmc.TableTd("September 26, 2024 17:41:26"),
            ]),
        ])
    ]
)
```
### tableProps


Use `tableProps` to pass additional [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) 
to the underlying elements of a dmc.Table, such as `<td>`, `<tr>`, or `<th>`. This is useful when you need to control
layout behavior like `rowSpan`, `colSpan`.

You can pass tableProps to components like:
```python
dmc.TableTd("Monday", tableProps={"rowSpan": 2})
```

This example also shows how to include other dash components in table cells.

```python
import dash_mantine_components as dmc

component = dmc.Table(
    withTableBorder=True,
    withColumnBorders=True,

    children=[
        dmc.TableThead(
            dmc.TableTr([
                dmc.TableTh("Day"),
                dmc.TableTh("Time"),
                dmc.TableTh("Topic"),
                dmc.TableTh("Action"),
            ])
        ),
        dmc.TableTbody([
            dmc.TableTr([
                dmc.TableTd("Monday", tableProps={"rowSpan": 2}),
                dmc.TableTd("9:00 - 10:00"),
                dmc.TableTd("Building Interactive Dashboards with Dash"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
            dmc.TableTr([
                dmc.TableTd("10:15 - 11:00"),
                dmc.TableTd("Advanced Callbacks and App Structure"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
            dmc.TableTr([
                dmc.TableTd("Tuesday", tableProps={"rowSpan": 2}),
                dmc.TableTd("9:00 - 10:00"),
                dmc.TableTd("Data Visualization with Plotly Express"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
            dmc.TableTr([
                dmc.TableTd("10:15 - 11:00"),
                dmc.TableTd("Deploying Dash Apps to the Web"),
                dmc.TableTd(dmc.Button("Details", size="xs", variant="light")),
            ]),
        ])
    ]
)
```
### 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.


#### Selectors

| Selector  | Static selector             | Description |
|-----------|-----------------------------|-------------|
| `table`   | `.mantine-Table-table`      | Root table element (Table component) |
| `thead`   | `.mantine-Table-thead`      | `<thead>` element (Table.Thead component) |
| `tbody`   | `.mantine-Table-tbody`      | `<tbody>` element (Table.Tbody component) |
| `tfoot`   | `.mantine-Table-tfoot`      | `<tfoot>` element (Table.Tfoot component) |
| `tr`      | `.mantine-Table-tr`         | `<tr>` element (Table.Tr component) |
| `th`      | `.mantine-Table-th`         | `<th>` element (Table.Th component) |
| `td`      | `.mantine-Table-td`         | `<td>` element (Table.Td component) |
| `caption` | `.mantine-Table-caption`    | `<caption>` element (Table.Caption component) |

#### CSS Variables

| Selector | Variable | Description |
|----------|----------|-------------|
| `table`  | `--table-border-color` | Controls border color of all elements inside table |
| `table`  | `--table-layout` | Controls `table-layout` of the table element, `auto` by default |
| `table`  | `--table-caption-side` | Controls `caption-side` of the table element, `bottom` by default |
| `table`  | `--table-horizontal-spacing` | Controls `padding-left` and `padding-right` of Table.Th and Table.Td elements |
| `table`  | `--table-vertical-spacing` | Controls `padding-top` and `padding-bottom` of Table.Td and Table.Th elements |
| `table`  | `--table-striped-color` | Controls `background-color` of even/odd Table.Tr elements |
| `table`  | `--table-highlight-on-hover-color` | Controls `background-color` of Table.Tr elements when hovered |
| `table`  | `--table-sticky-header-offset` | Controls top offset of sticky header |

#### Data Attributes

| Selector | Attribute | Condition | Value |
|----------|-----------|------------|-------|
| `table`  | `data-with-table-border` | `withTableBorder` prop is set on Table component | – |
| `th`, `td` | `data-with-column-border` | `withColumnsBorder` prop is set on Table component | – |
| `tr`      | `data-with-row-border` | `withRowsBorder` prop is set on Table component | – |
| `tr`      | `data-striped` | `striped` prop is set on Table component | `odd` \| `even` |
| `tr`      | `data-hover` | `highlightOnHover` prop is set on Table component | – |
| `tr`      | `data-size` | – | Value of `captionSize` prop on Table component |


### Keyword Arguments
#### Table

- children (a list of or a singular dash component, string or number; optional):
    Headers, rows and footer.

- 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.

- borderColor (optional):
    Color of table borders, key of `theme.colors` or any valid CSS
    color.

- captionSide (a value equal to: 'top', 'bottom'; optional):
    Determines on which side `Table.Caption` is displayed, `bottom` by
    default.

- 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.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data (dict; optional):
    Data that should be used to generate table, ignored if `children`
    prop is set.

    `data` is a dict with keys:

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- highlightOnHover (boolean; optional):
    Determines whether table rows background should change to
    `highlightOnHoverColor` when hovered, `False` by default.

- highlightOnHoverColor (optional):
    Background color of table rows when hovered, key of `theme.colors`
    or any valid CSS color.

- horizontalSpacing (number; optional):
    Horizontal cells spacing, key of `theme.spacing` or any valid CSS
    value for padding, numbers are converted to rem, default value is
    `xs`.

- layout (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'fixed'; optional):
    Value of `table-layout` style, `auto` by default.

- 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.

- stickyHeader (boolean; optional):
    Determines whether `Table.Thead` should be sticky, `False` by
    default.

- stickyHeaderOffset (string | number; optional):
    Offset from top at which `Table.Thead` should become sticky, `0`
    by default.

- striped (boolean; optional):
    Determines whether every odd/even row background should be changed
    to `strippedColor`, if set to `True`, then `odd` value will be
    used, `False` by default.

- stripedColor (optional):
    Background color of striped rows, key of `theme.colors` or any
    valid CSS color.

- 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.

- tabularNums (boolean; optional):
    Determines whether `font-variant-numeric: tabular-nums` style
    should be set, `False` by default.

- variant (a value equal to: 'default', 'vertical'; optional):
    variant 'default' | 'vertical'.

- verticalSpacing (number; optional):
    Vertical cells spacing, key of `theme.spacing` or any valid CSS
    value for padding, numbers are converted to rem, default value is
    `xs`.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withColumnBorders (boolean; optional):
    Determines whether the table should have borders between columns,
    `False` by default.

- withRowBorders (boolean; optional):
    Determines whether the table should have borders between rows,
    `True` by default.

- withTableBorder (boolean; optional):
    Determines whether the table should have outer border, `False` by
    default.
#### TableScrollContainer

- children (a list of or a singular dash component, string or number; optional):
    Content rendered inside the scroll container.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- className (string; optional):
    Class added to the root element, if applicable.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- 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:

- maxHeight (string | number; optional):
    `max-height` of the `Table` at which it should become scrollable.

- minWidth (string | number; required):
    `min-width` of the `Table` at which it should become scrollable.

- 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.

- scrollAreaProps (dict; optional):
    Props passed down to `ScrollArea` component, not applicable with
    `type="native"`.

    `scrollAreaProps` is a dict with keys:

- tabIndex (number; optional):
    tab-index.

- type (a value equal to: 'native', 'scrollarea'; optional):
    Type of the scroll container, `native` to use native scrollbars,
    `scrollarea` to use `ScrollArea` component, `scrollarea` by
    default.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Text  
Use the Text component to display text and links with Mantine's theme styles.  
Category: Typography  

### Usage

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Text("Extra small text", size="xs"),
        dmc.Text("Small text", size="sm"),
        dmc.Text("Default text", size="md"),
        dmc.Text("Large text", size="lg"),
        dmc.Text("Extra large text", size="xl"),
        dmc.Text("Semi bold", fw=500),
        dmc.Text("Bold", fw=700),
        dmc.Text("Underlined", td="underline"),
        dmc.Text("Red text", c="red"),
        dmc.Text("Blue text", c="blue"),
        dmc.Text("Gray text", c="gray"),
        dmc.Text("Uppercase", tt="uppercase"),
        dmc.Text("capitalized text", tt="capitalize"),
        dmc.Text("Aligned to center", ta="center"),
        dmc.Text("Aligned to right", ta="right"),
    ]
)
```
### Dimmed Text

Text supports special dimmed value in `color` prop. It sets color to theme.colors.dark[2] in dark theme and to 
theme.colors.gray[6] in light.

```python
import dash_mantine_components as dmc

component = dmc.Text("Dimmed text", c="dimmed")
```
### Gradient

```python
import dash_mantine_components as dmc

component = dmc.Center(
    children=[
        dmc.Text(
            "Indigo cyan gradient",
            variant="gradient",
            gradient={"from": "red", "to": "yellow", "deg": 45},
            style={"fontSize": 40},
        )
    ]
)
```
### Truncate

Set `truncate` prop to add `text-overflow: ellipsis styles`:

```python
import dash_mantine_components as dmc

content = """
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id
necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam
perspiciatis excepturi iste sint itaque sunt laborum. Nihil?
"""

component = dmc.Box(
    [
        dmc.Title("truncate='end'", order=5),
        dmc.Text(content, truncate="end"),
        
        dmc.Title("truncate='start'", order=5, mt="lg"),
        dmc.Text(content, truncate="start"),
    ],
    w=300
)
```
### Lineclamp

Specify maximum number of lines with `lineClamp` prop. This option uses `-webkit-line-clamp` CSS property ([caniuse](https://caniuse.com/css-line-clamp)).
Note that `padding-bottom` cannot be set on text element:

### Text Wrap
Use the `textWrap` prop to control the `text-wrap` CSS property. For example, `balance` evens out line lengths and
`pretty` prevents orphaned words on the last line:

### Inherit styles

`Text` always applies `font-size`, `font-family` and `line-height` styles, but in some cases this is not a desired 
behavior. To force `Text` to inherit parent styles set `inherit` prop. For example, highlight part of `Title`:

```python
import dash_mantine_components as dmc

component = dmc.Title(
    children = [
        "Title in which you want to ",
        dmc.Text("highlight", span=True, c="blue", inherit=True),
        " something."
    ]
)
```
### span prop
The root element of `Text` is an HTML `p` component.  To change it to an HTML `span` set the `span` prop to True.


```python
import dash_mantine_components as dmc


component = dmc.Box([
    dmc.Text("These two Text components are inline elements ", span=True, bd="1px solid"),
    dmc.Text("and only take up as much space as needed", span=True,  bd="1px solid"),

    dmc.Divider(my="lg"),

    dmc.Text("These two Text components are block elements",  bd="1px solid"),
    dmc.Text("and take up the full width of their container.",  bd="1px solid")
])
```
### 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.


#### Text Selectors

| Selector | Static selector       | Description     |
|----------|-----------------------|-----------------|
| root     | .mantine-Text-root    | Root element    |

#### Text CSS Variables

| Selector | Variable               | Description                               |
|----------|------------------------|-------------------------------------------|
| root     | --text-fz              | Controls font-size property               |
|          | --text-lh              | Controls line-height property             |
|          | --text-gradient        | Text fill gradient                        |
|          | --text-line-clamp      | Number of lines that should be visible    |

#### Text Data Attributes

| Selector | Attribute       | Condition                          | Value                 |
|----------|----------------|------------------------------------|-----------------------|
| root     | data-truncate  | truncate prop is set               | Value of truncate prop |
| root     | data-line-clamp | lineClamp prop is a number         | –                     |
| root     | data-inline    | inline prop is set                 | –                     |
| root     | data-inherit   | inherit prop is set                | –                     |




### Keyword Arguments
#### Text

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- inherit (boolean; optional):
    Determines whether font properties should be inherited from the
    parent, `False` by default.

- inline (boolean; optional):
    Sets `line-height` to 1 for centering, `False` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lineClamp (number; optional):
    Number of lines after which Text will be truncated.

- 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.

- size (optional):
    Controls `font-size` and `line-height`, `'md'` by default.

- span (boolean; optional):
    Shorthand for `component="span"`, `False` by default, default
    root element is `p`.

- 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.

- textWrap (a value equal to: 'wrap', 'nowrap', 'balance', 'pretty', 'stable'; optional):
    Controls `text-wrap` CSS property.

- truncate (boolean; optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Title  
Use the Title component to render h1-h6 headings.  
Category: Typography  

### Simple Example

Use Title component to render h1-h6 headings with Mantine theme styles. By default, Title has no margins and paddings.
Pass the `order` prop to render specific element (h1-h6), default order is 1.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Title(f"This is h1 title", order=1),
        dmc.Title(f"This is h2 title", order=2),
        dmc.Title(f"This is h3 title", order=3),
        dmc.Title(f"This is h4 title", order=4),
        dmc.Title(f"This is h5 title", order=5),
        dmc.Title(f"This is h6 title", order=6),
    ]
)
```
### 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-Title-root | Root element                                     |


### Keyword Arguments
#### Title

- children (a list of or a singular dash component, string or number; optional):
    Content.

- 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.

- 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.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- 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`.

- lineClamp (number; optional):
    Number of lines after which Text will be truncated.

- 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.

- order (a value equal to: 1, 2, 3, 4, 5, 6; optional):
    Determines which tag will be used (h1-h6), controls `font-size`
    style if `size` prop is not set, `1` by default.

- size (string | number; optional):
    Changes title size, if not set, then size is controlled by `order`
    prop.

- 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.

- textWrap (a value equal to: 'wrap', 'nowrap', 'balance', 'pretty', 'stable'; optional):
    Controls `text-wrap` property, `'wrap'` by default.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## Typography  
Styles provider for html content  
Category: Typography  

### Basic usage

By default, Mantine does not include global typography styles. To apply consistent styling to your HTML content, wrap it in `Typography`.  

```python
dmc.Typography(
    html.H1("html components styled with a Mantine theme")
)
```

The styles applied to `Typography` children can be found in the [Mantine GitHub repository](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Typography/Typography.module.css).  

### Included Styles
`Typography` provides default styling for:  
- Headings (`h1`-`h6`)  
- Paragraphs (`p`)  
- Lists (`ul`, `ol`)  
- Blockquotes (`blockquote`)  
- Tables (`table`)  
- Links (`a`)  
- Images (`img`)  
- Horizontal rules (`hr`)  
- Keyboard inputs (`kbd`)  
- Code blocks (`code`, `pre`)  

### Using with Dash html Components

You can use `Typography` to apply Mantine's typography styles to Dash’s html components. Below is an example of styling a table:  

```python
from dash import  html
import dash_mantine_components as dmc
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])

component = html.Div(
    [
        html.Div([
            html.H4("Example without Typography"),
            generate_table(df),
        ], style={"marginBottom": 36}),

        dmc.Typography([
            html.H4("Example with Typography"),
            generate_table(df),
        ]),
    ]
)
```
### Using with dcc.Markdown

If you are rendering content from the [RichTextEditor](/components/richtexteditor) in `dcc.Markdown`, you can wrap it in `Typography` to ensure it adopts Mantine’s typography styles.  

```python
from dash import  dcc
import dash_mantine_components as dmc


# Content from the RichTextEditor example.
content = """<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>"""

component = dmc.Typography(
    dcc.Markdown(content, dangerously_allow_html=True, id="default"),
)
```