## Chip  
Use Chip to pick one or multiple values with inline controls  
Category: Inputs  

### Introduction

### Simple Usage

For a stand-alone `Chip`, use the `checked` property in callbacks.

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


component = dmc.Box(
    [
        dmc.Chip("Awesome chip", checked=True, id="chip-state"),
        dmc.Text(id="chip-container"),
    ],
    p=20,
)


@callback(Output("chip-container", "children"), Input("chip-state", "checked"))
def checkbox(checked):
    return f"The chip is selected: {checked}"
```
### Change Checked Icon

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

component = dmc.Chip(
    "Forbidden",
    icon=DashIconify(icon="bi-x-circle"),
    color="red",
    checked=True,
    m="sm",
)
```
### States

### Chip with Tooltip

```python
import dash_mantine_components as dmc

component = dmc.Tooltip(
    label="chip tooltip",
    children=dmc.Chip("chip with tooltip", checked=True),
)
```
### ChipGroups like Radio Button

In this example, only a single chip can be selected, similar to a radio button. 

> Note:  The  `ChipGroup` `value` property type must be a string when `multiple=False`.

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

component = dmc.Box(
    [
        dmc.Group(
            dmc.ChipGroup(
                [
                    dmc.Chip("Single chip", value="a"),
                    dmc.Chip("Can be selected", value="b"),
                    dmc.Chip("At a time", value="c"),
                ],
                multiple=False,
                value="a",
                id="chipgroup-single",
            ),
            justify="center",
        ),
        dmc.Text(id="chipgroup-single-container", ta="center"),
    ]
)


@callback(
    Output("chipgroup-single-container", "children"), Input("chipgroup-single", "value")
)
def checkbox(value):
    return f"You selected chip: {value}"
```
### ChipGroups like Checklist

In this example,  multiple chips can be selected, similar to a checklist.  Set `multiple=True`

> Note: The  `ChipGroup` `value` property type must be a list of strings when `multiple=True`.

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

component = dmc.Box(
    [
        dmc.Group(
            dmc.ChipGroup(
                [
                    dmc.Chip("Multiple chips", value="a"),
                    dmc.Chip("Can be selected", value="b"),
                    dmc.Chip("At a time", value="c"),
                ],
                multiple=True,
                value=["a", "b"],
                id="chipgroup-multi",
            ),
            justify="center",
        ),
        dmc.Text(id="chipgroup-multi-container", ta="center"),
    ]
)


@callback(
    Output("chipgroup-multi-container", "children"), Input("chipgroup-multi", "value")
)
def checkbox(value):
    return f"Selected chips: {value}"
```
### Deselect radio chip

To enable deselecting a radio chip, set `deselectable=True`


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

component = dmc.Box(
    [
        dmc.Group(
            dmc.ChipGroup(
                [
                    dmc.Chip("Single chip", value="a"),
                    dmc.Chip("Can be selected", value="b"),
                    dmc.Chip("At a time", value="c"),
                ],
                multiple=False,
                value="a",
                deselectable=True,
                id="chipgroup-deselect",
            ),
            justify="center",
        ),
        dmc.Text(id="chipgroup-deselect-container", ta="center"),
    ]
)


@callback(
    Output("chipgroup-deselect-container", "children"), Input("chipgroup-deselect", "value")
)
def checkbox(value):
    return f"You selected chip: {value}"
```
### Styles API


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


#### Chip Selectors

| Selector    | Static selector              | Description                               |
|-------------|------------------------------|-------------------------------------------|
| root        | .mantine-Chip-root            | Root element                              |
| checkIcon   | .mantine-Chip-checkIcon       | Check icon, visible when `checked` prop is true |
| iconWrapper | .mantine-Chip-iconWrapper     | Wraps `checkIcon` for alignment           |
| input       | .mantine-Chip-input           | Input element, hidden by default          |
| label       | .mantine-Chip-label           | Input label, used as the chip body        |

#### Chip CSS Variables

| Selector | Variable                  | Description                                          |
|----------|---------------------------|------------------------------------------------------|
| root     | --chip-fz                  | Controls font-size                                   |
|          | --chip-size                | Controls height                                      |
|          | --chip-icon-size           | Controls width and height of the icon                |
|          | --chip-padding             | Controls horizontal padding when chip is not checked |
|          | --chip-checked-padding     | Controls horizontal padding when chip is checked     |
|          | --chip-radius              | Controls border-radius                               |
|          | --chip-bg                  | Controls background-color when chip is checked       |
|          | --chip-hover               | Controls background-color when chip is checked and hovered |
|          | --chip-color               | Controls color when chip is checked                  |
|          | --chip-bd                  | Controls border when chip is checked                 |
|          | --chip-spacing             | Controls spacing between check icon and label        |

#### Chip Data Attributes

| Selector | Attribute      | Condition                |
|----------|----------------|--------------------------|
| label    | data-checked    | Chip is checked          |
| label    | data-disabled   | `disabled` prop is set   |




### Keyword Arguments
#### Chip

- children (a list of or a singular dash component, string or number; required):
    `label` element associated with the input.

- id (string; optional):
    Static id to connect input with the label, by default `id` is
    randomly generated.

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

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

- autoContrast (boolean; optional):
    Determines whether button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- checked (boolean; optional):
    Checked state for controlled component.

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

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

- color (optional):
    Controls components colors based on `variant` prop. Key of
    `theme.colors` or any valid CSS color. `theme.primaryColor` by
    default.

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

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

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

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

- icon (a list of or a singular dash component, string or number; optional):
    Any element or component to replace default icon.

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

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

    `loading_state` is a dict with keys:

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

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

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

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

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

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls various properties related to component size, `'sm'` by
    default.

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

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

- type (a value equal to: 'radio', 'checkbox'; optional):
    Chip input type, `'checkbox'` by default.

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

- variant (string; optional):
    variant.

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

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:
#### ChipGroup

- children (a list of or a singular dash component, string or number; optional):
    `Chip` components and any other elements.

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

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

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

- deselectable (boolean; optional):
    Allow to deselect Chip in Radio mode.

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

    `loading_state` is a dict with keys:

- multiple (boolean; optional):
    Determines whether it is allowed to select multiple values,
    `False` by default.

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

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

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

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

- value (string | list of strings; optional):
    When using multiple=True, value must be a list.