# 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://mantine.dev/) React library.
>
> This documentation applies to **DMC v2**, which wraps **Mantine v8**.  
> For additional details about underlying component behavior and styling, refer to the Mantine documentation: https://mantine.dev/
>
> The following sections describe DMC components, their props, usage examples in Python Dash, and relevant style and theme APIs.  
> All examples use Python Dash syntax. JavaScript or CSS examples may also be included where appropriate.
>
> Assume the reader is a Dash developer familiar with callbacks and layout, but not necessarily with Mantine.

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



## Getting Started  
Dash Mantine Components (DMC) integrates the Mantine UI library with Dash, making it easy to create modern, responsive, and highly customizable applications—right out of the box.  
Category:   

### Installation

```bash
pip install dash-mantine-components
```

```bash
poetry add dash-mantine-components
```

### Basic Usage

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


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

#### Using Dash 2.x?
You must set React to version 18.2.0:
```python
# required for dash 2.x
import dash
dash._dash_renderer._set_react_version("18.2.0")
```

#### Using DMC < 1.2.0?

If you are using DMC < 1.2.0 it is required to include additional stylesheets for certain components. See the
[migration guide](/migration) for more information.

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

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

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

`llms.txt` documentation is updated with every DMC release.


### Complete Documentation

Full DMC documentation following the [LLMs.txt](https://llmstxt.org/) standard (~1.6MB)

* [View DMC llms.txt online](https://www.dash-mantine-components.com/assets/llms.txt)
* [Download](https://www.dash-mantine-components.com/assets/llms.txt)

You can also find the upstream Mantine LLMs documentation:
* [View Mantine llms.txt online](https://mantine.dev/llms.txt)

### Usage with AI Tools

#### Cursor

In Cursor, you can reference the documentation using the `@Docs` feature:

1. Type `@Docs` in your prompt
2. Reference the DMC documentation URL: `https://www.dash-mantine-components.com/assets/llms.txt`
3. Ask questions about DMC components, styling, or implementation

#### Windsurf

For Windsurf users:

1. Reference the documentation using `@https://www.dash-mantine-components.com/assets/llms.txt`
2. Or add it to your `.windsurfrules` file for persistent access

#### ChatGPT & Claude

When using ChatGPT or Claude:

1. Mention that you're using Dash Mantine Components v2
2. Reference the documentation URL: `https://www.dash-mantine-components.com/assets/llms.txt`
3. The AI will fetch and use the documentation to provide accurate answers

#### GitHub Copilot

While Copilot doesn't directly support external documentation, you can:

1. Include relevant documentation snippets in your comments
2. Reference component names and props accurately for better suggestions

### Example Prompts

Here are some example prompts you can use with AI tools:

* "Using Dash Mantine Components v2, how do I create a dark mode toggle?"
* "Show me how to use the AppShell component with a collapsible navbar"
* "How can I customize the theme colors in MantineProvider?"
* "How to align input with a button in a flex container?"

### Documentation Generation

The LLM documentation is automatically generated from our source files.

To ensure you have the latest documentation, we regenerate the llms.txt file with each release. The file follows the [LLMs.txt](https://llmstxt.org/) standard for better compatibility with AI tools.

### Contributing

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

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

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

## Notifications Migration Guide  
This page helps you migrate from the NotificationProvider to the NotificationContainer  
Category:   

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; 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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; 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

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

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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`.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## 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"},
    ],
)
```
### 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"}],
)
```
### 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.

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

- 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; optional):
    Props passed down to the `CartesianGrid` component.

- hiddenFrom (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; 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

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

- referenceLines (list of dicts; 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; optional):
    Props passed down to the `Tooltip` component.

- type (a value equal to: 'default', 'stacked', 'percent', 'split'; 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- 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; optional):
    Props passed down to the `XAxis` recharts component.

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

- yAxisProps (dict; 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"},
    ],
)
```
### 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"},
)
```
### 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.

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

- 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; optional):
    Props passed down to the `CartesianGrid` component.

- hiddenFrom (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; 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

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

- referenceLines (list of dicts; 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; 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 (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.

- 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; optional):
    Props passed down to the `XAxis` recharts component.

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

- yAxisProps (dict; 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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"},
    ]
)
```
### 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.

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

- 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; optional):
    Props passed down to the `CartesianGrid` component.

- hiddenFrom (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; 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- referenceLines (list of dicts; 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; 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 (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.

- 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; optional):
    Props passed down to the `XAxis` recharts component.

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

- yAxisProps (dict; 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" }
]

```
    

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

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

- 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

- withTooltip (boolean; optional):
    Determines whether the tooltip should be displayed when one of the
    section is hovered, `True` by default.

## 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"}],
)
```
### 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.

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

- 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; optional):
    Props passed down to the `CartesianGrid` component.

- hiddenFrom (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; 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

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

- referenceLines (list of dicts; 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; 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- 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; optional):
    Props passed down to the `XAxis` recharts component.

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

- yAxisProps (dict; 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" }
]
```

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

- 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 (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'; optional):
    Type of labels to display, `'value'` 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

- 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,
)


```


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

Example of passing props down to PolarRadiusAxis component:

```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,
    polarRadiusAxisProps={"angle": 30},
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
)
```
### 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)},
    ]
```
### 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          |


#### RadarChart CSS variables

| Selector         | Variable             | Description                                   |
|:-----------------|:---------------------|:----------------------------------------------|
| root             | --chart-grid-color   | Controls color of the chart grid              |
|                  | --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.

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

- gridColor (optional):
    Controls color of the grid lines. By default, color depends on the
    color scheme.

- hiddenFrom (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

- variant (string; optional):
    variant.

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

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

## 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"},
)
```
### 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"},
    ],
)
```
### 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.

- 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 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; optional):
    Props passed down to the `CartesianGrid` component.

- hiddenFrom (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; 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

- referenceLines (list of dicts; 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; 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 (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; optional):
    Props passed down to the `XAxis` recharts component.

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

- yAxisProps (dict; 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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).


### 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",
        ),
    ]
)
```
### 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,
)
```
### 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,
)
```
### Invalid State And Error


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 ""
```
### 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:

- 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 | list of strings; optional):
    Data displayed in the dropdown.

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

- debounce (number; 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.

- hiddenFrom (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_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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

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

- value (string; default ''):
    Controlled component value.

- variant (string; optional):
    variant.

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

- 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  

### Simple Example

MultiSelect component allows user to pick any number of option from the given data.
I 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:
* an array of strings - use when label and value are same.
* an array of dicts with `label` and `value` properties.
* an array 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,
)
```
### 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,
      })
    )
  );
};
```


### 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",
        ),
    ]
)
```
### 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",
        ),
    ]
)
```
### Invalid State And Error

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 ""
```
### 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;
  }
}
```



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

- 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 | list of strings; optional):
    Data used to generate options.

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

- debounce (number; 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.

- hiddenFrom (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

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

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

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

- value (list of strings; optional):
    Controlled component value.

- variant (string; optional):
    variant.

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

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

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


### 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:
* an array of strings - use when label and value are same.
* an array of dicts with `label` and `value` properties.
* an array 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,
)
```
### 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",
        ),
    ]
)
```
### 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.

 
### Invalid State And Error


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

- 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 | list of strings; optional):
    Data used to generate options.

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

- debounce (number; 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.

- hiddenFrom (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

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

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

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

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

- variant (string; optional):
    variant.

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

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

- 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  

### 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"]}
]
```

### 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,
)
```
### 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
      )
    )
  );
};
```


### 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",
        ),
    ]
)
```
### 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,
)
```
### 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:

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

- hiddenFrom (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

- selectFirstOptionOnChange (boolean; optional):
    Determines whether the first option should be selected when value
    changes, `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.

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

- value (list of strings; optional):
    Controlled component value.

- variant (string; optional):
    variant.

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

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.

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

This example uses `dash-ag-grid` v31.3.0. The grid theme is set with the `className` prop.

To apply a built-in theme:

* Light mode: `className="ag-theme-alpine"` (default)
* Dark mode: `className="ag-theme-alpine-dark"`

Switch between light and dark themes by updating the `className` prop in a callback.

For more details and a full list of built-in themes and how to customize the theme, see the [Dash AG Grid styling guide](https://dash.plotly.com/dash-ag-grid/styling-themes) or the [AG Grid v31.3 theme docs](https://www.ag-grid.com/archive/31.3.0/react-data-grid/themes/).

Click the theme switch in the top right of this page to see the grid theme update live.

```python
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="dag-simple"
)

@callback(
    Output("dag-simple", "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", "checked")
)
def update_theme(switch_on):
    return "ag-theme-alpine-dark" if switch_on 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", "checked")
)
def update_theme(switch_on):
    return "ag-theme-alpine-dark" if switch_on 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", "checked")
)
def update_theme(switch_on):
    return "ag-theme-alpine-dark" if switch_on 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 */
*[data-dash-is-loading="true"] {
    visibility: hidden;
    position: relative;
}
*[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                                                        |

## 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=dmc.DEFAULT_THEME["colors"]["blue"][6],
                        width=20,
                    ),
                ),
                dmc.AccordionPanel("some content"),
            ],
            value="info",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl(
                    "Shipping Address",
                    icon=DashIconify(
                        icon="tabler:map-pin",
                        color=dmc.DEFAULT_THEME["colors"]["red"][6],
                        width=20,
                    ),
                ),
                dmc.AccordionPanel("some content"),
            ],
            value="addr",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl(
                    "Confirmation",
                    icon=DashIconify(
                        icon="tabler:circle-check",
                        color=dmc.DEFAULT_THEME["colors"]["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"
```
### 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.

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

- loop (boolean; optional):
    Determines whether arrow key presses should loop though items
    (first to last and last to first), `True` by default.

- mod (string; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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,
)
```
### 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.Text(
            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",
            size="sm",
        ),
        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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 | number | string | dict | list; optional):
    Enables autoScroll with optional configuration.

- autoplay (boolean | number | string | dict | list; 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 indicator position. It is useful when Indicator component is used with children that have border-radius:

```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,
)
```
### 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 (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:

- mod (string; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- offset (number; optional):
    Indicator offset relative to the target element, usually used for
    elements with border-radius, equals to `size` by default.

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

- 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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; 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)],
)
```

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

- expanded (boolean; default False):
    Controlled expanded state value.

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

- hideLabel (a list of or a singular dash component, string or number; required):
    Label for close spoiler action.

- initialState (boolean; optional):
    Initial spoiler state, True to wrap content in spoiler, False to
    show content without spoiler, opened state is updated on mount.

- 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 the visible content, when this point is reached
    spoiler appears, `100` by default.

- mod (string; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- showLabel (a list of or a singular dash component, string or number; required):
    Label for open spoiler action.

- 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 0 or None to turn
    off animation, `200` by default.

- variant (string; optional):
    variant.

- visibleFrom (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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
)
```
### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

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

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

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

- hiddenFrom (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

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





## 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,
        ),
    ],
)
```
### 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
)
```
### 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:

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

- 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 (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_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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

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

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

## 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)}"
```
### 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")
```
### 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
from dash import Dash
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.


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

- 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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.

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

## DatePickerInput  
Date, multiple dates and dates range picker input. Helps you easily switch between different months, years along with locale support.  
Category: Date Pickers  

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

### 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
```
### 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,
        ),
    ],
)
```
### 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,
        ),
    ]
)
```
### Error Display

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 ""
```
### Localization

For information on setting locale, have a look at the [DatesProvider](/components/datesprovider) 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.



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

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

- 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- variant (string; optional):
    variant.

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

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

## DateTimePicker  
Capture datetime from the user  
Category: Date Pickers  

### DatePicker props
`DateTimePicker` supports most of the `DatePicker` props, read through `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}"
```
### With Seconds


```python
import dash_mantine_components as dmc

component = dmc.DateTimePicker(
    label="Pick date and time",
    placeholder="Pick date and time",
    withSeconds=True,
)
```
### TimePicker props
You can pass props down to the underlying `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 (Value Formatter)",
    placeholder="Pick date and time",
)
```
### 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",
)
```
### 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",
)
```
### 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:

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

- 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- timePickerProps (dict; optional):
    Props passed the TimePicker component.

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

- valueFormat (string; optional):
    Dayjs format to display input value, "DD/MM/YYYY HH:mm" by
    default.

- variant (string; optional):
    variant.

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

- withSeconds (boolean; optional):
    Determines whether seconds input should be rendered.

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

## 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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",
)
```
### 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",
)
```
### 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",
)
```
### 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,
)
```
### 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:

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

- 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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:

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

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

- variant (string; optional):
    variant.

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

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

## 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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; 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- value (string; default ''):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- 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
)
```
### 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
from dash import callback, Input, Output


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"}
)
```
### 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"
)
```
### Disabled

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


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.

### 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.TimePicker(label="Enter Time:", w=100, error=True),
        dmc.TimePicker(
            label="Enter Time:",
            w=150,
            error="Enter a valid time",
            withSeconds=True,
        ),
    ],
)
```
### 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.

- clearable (boolean; optional):
    Determines whether the clear button should be displayed, `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.

- debounce (number; 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- value (string; default ''):
    Value for controlled component.

- variant (string; optional):
    variant.

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

- 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",
)
```
### 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.

### 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",
)
```
### 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:

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

- 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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:

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

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

- variant (string; optional):
    variant.

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

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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"),
    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
                ),
            ],
        ),
    ],
)


@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
* `autoClose` – timeout in milliseconds to automatically close the notification. Set to `False` to disable.
* `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`


### 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
```
### 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),
    ]
)


@callback(
    Output("notification-container", "sendNotifications", allow_duplicate=True),
    Input("show-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_notifications(n):
    return [
        {
            "action": "show",
            "title": f"Notification {i + 1}",
            "message": "Most notifications are added to queue",
            "autoClose": False,
        }
        for i in range(10)
    ]


@callback(
    Output("notification-container", "cleanQueue"),
    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
```
### 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.

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

- 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- notificationMaxHeight (string | number; optional):
    Notification `max-height`, used for transitions, `200` by default.

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

## Overlay  
Overlays parent element with div element with any color and opacity  
Category: Feedback  

### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- zIndex (string | number; optional):
    Overlay z-index, `200` 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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"},
    ],
)
```

### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

- sections (list of dicts; required):
    Ring sections.

    `sections` is a list of dicts with keys:

- size (number; optional):
    Width and height of the progress ring.

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

- variant (string; optional):
    variant.

- visibleFrom (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 lib.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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- radius (string | 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 (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)
```
### 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")
])
```
### 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
```
### 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

- value (string; optional):
    To be used with checkbox group.

- variant (string; optional):
    variant.

- visibleFrom (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:
#### 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.

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

- mod (string | dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- value (list of strings; optional):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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; 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

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

- hiddenFrom (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- 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 (optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

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

- variant (string; optional):
    variant.

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

- 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; 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

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


### 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,
)
```
### 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; 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- suffix (string; optional):
    Suffix added after the input value.

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

- thousandSeparator (string; 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 (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.

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

### Invalid State and Error

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",
        ),
    ],
)
```
### 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"),
)
```
### 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; 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- visible (boolean; optional):
    Determines whether input content should be visible.

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

- 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  

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(), justify="center")
```
### 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")
```
### 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):
    Base id used for all inputs. By default, inputs' ids are generated
    randomly.

- 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 (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 (optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- type (optional):
    Determines which values can be entered, `'alphanumeric'` by
    default.

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

- variant (string; optional):
    variant.

- visibleFrom (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,
        ),
    ]
)
```
### 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

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

- variant (string; optional):
    variant.

- visibleFrom (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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)]),
    ]
)
```
### 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.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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.3.0 and later uses Tiptap v3.3.  There are no known breaking changes, but see the [Migration guilde](/migration) for details.
- Older versions of DMC used 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",   
        "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"]}}`)  

 **Important:** 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 list above that you need.

Additionally, 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).

### 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 available keyboard shortcuts and Markdown syntax where applicable.

```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 [TypographyStylesProvider](/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
 dmc.RichTextEditor(       
     extensions=[
         "StarterKit",
         {"Placeholder": {"placeholder": "Write something..."}},
         # other needed 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

The tables will be styles with a Mantine theme. For more information refer to the [TypographyStylesProvider](/components/typographystylesprovider) section.
You can disable these styles by setting `withTypographyStyles=False`

To add controls in the toolbar for table features, see the Custom Controls section below.

```python
import dash_mantine_components as dmc

table = """
    <table>
      <tbody>
        <tr>
          <th>Name</th>
          <th colspan="3">Description</th>
        </tr>
        <tr>
          <td>Cyndi Lauper</td>
          <td>Singer</td>
          <td>Songwriter</td>
          <td>Actress</td>
        </tr>
        <tr>
          <td>Bruce Springsteen</td>
          <td>Singer</td>
          <td>Songwriter</td>
          <td>Actor</td>
        </tr>
      </tbody>
    </table>
"""

component = dmc.RichTextEditor(
    html=table,
    extensions=[
        "StarterKit",
        "Table",
        "TableCell",
        "TableHeader",
        "TableRow",
    ],
)
```
### 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",
    ],
)
```
### 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.

### 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}"
```
### 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",
            ],
        ],
    },
)
```
### 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 

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

Note: FontSize is available in DMC>=2.3.0 which uses Tiptap v3.

```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}"
```
### 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']`.

### 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",
        "Underline",
        "Highlight",
    ],
    toolbar={
        "sticky": True,
        "stickyOffset": 60,
        "variant": "subtle",
        "controlsGroups": [
            [
                "Bold",
                "Italic",
                "Underline",
                "Strikethrough",
                "ClearFormatting",
                "Highlight",
                "Code",
            ],
        ],
    },
)
```
### 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`    | TypographyStylesProvider 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; 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.

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

- hiddenFrom (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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:
* an array of strings - use when label and value are same.
* an array of dicts with `label` and `value` properties (plus an optional `disabled` boolean).

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

# or

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

### Disabled

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

```python
import dash_mantine_components as dmc

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

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

```python
import dash_mantine_components as dmc

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

### Sizes

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

```python
import dash_mantine_components as dmc

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

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

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

```python
import dash_mantine_components as dmc

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

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

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

```python
import dash_mantine_components as dmc

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

### Transitions
Change transition properties with:

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

```python
import dash_mantine_components as dmc

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

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

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

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

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


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


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


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

### Keyword Arguments

#### SegmentedControl

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

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

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

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

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

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

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

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

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

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

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

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

- hiddenFrom (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

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

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

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

- persistence (string | number; 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 (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(
    [
        # Slider
        dmc.Slider(
            restrictToMarks=True,
            value=25,
            marks=[{"value": index * 25} for index in range(5)],
        ),
        # RangeSlider
        dmc.RangeSlider(
            restrictToMarks=True,
            value=[5, 15],
            marks=[
                {"value": 5},
                {"value": 15},
                {"value": 25},
                {"value": 35},
                {"value": 70},
                {"value": 80},
                {"value": 90},
            ],
        ),
    ]
)
```
### 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.



### 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"),
    ]
)
```
### Styling the Slider

The `Slider` component can be fully customized using Mantine's Styles API. Each element of the `Slider` - from the
thumb to the track markers - has its own unique selector that can be styled independently.

Try the [interactive example](https://mantine.dev/core/slider/#styles-api) in the upstream Mantine documentation to see
how these selectors correspond to different parts of the Slider component. Below, you'll find a comprehensive reference
of all available selectors, CSS variables, and data attributes.

Here is an example:
```python
import dash_mantine_components as dmc

component = dmc.Slider(
    value=79,
    marks=[
        {"value": 20, "label": "20%"},
        {"value": 50, "label": "50%"},
        {"value": 80, "label": "80%"},
    ],
    size=2,
    classNames={
        "track": "dmc-slider-track",
        "mark": "dmc-slider-mark",
        "markLabel": "dmc-slider-markLabel",
        "thumb": "dmc-slider-thumb",
    },
)
```

```css

.dmc-slider-track {
  &::before {
    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));
  }
}

.dmc-slider-mark {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  transform: translateX(-3px) translateY(-2px);
  border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));

  &[data-filled] {
    border-color: var(--mantine-color-blue-6);
  }
}

.dmc-slider-markLabel {
  font-size: var(--mantine-font-size-sm);
  color: var(--mantine-color-green-5);
  margin-bottom: 5px;
  margin-top: 0;
}

.dmc-slider-thumb {
  height: 16px;
  width: 16px;
  background-color: var(--mantine-color-green-5);
  border-width: 1px;
  box-shadow: var(--mantine-shadow-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.


#### 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 (optional):
    Breakpoint above which the component is hidden with `display:
    none`.

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

    `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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- name (string; optional):
    Hidden input name, use with uncontrolled component.

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

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

- 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 (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 (optional):
    Breakpoint above which the component is hidden with `display:
    none`.

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

    `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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- name (string; optional):
    Hidden input name, use with uncontrolled component.

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

- thumbSize (string | number; optional):
    Thumb `width` and `height`, by default value is computed based on
    `size` prop.

- thumbToLabel (string; optional):
    Second thumb `aria-label`.

- 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 (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=dmc.DEFAULT_THEME["colors"]["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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:

## TextInput  
Use TextInput component to capture string input from user. Customize the input with label, description, error message etc.  
Category: Inputs  

### Introduction

### Invalid State and Error

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"),
    ],
)
```
### 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; 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- value (string; default ''):
    Value for controlled input.

- variant (string; optional):
    variant.

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

- 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,
        ),
    ],
)
```
### Invalid State and Error

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!"),
    ],
)
```
### 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.

- 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; 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 (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_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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

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

- value (string; default ''):
    Content.

- variant (string; optional):
    variant.

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

- 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).  Or run the app and edit the code on **[PyCafe](https://py.cafe/dash.mantine.components)**.

 
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 PyCafe](https://py.cafe/dash.mantine.components/basic-appshell-collapsible-navbar)  

```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 PyCafe](https://py.cafe/dash.mantine.components/appshell-responsive-width-height)  

```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 PyCafe](https://py.cafe/dash.mantine.components/responsive-mobile-navbar-demo)  
   
```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 PyCafe](https://py.cafe/dash.mantine.components/Collapsible-navbar-on-both-desktop-and-moble)  

```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 PyCafe](https://py.cafe/dash.mantine.components/AppShell-with-all-elements) 

```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 PyCafe](https://py.cafe/dash.mantine.components/Appshell-with-scrollable-navbar)   

```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 PyCafe](https://py.cafe/dash.mantine.components/dash-alt-layout-appshell)    

```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 PyCafe](https://py.cafe/dash.mantine.components/dash-mantine-theme-toggle-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=dmc.DEFAULT_THEME["colors"]["yellow"][8]
    ),
    onLabel=DashIconify(
        icon="radix-icons:moon",
        width=15,
        color=dmc.DEFAULT_THEME["colors"]["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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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": f"1px solid {dmc.DEFAULT_THEME['colors']['indigo'][4]}",
    "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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (optional):
    `align-items` 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.

- columnGap (number; optional):
    `column-gap` CSS property.

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

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

- direction (optional):
    `flex-direction` CSS property.

- gap (number; optional):
    `gap` CSS property.

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

- justify (optional):
    `justify-content` CSS property.

- 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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- rowGap (number; optional):
    `row-gap` CSS property.

- 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- wrap (optional):
    `flex-wrap` CSS property.

## 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),
    ],
    gutter="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}),
    ],
)
```
### Gutter 

Set `gutter` 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 gutter based on
viewport width.  You can also set gutter 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),
    ],
    gutter={ "base": 5, "xs": "md", "md": "xl", "xl": 50 },
)
```
### 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),
    ],
    gutter="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),
    ],
    gutter="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"),
    ],
    gutter="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),
    ],
    gutter="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}),
        ],
        gutter="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.

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

- grow (boolean; optional):
    Determines whether columns in the last row should expand to fill
    all available space, `False` by default.

- gutter (number; optional):
    Gutter between columns, key of `theme.spacing` or any valid CSS
    value, `'md'` by default.

- hiddenFrom (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- overflow (optional):
    Sets `overflow` CSS property on the root element, `'visible'` 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 (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.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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

### 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- wrap (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'nowrap', 'wrap', '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](/compnents/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%"},
)
```
### 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.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

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

- visibleFrom (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 `spacing` 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 (number; optional):
    Key of `theme.spacing` or any valid CSS value to set `gap`
    property, numbers are converted to rem, `'md'` by default.

- hiddenFrom (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

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

- visibleFrom (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
```
### 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 (optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- keepMounted (boolean; optional):
    Keep element in DOM when collapsed, useful for nested collapses.

- 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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- opened (boolean; default False):
    Opened state.

- 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- orientation (a value equal to: 'horizontal', 'vertical'; 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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
        ),
    ),
)
```
### 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}
```
### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- offsetScrollbars (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 (optional):
    Axis at which scrollbars must be rendered, `'xy'` 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: '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.

- visibleFrom (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

- truncate (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 (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=False),
                dmc.Anchor("Dash Mantine Components", href="/", underline=False),
                dmc.Anchor(
                    "Breadcrumbs", href="/components/breadcrumbs", underline=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-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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

- separator (a list of or a singular dash component, string or number; optional):
    Separator between children, `'/'` by default.

- separatorMargin (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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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.  

*New in dash-mantine-components > = 1.0.0*  

Now, `active` can be set dynamically:  
- `"exact"` → Active when the current pathname matches `href`.  
- `"partial"` → Active when the current pathname starts with `href` (includes subpages).  

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
Here's a minimal multi-page app example using Pages. It demonstrates how `active="exact"` and `active="partial"`
automatically apply active styles based on the current URL

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

app = Dash(use_pages=True, pages_folder="")

dash.register_page("home", path="/", layout=html.Div("I'm home"))
dash.register_page("page1", path="/page-1", layout=html.Div("Info about page 1 subjects"))
dash.register_page("page1s1", path="/page-1/sub-1", layout=html.Div("page 1 subject 1"))
dash.register_page("page1s2", path="/page-1/sub-2", layout=html.Div("page 1 subject 2"))

component = dmc.Box([
    dmc.NavLink(label="home", href="/", active='exact'),
    dmc.NavLink(
            label="Page 1",
            childrenOffset=28,
            href="/page-1",
            active='partial',
            children=[
                dmc.NavLink(label="Subject 1", href="/page-1/sub-1", active="exact"),
                dmc.NavLink(label="Subject 2", href="/page-1/sub-2", active="exact"),
            ],
    ),
    dmc.Divider(mb="lg"),
    dash.page_container
])


app.layout = dmc.MantineProvider([component])

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 (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 (optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- href (string; optional):
    href.

- 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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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),
    ]
)
```
### 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}"
```
### 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.

- gap (number; optional):
    Key of `theme.spacing`, gap between controls, `8` by default.

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

- 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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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.

- 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 (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"),
    ],
)
```
### 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 (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.

- 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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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)

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


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

- 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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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; 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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, sets `data-size` if value is
    not number like.

- 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 (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)
```
### 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 */
  hasChildren: boolean;

  /** `true` if the node is selected */
  selected: boolean;

  /** 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;
    'data-hovered': boolean | undefined;
  };
}

```


### 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, label  | data-hovered   | The node is hovered    | –                      |
| 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.

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

- 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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

## 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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; 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; 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; 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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")),
            ],
        ),
    ]
)
```
### 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,
                    ),
                ]
            ),
        ],
    ),
)
```
### HoverCard Target

Any component you specify in dmc.HoverCardTarget 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.HoverCardTarget.

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

- clickOutsideEvents (list of strings; optional):
    Events that trigger outside clicks.

- closeDelay (number; optional):
    Close delay in ms.

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

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

- positionDependencies (list of boolean | number | string | dict | lists; optional):
    `useEffect` dependencies to force update dropdown position, `[]`
    by default.

- 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.
#### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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

```python

import dash_mantine_components as dmc


menu = dmc.Menu(
    width=200,
    position="bottom-start",
    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'; 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.

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

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

- positionDependencies (list of boolean | number | string | dict | lists; optional):
    `useEffect` dependencies to force update dropdown position, `[]`
    by default.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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, State, callback

component = html.Div(
    [
        dmc.Button("Open Modal", id="modal-demo-button"),
        dmc.Modal(
            title="New Modal",
            id="modal-simple",
            children=[
                dmc.Text("I am in a modal component."),
                dmc.Space(h=20),
                dmc.Group(
                    [
                        dmc.Button("Submit", id="modal-submit-button"),
                        dmc.Button(
                            "Close",
                            color="red",
                            variant="outline",
                            id="modal-close-button",
                        ),
                    ],
                    justify="flex-end",
                ),
            ],
        ),
    ]
)


@callback(
    Output("modal-simple", "opened"),
    Input("modal-demo-button", "n_clicks"),
    Input("modal-close-button", "n_clicks"),
    Input("modal-submit-button", "n_clicks"),
    State("modal-simple", "opened"),
    prevent_initial_call=True,
)
def modal_demo(nc1, nc2, nc3, opened):
    return not opened
```
### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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; 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; 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; 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

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

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

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

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

- positionDependencies (list of boolean | number | string | dict | lists; optional):
    `useEffect` dependencies to force update dropdown position, `[]`
    by default.

- 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

### 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,
        ),
    ]
)
```
### 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": f"2px solid {dmc.DEFAULT_THEME['colors']['gray'][5]}",
                    },
                )
            ],
        )
    ]
)
```
### 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'; 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 (optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- inline (boolean; optional):
    Must be set if the tooltip target is an inline element.

- 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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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).

- positionDependencies (list of boolean | number | string | dict | lists; optional):
    `useEffect` dependencies to force update tooltip position.

- 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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.

## 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 `TypographyStylesProvider` 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;
  }
}
```

## 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-{d}", 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": dmc.DEFAULT_THEME["colors"]["violet"][4]},
        "label": {
            "color": "blue",
            "backgroundColor": dmc.DEFAULT_THEME["colors"]["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 object

See the [Theme Object](/theme-object) section to learn how to customize the default Mantine theme`.


### Custom Colors

See the [Colors](/colors) section to learn how to customize the theme colors.

### 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 Componets](/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={...}
)
```

### 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, `:root` by
    default.

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

- defaultColorScheme (a value equal to: 'auto', 'dark', 'light'; 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: 'dark', 'light'; optional):
    Forces color scheme value, if set, MantineProvider ignores
    `colorSchemeManager` and `defaultColorScheme`.

- 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 (dict; optional):
    Theme override object.

    `theme` is a dict with keys:

- 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.Switch(
#     offLabel=DashIconify(icon="radix-icons:sun", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][8]),
#     onLabel=DashIconify(icon="radix-icons:moon", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][6]),
#     id="docs-color-scheme-switch",
#     persistence=True,
#     color="grey",
# )
component = dcc.Graph(id="figure-templates-histogram")

@callback(
    Output("figure-templates-histogram", "figure"),
    Input("docs-color-scheme-switch", "checked"),
)
def update_figure(switch_on):
    template = "mantine_dark" if switch_on 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", "checked"),
)
def update_figure(switch_on):
    # template must be template object rather than just the template string name
    template = pio.templates["mantine_dark"] if switch_on 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}),
    ],
    gutter="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", "checked"),
    State({"type": "graph", "index": ALL}, "id"),
)
def update_figure(switch_on, ids):
    # template must be template object rather than just the template string name
    template = pio.templates["mantine_dark"] if switch_on 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](/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.
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.

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  

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

To switch themes in a Dash app you can set the `data-mantine-color-scheme` in a clientside callback.

### Example 1 Theme Toggle

This example demonstrates how to toggle between light and dark modes using  `ActionIcon` as the theme switch component.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, Input, Output, clientside_callback, _dash_renderer
_dash_renderer._set_react_version("18.2.0")

theme_toggle = dmc.ActionIcon(
    [
        dmc.Paper(DashIconify(icon="radix-icons:sun", width=25), darkHidden=True),
        dmc.Paper(DashIconify(icon="radix-icons:moon", width=25), lightHidden=True),
    ],
    variant="transparent",
    color="yellow",
    id="color-scheme-toggle",
    size="lg",
)


component=dmc.Group([
    dmc.Text("Theme Switch Demo"),
    theme_toggle
])


clientside_callback(
    """
    (n) => {
        document.documentElement.setAttribute(
            'data-mantine-color-scheme',
            (n % 2) ? 'dark' : 'light'
        );
        return window.dash_clientside.no_update      
    }
    """,
    Output("color-scheme-toggle", "id"),
    Input("color-scheme-toggle", "n_clicks"),
)
```
### Example 2 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.

This is the theme switch used in these docs.  Click on the switch in the header to change themes.

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=dmc.DEFAULT_THEME["colors"]["yellow"][8]),
    onLabel=DashIconify(icon="radix-icons:moon", width=15, color=dmc.DEFAULT_THEME["colors"]["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",
)
```
### 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",
)
```
### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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`

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
If the code snippet is too long, you can make it expandable with `withExpandButton` and `defaultExpanded=False` props.
To change label of the expand/collapse control tooltip, use `expandCodeLabel` and `collapseCodeLabel`.

Note - the expandable code feature is only available in the  `CodeHighlightTabs` component.


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

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

- hiddenFrom (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; required):
    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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withCopyButton (boolean; optional):
    Determines whether copy button should be displayed, `True` by
    default.
#### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (optional):
    Breakpoint below which the component is hidden with `display:
    none`.

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

- withHeader (boolean; optional):
    Determines whether header with file names and copy button should
    be rendered, `True` by default.
#### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 Highlight component to highlight a substring in a given string with a mark tag.

Pass the main string as children to Highlight component and string part that should be highlighted to `highlight` prop. 
If the main string does not include `highlight` part, it will be ignored. 
`Highlight` ignores trailing whitespace and highlights all matched characters sequences.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also this!", highlight="this"
)
```
### 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",
)
```

### Highlight Multiple Strings

To highlight multiple substrings, provide an array of values.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also that!", highlight=["this", "that"]
)
```
### 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; 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 (string; optional):
    Key of `theme.colors` or any valid CSS color, passed to `Mark`
    component `color` prop, `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.

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

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

- highlight (string | list of strings; required):
    Substring or an array of substrings to highlight in `children`.

- highlightStyles (dict; optional):
    Styles applied to `mark` elements.  Note CSS properties are
    camelCase,  for example `highlightStyles={"backgroundColor":
    "blue"}`.

    `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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

- truncate (optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- variant (string; optional):
    variant.

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

## 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=False
                    ),
                    " 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"),
    ]
)
```
### 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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, falsy values are removed.

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

- 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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 (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 (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; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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 (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:

### 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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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.

- truncate (optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- variant (string; optional):
    variant.

- visibleFrom (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 (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 with strings as keys and values of type boolean | number | string | dict | list; optional):
    Element modifiers transformed into `data-` attributes, for
    example, `{ 'data-size': 'xl' }`, 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: 'nowrap', 'wrap', 'balance', 'pretty', 'stable'; optional):
    Controls `text-wrap` property, `'wrap'` by default.

- variant (string; optional):
    variant.

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

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

```python
dmc.TypographyStylesProvider(
    html.H1("html components styled with a Mantine theme")
)
```

The styles applied to `TypographyStylesProvider` 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
`TypographyStylesProvider` 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 `TypographyStylesProvider` 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 TypographyStylesProvider"),
            generate_table(df),
        ], style={"marginBottom": 36}),

        dmc.TypographyStylesProvider([
            html.H4("Example with TypographyStylesProvider"),
            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 `TypographyStylesProvider` 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.TypographyStylesProvider(
    dcc.Markdown(content, dangerously_allow_html=True, id="default"),
)
```