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

- icon (a list of or a singular dash component, string or number; optional):
    Icon.

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- indeterminate (boolean; optional):
    Indeterminate state of the checkbox. If set, `checked` prop is
    ignored.

- indeterminateIcon (a list of or a singular dash component, string or number; optional):
    Indeterminate icon.

- label (a list of or a singular dash component, string or number; optional):
    Content of the `label` associated with the checkbox.

- labelPosition (a value equal to: 'left', 'right'; optional):
    Position of the label relative to the input, `'right'` by default.

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

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

    `loading_state` is a dict with keys:

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

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

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

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

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

- size (optional):
    Controls size of the component, `'sm'` by default.

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

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

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

- variant (string; optional):
    variant.

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

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

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

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

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

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

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

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

    `loading_state` is a dict with keys:

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

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

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

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

- readOnly (boolean; optional):
    If set, value cannot be changed.

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

- size (optional):
    Controls size of the `Input.Wrapper`, `'sm'` by default.

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

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

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

- variant (string; optional):
    variant.

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

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

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

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

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

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

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

- checked (boolean; optional):
    State of check box.

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

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

- color (optional):
    Key of `theme.colors` or any valid CSS color to set input
    background color in checked state, `theme.primaryColor` by
    default.

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

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

- disabled (boolean; optional):
    Whether component is disabled.

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

- icon (a list of or a singular dash component, string or number; optional):
    Icon.

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- indeterminate (boolean; optional):
    Indeterminate state of the checkbox. If set, `checked` prop is
    ignored.

- indeterminateIcon (a list of or a singular dash component, string or number; optional):
    Indeterminate icon.

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

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

    `loading_state` is a dict with keys:

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

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

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

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

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

- size (optional):
    Controls size of the component, `'sm'` by default.

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

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

- variant (string; optional):
    variant.

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

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

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

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

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

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

- checked (boolean; optional):
    State of check box.

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

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

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

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

- defaultChecked (boolean; optional):
    Uncontrolled component default value.

- disabled (boolean; optional):
    Determines whether CheckboxCard is disabled and non-selectable.

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

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

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

    `loading_state` is a dict with keys:

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

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

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

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

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

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

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

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

- variant (string; optional):
    variant.

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

- withBorder (boolean; optional):
    Determines whether the card should have border, `True` by default.

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