---
url: "https://vueda.dev/v3/reference/theming/keys/Checkbox.md"
title: "Checkbox"
---
# Checkbox
Source: `client/lib/theme/vueda-tailwind/controls/index.js`
> The boolean-chit shell. 24px square at a 4px corner (one step softer than the 2px control radius) so it reads as a chit rather than a miniature slab control. Default state paints a `hairline` edge on the input-tinted surface and carries the standard focus + `aria-invalid` ring contract. In dark mode the rest edge swaps to `--border-strong` (`dark:hairline-border-strong`) so an unchecked box stays visible on hovered list rows, where the opaque `--input` edge would sink into the `bg-accent/50` hover band. Checked and indeterminate states fill with `--primary` and drop the hairline (the `--vueda-hairline-color:transparent` override on the same selectors) so the surface reads as a single solid swatch; `aria-invalid` swaps both the fill and the painted edge to `--destructive`. The `inline-flex` centring and `align-middle` hold the box to a fixed `size-6` square with a stable baseline whether or not it is checked; keep them when overriding this slot, or toggling a checkbox can reflow baseline-aligned parents (for example the card-layout [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md) grid). Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid.
Vue component: [Checkbox](/v3/reference/api/vue/Checkbox.md)
| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root) | 7 classes | The boolean-chit shell. 24px square at a 4px corner (one step softer than the 2px control radius) so it reads as a chit rather than a miniature slab control. Default state paints a `hairline` edge on the input-tinted surface and carries the standard focus + `aria-invalid` ring contract. In dark mode the rest edge swaps to `--border-strong` (`dark:hairline-border-strong`) so an unchecked box stays visible on hovered list rows, where the opaque `--input` edge would sink into the `bg-accent/50` hover band. Checked and indeterminate states fill with `--primary` and drop the hairline (the `--vueda-hairline-color:transparent` override on the same selectors) so the surface reads as a single solid swatch; `aria-invalid` swaps both the fill and the painted edge to `--destructive`. The `inline-flex` centring and `align-middle` hold the box to a fixed `size-6` square with a stable baseline whether or not it is checked; keep them when overriding this slot, or toggling a checkbox can reflow baseline-aligned parents (for example the card-layout [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md) grid). Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid. |
| [indicator](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-indicator) | `grid place-content-center text-current transition-none` | The centring grid for the indicator glyph (the check or indeterminate-dash icon rendered inside [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root)). `grid place-content-center` parks the icon dead-centre regardless of font-size or zoom; `text-current` lets the glyph inherit the root's `--primary-foreground` (or destructive-foreground on `aria-invalid`) so a custom icon picks up the correct fill without a second class hook. `transition-none` because the surrounding root owns the state-change tones; an animated indicator would lag the surface flip. |
## root
> The boolean-chit shell. 24px square at a 4px corner (one step softer than the 2px control radius) so it reads as a chit rather than a miniature slab control. Default state paints a `hairline` edge on the input-tinted surface and carries the standard focus + `aria-invalid` ring contract. In dark mode the rest edge swaps to `--border-strong` (`dark:hairline-border-strong`) so an unchecked box stays visible on hovered list rows, where the opaque `--input` edge would sink into the `bg-accent/50` hover band. Checked and indeterminate states fill with `--primary` and drop the hairline (the `--vueda-hairline-color:transparent` override on the same selectors) so the surface reads as a single solid swatch; `aria-invalid` swaps both the fill and the painted edge to `--destructive`. The `inline-flex` centring and `align-middle` hold the box to a fixed `size-6` square with a stable baseline whether or not it is checked; keep them when overriding this slot, or toggling a checkbox can reflow baseline-aligned parents (for example the card-layout [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md) grid). Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid.
Default classes:
```text
peer data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground
hairline inline-flex items-center justify-center align-middle size-6 shrink-0 rounded-vueda-checkbox transition-shadow disabled:cursor-not-allowed [&_svg]:size-4 [&_svg]:shrink-0
dark:hairline-border-strong
data-[state=checked]:[--vueda-hairline-color:transparent] data-[state=indeterminate]:[--vueda-hairline-color:transparent]
disabled:!bg-disabled disabled:!text-disabled-foreground disabled:!hairline-border
focus-visible:hairline-ring focus-visible:focus-ring-shadow
aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive aria-invalid:data-[state=checked]:bg-destructive aria-invalid:data-[state=checked]:text-destructive-foreground aria-invalid:data-[state=indeterminate]:bg-destructive aria-invalid:data-[state=indeterminate]:text-destructive-foreground
```
Source: `client/lib/theme/vueda-tailwind/controls/Checkbox.theme.js:21`
## indicator
> The centring grid for the indicator glyph (the check or indeterminate-dash icon rendered inside [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root)). `grid place-content-center` parks the icon dead-centre regardless of font-size or zoom; `text-current` lets the glyph inherit the root's `--primary-foreground` (or destructive-foreground on `aria-invalid`) so a custom icon picks up the correct fill without a second class hook. `transition-none` because the surrounding root owns the state-change tones; an animated indicator would lag the surface flip.
Default classes:
`grid place-content-center text-current transition-none`
Source: `client/lib/theme/vueda-tailwind/controls/Checkbox.theme.js:52`