## InputWrapper  
Use InputWrapper to add label, description and error fields to custom inputs.  
Category: Inputs  

The `InputWrapper` component is built into all Dash Mantine input components, such as `TextInput`, `NumberInput`,
`Select`, `Chip`, and `Textarea`(and more!) **You do not need to wrap these components with `InputWrapper` as it’s already included.**  

Use `InputWrapper` when working with input components from other libraries, like `dash-core-components`, to ensure 
consistent styling of input components in your app.  

### Usage


### Custom TreeInput component

Here is an example of adding an `InputWapper` to the `Tree` component.

```python
import dash_mantine_components as dmc

from dash import Input, Output, callback


component =  dmc.InputWrapper(
    id="tree-wrapper",
    label="Tree input",
    description="This is a tree input",
    inputWrapperOrder=["label", "description", "error", "input"],
    withAsterisk=True,
    children=[
        dmc.Tree(
            id="tree",
            checkboxes=True,
            data=[
                {
                    "label": "root",
                    "value": "value",
                    "children": [
                        {"label": "child 1", "value": "child_1"},
                        {"label": "child 2", "value": "child_2"},
                    ],
                }
            ],
        )
    ],
)

@callback(
    Output("tree-wrapper", "error"),
    Input("tree", "checked"),
)
def validate(checked):
    tree_error = "Select at least one" if not checked else None
    return tree_error
```
###  Avoid Unnecessary `InputWrapper` Usage  

Most Mantine input components already include the `InputWrapper` internally, so you **should not** wrap them with `InputWrapper` yourself.  

Instead, check the reference section for built-in props like `label`, `description`, and `error`, and use these props directly.

**✅ Correct Usage: Use Component Props**
```python
dmc.Select(
    label="My label",
    description="My description"
)
```  

**❌ Incorrect Usage: Avoid Wrapping with `InputWrapper`**
```python
# don't do this
dmc.InputWrapper(
    label="My label",
    description="My description",
    children=dmc.Select(...)  
)
```  

### Accessibility

Note that DMC input components with built-in `InputWrapper` are more accessible. For example, their labels
are properly linked to inputs, making them screen-reader friendly and allowing users to focus the input by clicking
the label. This behavior does not apply when manually using `InputWrapper`.

It's possible to use the [htmlFor](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) prop to
link the `InputWrapper` `label` prop to the input in the `children` prop .  However, it works only in certain components
that are accessible.  

```python
from dash import dcc
import dash_mantine_components as dmc
# this is accessible  (but better to use a dmc input component instead)
dmc.InputWrapper(
    label="my-input",
    htmlFor="dcc-input",
    children=dcc.Input(id="dcc-input")
)

# the dcc.Dropdown is not accessible
dmc.InputWrapper(
    label="my-input",
    htmlFor="dcc-dropdown",
    children=dcc.Dropdown(id="dcc-dropdown")
)


```


### Styles API


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


#### Input Selectors

| Selector  | Static selector            | Description                    |
|-----------|---------------------------|--------------------------------|
| wrapper   | .mantine-Input-wrapper     | Root element of the Input      |
| input     | .mantine-Input-input       | Input element                  |
| section   | .mantine-Input-section     | Left and right sections        |

#### Input CSS Variables

| Selector | Variable                              | Description |
|----------|--------------------------------------|-------------|
| wrapper  | --input-fz                           | Font size of the input element |
|          | --input-height                       | Height or min-height of the input element (depends on multiline prop) |
|          | --input-left-section-width           | Width of the left section |
|          | --input-right-section-width          | Width of the right section |
|          | --input-margin-bottom                | Margin-bottom of the input element, usually controlled by Input.Wrapper |
|          | --input-margin-top                   | Margin-top of the input element, usually controlled by Input.Wrapper |
|          | --input-padding-y                    | Padding-top and padding-bottom of the input element |
|          | --input-radius                       | Border-radius of the input element |
|          | --input-left-section-pointer-events  | Controls pointer-events of the left section |
|          | --input-right-section-pointer-events | Controls pointer-events of the right section |

#### Input Data Attributes

| Selector       | Attribute               | Condition                           | Value  |
|---------------|-------------------------|-------------------------------------|--------|
| wrapper, input | data-error              | error prop is set                  | –      |
| input         | data-disabled            | disabled prop is set               | –      |
| wrapper       | data-with-right-section  | rightSection prop is set           | –      |
| wrapper       | data-with-left-section   | leftSection prop is set            | –      |
| wrapper       | data-multiline           | multiline prop is set              | –      |
| wrapper       | data-pointer             | pointer prop is set                | –      |
| section       | data-position            | –                                   | Section position: left or right |

#### InputWrapper Selectors

| Selector  | Static selector               | Description                                         |
|-----------|--------------------------------|-----------------------------------------------------|
| root      | .mantine-InputWrapper-root     | Root element                                       |
| label     | .mantine-InputWrapper-label    | Label element                                      |
| required  | .mantine-InputWrapper-required | Required asterisk element, rendered inside label   |
| description | .mantine-InputWrapper-description | Description element                              |
| error     | .mantine-InputWrapper-error    | Error element                                      |

#### InputWrapper CSS Variables

| Selector    | Variable                   | Description                           |
|------------|----------------------------|---------------------------------------|
| label      | --input-label-size         | Controls label font-size              |
|            | --input-asterisk-color     | Controls label asterisk text color    |
| error      | --input-error-size         | Controls error font-size              |
| description | --input-description-size  | Controls description font-size        |



### Keyword Arguments
#### InputWrapper

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

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

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

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

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

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

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

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

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

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

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

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

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

- htmlFor (string; optional):
    Id of associated input.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelElement (a value equal to: 'label', 'div'; optional):
    `Input.Label` root element, `'label'` by default.

- labelProps (dict; optional):
    Props passed down to the `Input.Label` component.

    `labelProps` is a dict with keys:

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

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

    `loading_state` is a dict with keys:

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

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- size (optional):
    Controls size of `Input.Label`, `Input.Description` and
    `Input.Error` components.

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

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

- variant (string; optional):
    variant.

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

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.