Skip to content
v2.5.0
English
Русский
Documentation

Checkbox

Checkbox is a compound component for independent selectable options, with optional native form participation, indicator rendering, and indeterminate state support.
StorybookSourceFigma

Overview

Checkbox styling is split across the root label state model and the visible indicator surface. Checked, indeterminate, disabled, and focus behavior are coordinated through root-level CSS variables.

Public CSS Variables

VariableValueAffects
Visual size.Checkbox, CheckboxIndicator
No visible change in this state
Current border color.Checkbox, CheckboxIndicator
No visible change in this state
Current background color.Checkbox, CheckboxIndicator
No visible change in this state
Icon color.CheckboxIndicator
No visible change in this state
Focus outline.CheckboxIndicator
No visible change in this state
Border color on hover.Checkbox
No visible change in this state
Border color while pressed.Checkbox
No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

  • Checkbox: root state owner for checked, indeterminate, disabled, and variant styles.
  • CheckboxIndicator: visible control surface.
  • CheckboxCheckedIcon and CheckboxIndeterminateIcon: icon rendering inside the indicator.

State And Variant Interaction

  • variant changes the checked and indeterminate color family.
  • Disabled state overrides both background and border semantics.
  • Focus lives on the visually hidden input but is rendered through the indicator.

Examples

.brandCheckbox {
  --checkbox-br-ratio: 0.25;
}
.compactCheckbox {
  --checkbox-size: 14px;
}

Custom state icons

Children of CheckboxCheckedIcon and CheckboxIndeterminateIcon replace the default icon of that state. The other state keeps its default icon.

custom-state-icons.tsx · 35 lines
import {
  Checkbox,
  CheckboxCheckedIcon,
  CheckboxIndeterminateIcon,
  CheckboxIndicator,
  CheckboxInput,
} from '@vega-ui/react';
import { Diff, Rocket } from '@vega-ui/icons';

export default function CustomStateIcons() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-12)' }}>

Do Not Override

  • Do not remove the focus outline without a replacement.
  • Do not hide the difference between unchecked and checked or indeterminate states.
  • Do not force custom colors that weaken disabled-state readability.