---
url: "https://vueda.dev/v3/reference/theming/keys/WidgetCheckbox.md"
title: "WidgetCheckbox"
---

# WidgetCheckbox

Source: `client/lib/theme/vueda-tailwind/widgets/index.js`

> The outer row aligns the checkbox control with its label chrome.

Vue component: [WidgetCheckbox](/v3/reference/api/vue/WidgetCheckbox.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetCheckbox.md#theme-key-WidgetCheckbox-root) | `ml-2 flex flex-row grow items-baseline` | The outer row aligns the checkbox control with its label chrome. |
| [inner](/v3/reference/theming/keys/WidgetCheckbox.md#theme-key-WidgetCheckbox-inner) | `flex flex-row grow items-baseline` | The inner row lets the control and label share the available width. |
| [input](/v3/reference/theming/keys/WidgetCheckbox.md#theme-key-WidgetCheckbox-input) | `min-w-min grow-0 shrink-0` | The checkbox input keeps its intrinsic width instead of stretching. |
| [themeOverride](/v3/reference/theming/keys/WidgetCheckbox.md#theme-key-WidgetCheckbox-themeOverride) |  | Local label overrides make [WidgetLabel](/v3/reference/theming/keys/WidgetLabel.md) read as a toggle row. |

<a id="theme-key-WidgetCheckbox-root"></a>

## root

> The outer row aligns the checkbox control with its label chrome.

Default classes:

`ml-2 flex flex-row grow items-baseline`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetCheckbox.theme.js:17`

<a id="theme-key-WidgetCheckbox-inner"></a>

## inner

> The inner row lets the control and label share the available width.

Default classes:

`flex flex-row grow items-baseline`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetCheckbox.theme.js:21`

<a id="theme-key-WidgetCheckbox-input"></a>

## input

> The checkbox input keeps its intrinsic width instead of stretching.

Default classes:

`min-w-min grow-0 shrink-0`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetCheckbox.theme.js:25`

<a id="theme-key-WidgetCheckbox-themeOverride"></a>

## themeOverride

> Local label overrides make [WidgetLabel](/v3/reference/theming/keys/WidgetLabel.md) read as a toggle row.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetCheckbox.theme.js:29`