Skip to main content

Checkbox

The Checkbox component provides a binary selection input for users to toggle options on or off. It supports checked, unchecked, and indeterminate states with customizable labels.

Overview​

Checkbox provides a complete selection solution with:

  • Checked, unchecked, and indeterminate states
  • Customizable label
  • Multiple sizes
  • Keyboard accessibility
  • Focus and blur handling
  • Mouse interaction events

Basic Usage​

{
  uuid: "my-checkbox",
  name: "terms_checkbox",
  component_type: "checkbox",
  input: {
    value: { type: "boolean", value: false },
    label: { type: "string", value: "I agree to the terms and conditions" }
  },
  event: {
    onChange: `
      $termsAccepted = EventData.checked;
    `
  }
}

Component Inputs​

PropertyTypeDefaultDescription
valueboolean | "indeterminate"falseChecked state: true, false, or "indeterminate"
labelstring''Label text displayed next to checkbox
disabledbooleanfalseDisable checkbox interaction
sizestring'medium'Checkbox size: 'small', 'medium', 'large'
namestring''Form field name
autoFocusbooleanfalseAuto-focus on mount
idstring''Element ID
titlestring''Tooltip title
tabIndexnumber0Tab index for keyboard navigation

Inputs​

value​

Type: boolean | "indeterminate"

The checked state of the checkbox.

input: {
  value: { type: "boolean", value: true }
}

// Indeterminate state (for parent checkboxes)
input: {
  value: { type: "string", value: "indeterminate" }
}

label​

Type: string

Label text displayed next to the checkbox.

input: {
  label: { type: "string", value: "Enable notifications" }
}

size​

Type: string

Checkbox size: small, medium, large.

input: {
  size: { type: "string", value: "large" }
}

Events​

onChange​

Triggered: When checkbox state changes

EventData:

{
  checked: boolean  // New checked state
}

Example:

event: {
  onChange: `
    $isChecked = EventData.checked;

    if (EventData.checked) {
      $selectedItems.push(Current.name);
    } else {
      $selectedItems = $selectedItems.filter(i => i !== Current.name);
    }
  `
}

onFocus​

Triggered: When checkbox receives focus

event: {
  onFocus: `
    $activeField = "checkbox";
  `
}

onBlur​

Triggered: When checkbox loses focus

event: {
  onBlur: `
    $activeField = null;
  `
}

onKeydown​

Triggered: When a key is pressed while focused

event: {
  onKeydown: `
    if (EventData.event.key === 'Enter') {
      // Handle enter key
    }
  `
}

onMouseEnter / onMouseLeave​

Triggered: When mouse enters/leaves the checkbox area

event: {
  onMouseEnter: `$isHovering = true;`,
  onMouseLeave: `$isHovering = false;`
}

Common Patterns​

Select All / Indeterminate​

{
  component_type: "checkbox",
  input: {
    label: { type: "string", value: "Select All" }
  },
  inputHandlers: {
    value: `
      const selected = $selectedItems?.length || 0;
      const total = $allItems?.length || 0;

      if (selected === 0) return false;
      if (selected === total) return true;
      return "indeterminate";
    `
  },
  event: {
    onChange: `
      if (EventData.checked) {
        $selectedItems = [...$allItems];
      } else {
        $selectedItems = [];
      }
    `
  }
}

Terms Agreement​

{
  component_type: "checkbox",
  input: {
    label: { type: "string", value: "I agree to the Terms of Service" },
    required: { type: "boolean", value: true }
  },
  event: {
    onChange: `
      $termsAccepted = EventData.checked;
      $canSubmit = EventData.checked && $formValid;
    `
  }
}

See Also​