Checkbox
Checkboxes allow users to select one or more options from a set. Syhrezz uses the native HTML checkbox styled with accent-color: #6366F1 for consistent cross-browser appearance.
Overview
Checkboxes use the native <input type="checkbox"> element. The accent color is set to the director accent #6366F1 globally. In tables, checkboxes use accent-color: #6366F1 for row selection. Always wrap label text in a <label> element linked to the input for proper click-target size.
Variants
Permissions
Table Row Selection
Token Reference
| Property | Value | Notes |
|---|---|---|
| Size | 16x16px | width:16px; height:16px always |
| Border radius | 4px | Native — browser renders |
| Accent color | #6366F1 | accent-color CSS property |
| Cursor | pointer | Always — indicates interactivity |
| Gap (icon to label) | 10px | flex gap between checkbox and text |
| Label font | 13px fw-500 | check-label class |
| Sub-label font | 11px #94A3B8 | check-label-sub class |
| Disabled opacity | 0.5 | check-item.disabled |
AI Implementation Notes
For AI coding assistants: Always use native
<input type="checkbox"> — never a custom div-based checkbox. Set accent-color:#6366F1 for the brand color. Always wrap in a <label> element so the entire row is clickable. In tables, checkboxes are 16x16px with no label wrapping — the row itself is the click target. Selected table rows get background:#EEF2FF.When to Use
Use Checkbox when
- Selecting one or more items from a set
- Binary opt-in preferences (agree to terms)
- Table row selection
- Permission/feature toggles in settings
Don't use Checkbox when
- Only one option can be selected — use radio buttons
- Immediate action on toggle — use a toggle switch
- Filtering data — use pill tabs or a select
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| checked | boolean | optional | false | Checked state. |
| indeterminate | boolean | optional | false | Partial selection state. Set via JavaScript: el.indeterminate=true. Used for "select all" header when some rows are selected. |
| disabled | boolean | optional | false | Disabled state. opacity:.5, cursor:not-allowed. |
| label | string | optional | undefined | Label text wrapped in <label> element for full-row click target. Include .check-label and optional .check-label-sub. |
Design Decisions
Why native checkbox with accent-color instead of a custom component?
Native checkboxes handle indeterminate state, keyboard interactions, form submission, and screen reader announcements without any custom code. The CSS accent-color property applies the brand color (#6366F1) to native checkboxes in all modern browsers, making custom components unnecessary for this use case.
Changelog
v1.0.0July 2026Added
- Native checkbox with accent-color:#6366F1
- Indeterminate state for table select-all pattern
- Label + sub-label composition pattern
Unchecked
Default empty state
Checked
accent-color:#6366F1
Disabled
opacity:.5, cursor:not-allowed
Accessibility
| Requirement | Implementation |
|---|---|
| label element | Always wrap in <label> to make entire row clickable and screen-reader accessible. |
| Keyboard | Tab focuses checkbox. Space toggles. Native behavior — no JS needed. |
| Indeterminate | Set via JS: el.indeterminate=true. Cannot be set via HTML attribute alone. |
| Group label | Wrap checkbox groups in <fieldset> with <legend> for screen reader context. |
Composition
Allowed
Permission/feature lists with label + sub-label
Table row selection (header + row checkboxes)
Settings toggles for boolean preferences
Forbidden
Without a <label> element wrapper
For single mutually exclusive options — use radio
For immediate-action toggles — use a switch component
Best Practices
Do
Always wrap checkbox + label text in a <label> element so the entire row is clickable.
Small checkboxes are hard to click precisely — wrapping in label expands the touch/click target.
Don't
Place checkbox label text before the checkbox element.
Checkbox should come first (left) with label text after (right) for left-to-right reading languages.
Related Components
Anatomy
1
Label wrapper
label.check-item. display:flex, align-items:center, gap:10px, cursor:pointer. Wrapping label makes entire row clickable.
2
Checkbox input
input[type=checkbox]. width/height:16px, accent-color:#6366F1, cursor:pointer, flex-shrink:0.
3
Label text
div.check-label. 13px fw-500. Optional .check-label-sub below at 11px #94A3B8.
Content Rules
Good Label
View Reports
Action-oriented, specific permission
Bad Label
Reports
Ambiguous — view, edit, or delete?
States
Unchecked
Default. Empty box.
Checked
Filled with accent-color:#6366F1
Disabled
opacity:.5, cursor:not-allowed
Checked + Disabled
Read-only checked state
Behavior
| Trigger | Behavior |
|---|---|
| Click (label or input) | Toggles checked state. Wrapping in <label> extends click target to entire row. Native browser behavior — no JS needed. |
| Space key | Toggles checked state when input is focused. Native behavior. |
| Indeterminate state | Set programmatically via el.indeterminate = true. Used for "select all" header when only some rows are selected. Cannot be set via HTML attribute. |
| Disabled | No toggle, no hover, cursor:not-allowed. opacity:.5 on wrapper. Both checked and unchecked disabled states are valid. |
| Group behavior | Checkboxes operate independently by default. Group logic (select all, indeterminate) must be implemented in JS using the indeterminate property. |