Components › Forms & input › Choice › Checkbox

Checkbox

canon

One checkbox shape in the whole app: a drawn 16px box (5px corners, bold check) over a transparent native input; menu rows use the same box with state classes. For selecting items — a property on/off is a Switch.

Owner approved v2 on 28 Sep 2026: ONE shape (drawn box, bold check stroke 3.5, 5px corners in the compact-button ratio, border --fg-secondary 3.93:1, mixed = accent, disabled state, indeterminate prop). Replaces D6 (22 Aug 2026: native accent-color box in forms, drawn box in menus). Properties of a record (Active, Track opens, Default for domain) moved to Switch. Validator checkbox-native-no-ds is HARD.

Used in 40 files · 20 areas · 64× — components/accounting, components/acl, components/assistant, components/clen-tymu, components/mail, components/meetings …

@acrm/ui <Checkbox>.acrm-checkfield .acrm-check-input .acrm-checkbox .acrm-check-label +4SourceStoryLegacy card Inputs.html
ExamplesCodeUsageAccessibilityChangelog

Import

import { Checkbox } from '@acrm/ui'

Props

Checkbox packages/ui/src/components/Checkbox.tsx

NameTypeDefaultDescription
labelReactNode——
indeterminatebooleanfalseČástečný výběr (hromadný výběr, kde je vybraná jen část řádků).

CSS classes

.acrm-checkfield.acrm-check-input.acrm-checkbox.acrm-check-label.acrm-check-row.is-on.is-mixed.is-disabled

Files

RadioSwitch