Checkbox

Stable

Toggles a boolean or indeterminate selection. Checkmark animates in with spring easing. First-class indeterminate support for select-all table patterns.

Form elementInteractiveVhyxSeal

Interactive example

Unchecked

Click to toggle

Import

tsx

import { Checkbox } from '@vhyxui/react'

States

UncheckedCheckedIndeterm.Disabled

All three states

Select all

State: Some selected

Select-all pattern with indeterminate

Sizes

sm, md, lg

Props

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	—	Controlled checked state.
`defaultChecked`	`boolean \| 'indeterminate'`	`false`	Default state for uncontrolled usage.
`onCheckedChange`	`(checked: boolean \| 'indeterminate') => void`	—	Called when the checked state changes.
`indeterminate`	`boolean`	`false`	Forces the indeterminate (dash) state.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the checkbox.
`disabled`	`boolean`	`false`	Disables interaction (from HTMLButtonElement).
`asChild`	`boolean`	`false`	Renders as the child element via Slot.
`contract`	`Partial<ComponentContract>`	—	VhyxSeal contract override.
`className`	`string`	—	Additional CSS classes appended to the checkbox.

Also accepts all standard HTMLButtonElement attributes.

Accessibility

Keyboard navigation

Key	Action
`Space`	Toggle checked ↔ unchecked. Indeterminate → checked.
`Tab`	Move focus to the next focusable element.
`Shift + Tab`	Move focus to the previous focusable element.

Agent contract

Default VhyxSeal contract shipped with every Checkbox.

Default contract

{
  "type": "input",
  "intent": "toggle-selection",
  "description": "Toggles a boolean selection — checked, unchecked, or indeterminate",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "Updates the checked state in the parent form context",
  "affects": [
    "form"
  ],
  "reversible": true,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_1cf17714"
}

Theming

Override these CSS tokens to theme Checkbox.

--vhyx-color-accentChecked background color

--vhyx-color-accent-hoverChecked hover background

--vhyx-color-border-strongUnchecked border color

--vhyx-color-surfaceUnchecked background

--vhyx-radius-smBorder radius

--vhyx-duration-fastCheckmark animation duration

--vhyx-easing-springCheckmark animation easing

--vhyx-shadow-focusFocus ring

Examples

Terms acceptance

I accept the terms and conditions

Checkbox with inline label

Inside a Field

tsx

<Field name="terms" label="Terms">
  <Checkbox
    {...form.register('terms')}
    checked={form.watch('terms')}
    onCheckedChange={v => form.setValue('terms', v === true)}
    aria-label="Accept terms and conditions"
  />
</Field>